1. Color Schemes For Use in Websites

2. Monochromatic Color Scheme

3. 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.

4. Monochromatic: Tint-Blue-Shade

5. Analogous Color Scheme

6. 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.

7. 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.

8. Analogous: Red Orange, Orange, Yellow Orange

9. Complementary Color Scheme

10. 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

11. 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.

12. Complementary Red - Green

13. Triadic Color Scheme

14. 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.

15. 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.

16. Triadic: yellow, red, and blue

17. Split-Complementary Color Scheme

18. 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.

19. 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.

20. Split-Complementary Color Scheme

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

22. Tetrad Color Scheme
Rectangle
Square
Rectangle
Square

23. 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.

24. 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.

25. Rectangle Tetrad: Red-Orange, Blue-Green

26. Square Tetrad: Orange, Green, Blue, Pink

27. Neutral Color Schemes

28. 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.