Color Schemes For Use in Websites

Monochromatic Color Scheme

Monochromatic Color Scheme Monochromatic is a color scheme that consists of one specific color variation plus its values and intensities of tints, tones and shades. For this example, everything would be a tint, tone, shade of the hue Yellow.

Monochromatic: Tint-Blue-Shade

Analogous Color Scheme

Analogous Color Scheme Analogous colors are hues that are next or adjacent to each other. They will share a common “key” color and may include any of 3, 4 or 5 adjoining colors on one or both sides of the key. In the example, Red is the common color and the colors Violet through Orange are related.

Analogous Color Scheme They match well, create serene & comfortable designs Often found in nature and are harmonious and pleasing to the eye. Make sure there is enough contrast when choosing an analogous color scheme. Choose one color to dominate & a second to support. The third color is used (along with black, white or gray) as an accent.

Analogous: Red Orange, Orange, Yellow Orange

Complementary Color Scheme

Complementary Color Scheme Complementary colors are hues that are directly opposite each other on the color wheel. They are also called “contrasting hues.” Red & Green are a complementary pair in the example. Violet & Yellow is another Blue & Orange is another

Complementary Color Scheme The high contrast of complementary colors create a vibrant look especially when used at full saturation. Complementary color schemes are tricky to use in large doses, but work well as accents and making an object stand out. Complementary colors combinations are really bad for text.

Complementary Red - Green

Triadic Color Scheme

Triadic Color Scheme Triadic is a color scheme in which 3 colors are evenly and equally spaced from each other. The spacing creates a triangle on the color wheel. Red/Blue/Yellow create this triad. Another triad is Green/Orange/Violet.

Triadic Color Scheme The colors should be carefully balanced - let one color dominate such as the neutral and use the two others for accents such as titles or links or borders.

Triadic: yellow, red, and blue

Split-Complementary Color Scheme

Split-Complementary Color Scheme Split Complementary color schemes have 3 colors. The key hue plus the colors on either side of the key hue’s opposite color. In this case, the key color is Green and the other colors, Red-violet and Red-orange, are on either side of Green’s direct complement.

Split-Complementary Color Scheme It is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement. Has the same strong visual contrast as the complementary color scheme, but has less tension.

Split-Complementary Color Scheme

Split-Complimentary: Yellow, Violet, & Blue-Violet

Tetrad Color Scheme Rectangle Square Rectangle Square

Tetrad Color Scheme Tetrad is a color scheme involving four colors. It may be based on a square or a rectangle. Rectangular tetrads will be either all tertiary colors or a combination of primary and secondary colors only. The square color scheme is similar to the rectangle, but with all four colors spaced evenly around the color circle. Square color schemes works best if you let one color be dominant.

Tetrad Color Scheme This rich color scheme offers plenty of possibilities for variation. It works best if you let one color be dominant. Pay attention to the balance between warm and cool colors in your design.

Rectangle Tetrad: Red-Orange, Blue-Green

Square Tetrad: Orange, Green, Blue, Pink

Neutral Color Schemes

Accent with Neutral Pairing Neutrals create a less dominant color to pair with a vibrant color to create a better contrast and to improve eye flow through the website.