Choosing Web Page Colors
Choosing web page colors blends art and science. The choice can be
somewhat automated.
There are about 17 million web page color combinations. A bewildering amount.
There are 256 brightness levels for each of the 3 primary colors.
In reality, most web pages are developed using the 216 browser safe colors.
This small subset of colors is expected to be displayed in a proper manner
on a wide variety of systems and monitors. At first blush, 17 million colors
sounds like too many, and 216 sounds like too few. We'll soon see that
a few hundred does quite well.
Here is an example. One browser safe color, a shade of orange, has an
RGB
value of FF3333h. Above it is a color shade with one increment less
of green. The color below FF3333h has one more increment of green.
Finally, the 4th color bar is FF3933h. That is a bigger difference in green
intensity than in the 3 colors above it. Yet, one is hard pressed to sense
a difference. One concludes that small color changes are more about math
than visual differences.
|
|
|
|
|
FF3233 |
|
|
FF3333 |
|
|
FF3433 |
|
|
FF3933 |
We've seen that any color can be expressed with its RGB value. Another
approach to color selection is using the 140 named colors. Those colors
can be expressed with names as well RGB values. The names range from
red to lightgoldenrodyellow, and are not case sensitive. Purists will note
that these colors were not selected from the list of browser safe colors.
Furthermore, there are two duplicates, so the 140 names represent 138 colors.
Cyan=Aqua=00FFFFh
Fuchsia=Magenta=FF00FFh
The question of choosing colors still remains. Browser safe colors are
derived from the realities of using electronic systems to produce colors.
The 140 named colors are more from history than science. A good approach
then, ought to be based on brightness. One could start with a brightness
range. Brightnes does express attitude. After that color selection can
begin. Colors of similar brightness create a uniform look. Contrasting
colors provide emphasis. Avoiding clashing colors is the same issue whether
the context is clothing or web pages.
The links below offer the 140 named colors and 216 browser safe colors
sorted on brightness. The best way to use these pages is to copy
them to your site and put in your backgound texture file or solid color.
The pages have everything centered to help test user ideas on background
choices.
The pages here use CSS. See file cc.css.
140 Named Colors sorted on brightness
216 Browser Safe Colors sorted on brightness
A blending of the 2 items above, also sorted
on brightness.
Send comments to:
<Neal>
Return to
previously viewed page
Go to home page