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

Using the Color Shades Chart for Color Schemes

You can use the Color Shades chart to prepare pages with a variety of color schemes. This page illustrates how you can set up monochromatic, complementary, split complementary, double complementary (tetradic), analogous, and triadic color schemes using the Color Shades 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 row of the Color Shades chart. Say we like the cherry color's row:

NameHueOriginal value 1 step lighter 2 steps lighter 3 steps lighter
cherry357°#EB5E66
 
#F18C92
 
#F6BABE
 
#FCE8E9
 

When we color portions of our HTML pages, we can use the original cherry color for very dark headlines and text. Then we can use the 3 other shades of cherry for other 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 #F18C92, one step in our table lighter from the original cherry.

Welcome to a Monochromatic Scheme

The headline above is the color #EB5E66, the original cherry.

The background of this section is the color #FCE8E9, the lightest version of cherry in our chart, three steps in our table lighter from the original cherry.

The background of this paragraph is the color #F6BABE, two steps in our table lighter from the original value of cherry.

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 cherry for one color (357° hue), we look on the Color Shades chart for a color at 357° - 180° = 177°, and we find lightseagreen. Here are the rows for these complementary colors:

NameHueOriginal value 1 step lighter 2 steps lighter 3 steps lighter
cherry357°#EB5E66
 
#F18C92
 
#F6BABE
 
#FCE8E9
 
lightseagreen177°#20B2AA
 
#4EDFD7
 
#9CEDE9
 
#E9FBFA
 

We use the lightseagreen and its shades as the dominant color for our pages, and we use cherry and its shades to provide highlights. Because these colors are 180° of hue away from each other, they have strong contrast. Here is one way to do this:

This table illustrates how you can create a complementary color scheme. This highlighted sentence has a background color of #F6BABE, 2 steps lighter than our original cherry.

The background of this section is the color #9CEDE9, two steps in our table lighter from the original lightseagreen.

Welcome to a Complementary Scheme

The headline above is the color #EB5E66, the original cherry.

The background of this section is the color #E9FBFA, the lightest version of lightseagreen shown here, three steps in our table lighter from the original lightseagreen.

This box has a background of #FCE8E9, 3 steps lighter than the original cherry.

This complementary color scheme involves two colors approximately 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 lightseagreen for our base color (177° hue). The complement of lightseagreen has a hue of 177° + 180° = 357°. We can look for colors with values of about 20° above and below 357°. On the Color Shades chart, we might pick lightsalmon2 at 17° (357° + 20° = 377° = 17°) and maroonb0 at 338° (357° - 20° = 337° ≈ 338°). Here are the rows for these split complementary colors:

NameHueOriginal value 1 step lighter 2 steps lighter 3 steps lighter
lightseagreen177°#20B2AA
 
#4EDFD7
 
#9CEDE9
 
#E9FBFA
 
lightsalmon217°#EE9572
 
#F3B399
 
#F8D0C1
 
#FCEEE8
 
maroonb0338°#B03060
 
#D4638D
 
#E7A7BF
 
#FAEBF0
 

We use the lightseagreen and its shades as the dominant color for our pages, and we use the shades of the near-complement to provide 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 #F8D0C1, 2 steps lighter than our original lightsalmon2.

The background of this section is the color #9CEDE9, two steps in our table lighter from the original lightseagreen.

Welcome to a Split Complementary Scheme

The headline above is the color #B03060, the original maroonb0.

The background of this section is the color #E9FBFA, the lightest version of lightseagreen shown here, three steps in our table lighter from the original lightseagreen.

This box has a background of #FAEBF0, 3 steps lighter than the original maroonb0.

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

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

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 a color with a hue 180° away (its complement). 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 khaki as our base color, with a hue of 54°. We look on the Color Shades chart for khaki's complement, a color with a hue of 54° + 180° = 234°, silver. We pick another color (in any relationship to the other two), cola, hue 5°. Its complement has a hue of 5° + 180° = 185°, old copper. Here are the rows of these colors:

NameHueOriginal value 1 step lighter 2 steps lighter 3 steps lighter
khaki54°#F0E68C
 
#F4EDAB
 
#F8F3CA
 
#FCFAE8
 
silver234°#E6E8FA
 
#E7E9FA
 
#E8EAFA
 
#EAEBFB
 
cola#AF4035
 
#D17268
 
#E5AFAA
 
#F9EDEB
 
old copper185°#73B1B7
 
#9CC8CC
 
#C5DFE1
 
#EEF6F6
 

We use shades of khaki 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 #E6E8FA, silver, the complement of our base color khaki.

The background of this section is the color #F0E68C, khaki.

Welcome to a Double Complementary Scheme

The headline above is the color #AF4035, cola.

The background of this section is the color #FCFAE8, the lightest version of khaki shown here, three steps in our table lighter from the original khaki.

This box has a background of #C5DFE1, two steps lighter than the original old copper.

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

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

An Analogous Color Scheme

An analogous color scheme uses colors that are close to each other in hue. This is similar to the monochromatic scheme, but the differing hues can provide a bit more contrast. For example, if we choose terreverte (hue 89°), we pick some colors close to 89° in hue above and below it in the Color Shades chart:

NameHueOriginal value 1 step lighter 2 steps lighter 3 steps lighter
melonrindgreen81°#DFFFA5
 
#E7FFBA
 
#EEFFD0
 
#F6FFE5
 
terreverte89°#385E0F
 
#78CA20
 
#B6EA7D
 
#F3FBE9
 
cinnabargreen96°#61B329
 
#8ED95B
 
#BFEAA3
 
#F1FAEA
 

We can use the terreverte and its shades as the dominant color with the shades of melonrindgreen and cinnabargreen as highlights, like this:

This table illustrates how you can create an analogous color scheme. This highlighted sentence has a background color of #8ED95B, one step lighter than our original cinnabargreen.

The background of this section is the color #B6EA7D, two steps in our table lighter from the original terreverte.

Welcome to an Analogous Scheme

The headline above is the color #385E0F, the original terreverte.

The background of this section is the color #F3FBE9, the lightest version of terreverte shown here, three steps in our table lighter from the original terreverte.

This box has a background of #DFFFA5, the original melonrindgreen.

This analogous color scheme involves three colors within approximately 15° 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° of hue, offering some color contrast, but with some balance. I think it is hard to come up 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 in the Color Shades chart. For example, yellow at 60°. We then pick colors at 60 + 120° = 180° and at 180 + 120° = 300° like this:

NameHueOriginal value 1 step lighter 2 steps lighter 3 steps lighter
yellow60°#FFFF00
 
#FFFF4D
 
#FFFF99
 
#FFFFE5
 
cadetblue180°#5F9F9F
 
#8FBCBC
 
#BFD9D9
 
#EFF5F5
 
sgibeet300°#8E388E
 
#C264C2
 
#DDA8DD
 
#F8EDF8
 

Here is one way to use these colors:

This table illustrates how you can create a triadic color scheme. This highlighted sentence has a background color of #FFFF99, two steps lighter than our original yellow.

The background of this section is the color #BFD9D9, two steps in our table lighter from the original cadetblue.

Welcome to a Triadic Scheme

The headline above is the color #8E388E, the original sgibeet.

The background of this section is the color #EFF5F5, the lightest version of cadetblue shown here, three steps in our table lighter from the original cadetblue.

This box has a background of #F8EDF8, three steps lighter than our original sgibeet.

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!

search Search · star Market
2023-06-19 · John December · Terms © johndecember.com