Color Spot Tables: tables of color swatches and color codes used in HTML and CSS

Using the Generated Chips Charts for Color Schemes

This page illustrates how you can set up monochromatic, complementary, split complementary, double complementary (tetradic), analogous, and triadic color schemes using the Generated Chips (at hue intervals of 30°) chart, Generated Chips (at hue intervals of 10°) chart, or Generated Chips (at hue intervals of 6°) chart.

A Monochromatic Color Scheme

According to color theory (see references), a monochromatic color scheme appears balanced and has a soothing effect.

To set up a monochromatic color scheme, we just pick a color and find other shades of it with the same hue value. Using the Generated Chips chart, we can pick out three colors with a hue of 240°:

240°

#474785

#B3B3E6

#CCCCFF

When we color portions of our pages, we can use the darkest color for headings. Then we can use the other shades as background for text areas of our page. For example, like this:

This table illustrates how you can create a monochromatic color scheme.

The background of this section is the color #B3B3E6, the middle shade of our 240° color.

Welcome to a Monochromatic Scheme

The headline above is the color #474785, the darkest shade of our 240° color.

The background of this section is the color #CCCCFF, the lightest version of our 240° color.

The background of this paragraph is the color #B3B3E6, the middle shade of our 240° color.

Monochromatic color schemes have a calming, soothing effect and appear balanced. The lack of contrast can make it hard to draw the eye to particular areas of the page, however.

A Complementary Color Scheme

To address the lack of contrast which can be a problem in monochromatic color schemes, we can try a complementary color scheme using a color and its complement. The complement of a color is a color with a hue 180° away. If we choose some color swatches at 190° hue on the Generated Chips chart, we can pick complementary color swatches at 190° - 180° = 10° hue. Here are some picks for this complementary scheme:

190°

10°

#52747A

#3DD6F5

#D4F1F7

#E88F7D

#FFAA99

We can use the 190° color and its shades as the dominant colors for our pages and the 10° color and its shades to provide highlights. Because these colors are 180° hue away from each other, they have strong contrast. Here is one way to set up a page with these complementary colors:

This table illustrates how you can create a complementary color scheme. This highlighted sentence has a background color of #FFAA99, a color with 10° hue.

The background of this section is the color #3DD6F5, a shade of a color with 190° hue.

Welcome to a Complementary Scheme

The headline above is the color #527471, a very dark shade of a color with 190° hue.

The background of this section is the color #D4F1F7, the lightest shade that we picked of a color with 190° hue.

This box has a background of #FFAA99, a color with 10° hue.

This complementary color scheme involves colors 180° apart in hue. Complementary colors have high contrast with each other.

Pick one of the complementary colors as a dominant one in terms of area covered. Use the other complementary color to add highlights.

A Split Complementary Color Scheme

A complementary color scheme might seem to have too much contrast and tension. To relieve this tension, you can try a split complementary scheme. A split complementary color scheme uses a base color and two colors with hues close to the base color's complement.

For example, say we choose our base color at 30° hue. The complement of this color has a hue of 30° + 180° = 210°. We can look for colors with values of about 20° above and below 210°. On the Generated Chips (at hue intervals of 10°) chart, we can pick shades of colors for 30° hue and at 190° and 230° hue. For example, our choices might be:

30°

190°

230°

#4D3319

#FF9933

#FFE6CC

#94C7D1

#D6F0F5

#3D4B8F

#99AAFF

We use the base color at 30° hue and its shades as the dominant color for our pages, and we use the other colors as highlights. Because these colors are around 160� of hue away from each other, they have contrast, but not too much contrast. Here is one way to do this:

This table illustrates how you can create a split complementary color scheme. This highlighted sentence has a background color of #D6F0F5, a color with 190° hue.

The background of this section is the color #FF9933, a color with 30° hue.

Welcome to a Split Complementary Scheme

The headline above is the color #, a very dark shade of a color with 230° hue.

The background of this section is the color #FFE6CC, the lightest shade that we picked of a color with 30° hue.

This box has a background of #99AAFF, a color with 230° hue.

This split complementary color scheme involves a base color and two colors that are approximately the base color's complement.

Pick one of the complementary colors as a dominant one in terms of area covered. Use the other complementary color to add highlights such as this text with a background of #94C7D1, a color with hue of 190°.

