Version 1.1 by Jon Ippolito
Limiting colors to variations on the same hue can lend coherence to your Web design and make it easier on the eye.
There are many ways to achieve this, but one of the simplest is to multiply the percentages of the Red/Green/Blue, or rgb, attribute of Cascading Stylesheets. This gives you a spectrum of hue variations from dark to light.
(This technique is even easier with the Hue/Saturation/Lightness, or hsl, attribute. Sadly, this specification isn't supported in Internet Explorer 9 or earlier.)
Here are some simple examples:
The colors in this page are, from darkest to lightest:
These are all multiples of the same combinations.
There is no black or white, which can be jarring--only different combinations of foreground and background to create visual coherence.
Highlight colors, such as hyperlinks, can be a color from an opposite (or split-opposite) part of the spectrum.
To keep the number of variations down, the color of the "Subtitle" text above is the same as the background color of the containing div.
The colors in this page are, from darkest to lightest:
These are all multiples of the same combinations.
There is no black or white, which can be jarring--only different combinations of foreground and background to create visual coherence.
Highlight colors, such as hyperlinks, can be a color from an opposite (or split-opposite) part of the spectrum.
To keep the number of variations down, the color of the "Subtitle" text above is the same as the background color of the containing div.
The colors in this page are, from darkest to lightest:
These are all multiples of the same combinations.
There is no black or white, which can be jarring--only different combinations of foreground and background to create visual coherence.
Highlight colors, such as hyperlinks, can be a color from an opposite (or split-opposite) part of the spectrum.
To keep the number of variations down, the color of the "Subtitle" text above is the same as the background color of the containing div.