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