If in the split complementary color scheme, you also use the complement of the dominant color, it could be called an alternate-complementary color scheme: a base color, its complement, and the complement's neighbors.

A Double Complementary (Tetradic) Color Scheme

You can bring colors of four different hues into play using two complementary pairs of colors. In a double complementary color scheme, pick a base color as dominant, then pick its complement color with a hue 180° away. Pick another color and its complement, giving colors of four different hues in total. If the two pairs of complementary colors are 90° apart, the double complementary scheme can be called tetradic. If the two base colors are close together in hue, this scheme can be called a double-contrast scheme.

For example, we could pick a color at 80° hue as our base color; its complement has 260° hue. We can pick another color at 50° hue with a complement of 230°. We pick several shades of our base color and its complement and just one shade of the other complement pair:

80°

260°

50°

230°

#426105

#D3E0B8

#ECFAD1

#422E6B

#DECFFC

#FAF3D1

#334499

We use shades of our base color for the dominant areas and the rest of the colors as highlights. The complementary colors give high contrast.

This table illustrates how you can create a double complementary color scheme. This highlighted sentence has a background color of #DECFFC, a color with 260° hue, the complement of our base color with 80° hue.

The background of this section is the color #D3E0B8, a color with 80° hue.

Welcome to a Double Complementary Scheme

The headline above is the color #422E6B, a dark shade of a color with 260° hue, the complement of our base color with 80° hue.

The background of this section is the color #ECFAD1, the lightest shade that we picked of our base color with 80° hue.

This box has a background of #FAF3D1, a color with 50° hue. The border of this box is a color #334499, a color of 230° hue, the complement of its background.

This double complementary color scheme involves a base color, its complement and another color and its complement.

Pick one of the colors as a dominant one in terms of area covered. Use the other colors to add highlights.

An Analogous Color Scheme

An analogous scheme uses colors that are close to each other in hue. The differing hues can provide a bit more contrast than in a monochromatic color scheme, but because the colors are close in hue, the analogous scheme still has a balance. For example, using the Generated Chips chart, we can choose shades colors with hues of 20°, 30°, and 40°:

20°

30°

40°

#FF9966

#994C00

#FFCC99

#FFE6CC

#FFCC66

We can use the 30° colors as the dominant colors and the shades of the 20° and 40° colors as highlights, like this:

This table illustrates how you can create an analogous color scheme. This highlighted sentence has a background color of #FF9966, a 20° color.

The background of this section is the color #FFCC99, a 30° color.

Welcome to an Analogous Scheme

The headline above is the color #994C00, the darkest shade of the 30° color.

The background of this section is the color #FFE6CC, the lightest shade of the 30° color.

This box has a background of #FFCC66, a 40° color.

This analogous color scheme involves three colors within 20° range of hue. Analogous colors have some contrast with each other.

Pick one of the colors as a dominant one in terms of area covered. Use the others to add highlights.

A Triadic Color Scheme

A triadic color scheme involves three colors which are separated by 120° hue, offering some color contrast, but with some balance. I think it is hard to come of with a good color triad that doesn't look too gaudy.

To prepare a triadic scheme, we pick a first color and note its hue. Using the Generated Chips chart, for example, we pick a color at 150° as our dominant color. We then pick colors separated from 150° by 120° hue. So we pick colors at 150 - 120° = 30° and at 150 + 120° = 270° such as these:

30°

150°

270°

#FFE6CC

#366E4D

#75F0B3

#CCFFE6

#E5CCFF

We use our 150° colors as dominant, and use the others as highlights:

This table illustrates how you can create a triadic color scheme. This highlighted sentence has a background color of #FFE6CC, a 30° color.

The background of this section is the color #75F0B3, a 20° color.

Welcome to a Triadic Scheme

The headline above is the color #366E4D, the darkest shade of our 150° color.

The background of this section is the color #CCFFE6, the lightest shade of our 150° color.

This box has a background of #E5CCFF, a 270° color.

This triadic color scheme involves three colors 120° apart in hue from each other. Triadic colors have contrast with each other.

Pick one of the colors as a dominant one in terms of area covered. Use the others to add highlights.

You can interactively create color schemes like these at Color Scheme Maker 2000!