CSS Home

Color Schemes

Here we will cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern.

Traditional Color Scheme Types

Monochromatic

Monochromatic color schemes are made up of different variations of the same color - often by lightening or darkening a chosen color. If you want to create a monochromatic color scheme, adding in a strong neutral like white or black can help keep things interesting.

Here are two examples of monochrome color schemes.

Red Monochromatic

Hex RGB Color
#FF6666 255, 102, 102 40% lighter than red (close to the web color name Tomato)
#FF0000 255, 0, 0 Red
#990000 153, 0, 0 40% darkened than red (close to the web color name DarkRed)

Blue Monochromatic

Hex RGB Color
#6666FF 102, 102, 255 40% lighter than blue (somewhat like the web color name RoyalBlue)
#0000FF 0, 0, 255 Blue
#000099 0, 0, 153 40% darker than blue (close to DarkBlue)

Cyan Monochromatic

Hex RGB Color
#E0FFFF224, 255, 255LightCyan
#00FFFF0, 255, 255Cyan
#008B8B 0, 139, 139DarkCyan

Analogous

Analogous color schemes are the next easiest to create. Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Sometimes designers add more than 3 colors to analogous schemes by lightening or darkening colors on the outside of color triplets.

In order to create the following examples of analagous color scheme, we picked three web colors for the analogous scheme.

Red-Purple, Red, Red-Orange

Hex RGB Color
#800080 128, 0, 128 Red-Purple
#FF0000 255, 0, 0 Red
#FF8C00 255, 140, 0 Red-Orange

Yellow-Green, Green, Blue-Green

Hex RGB Color
#9ACD32 154, 205, 50 YellowGreen
#008000 0, 128, 0 Green
#4682B4 70, 130, 180 SteelBlue

Complementary

Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors. A word of warning, though: using colors that are exact opposites (without adjusting lightness/darkness) right next to each other can be visually jarring. They will appear to vibrate along their border in the most severe cases. This is best avoided (either by leaving negative space or by adding another, transitional color between them.

The following schemes are created by picking two web colors for the complementary scheme, and lightened/darkened them.

Blue-Orange

Hex RGB Color
#FFFFCC 255, 255, 204 80% lighter than Orange (close to the web color name Cornsilk)
#FFA500 255, 165, 0 Orange
#0000FF 0, 0, 255 Blue
#000099 0, 0, 153 40 % darker than Blue (close to DarkBlue)
#000033 0, 0, 51 80 % darker than Blue (close to Black with a blueish tint)

Yellow-Purple

Hex RGB Color
#FFCCFF 255, 204, 255 80% lighter than Purple (close to Plum)
#800080 128, 0, 128 Purple
#FFFF00 255, 255, 0 Yellow

Next: CSS Activity 2
Previous: Web Color