[an error occurred while processing this directive]

CSS colors

jessey.net | Simon | articles | previous article | next article


for quick results, use the named colors

When the World Wide Web Consortium finalized the standard for Cascading Style Sheets, they included 16 named colors. These colors were previously defined in HTML and correspond to the 16 VGA colors on a PC. It is worth memorizing them because in most case, when designing a simple web page you are unlikely to need any others. Here are the 16 colors, together with their RGB hexadecimal values:

   black #000000             silver #C0C0C0
   gray #808080             white #FFFFFF
   maroon #800000             red #FF0000
   purple #800080             fuchsia #FF00FF
   green #000800             lime #00FF00
   olive #808000             yellow #FFFF00
   navy #000080             blue #0000FF
   teal #008080             aqua #00FFFF

Certain browsers support many other named colors, but because these do not adhere to the specification they should be avoided and the full, hexadecimal value used instead. So, to apply color to an element, you might do something a bit like this:

h1.disgusting {
    background-color: lime;
    color: red;

Below are the awful style rules in action:

This is hideous

the 216-color palette

Beyond the 16 named colors is the so-called browser-safe palette. Most computers can now display thousands, or even millions of colors. Older computers and other devices such as cellular phones may not support so many colors. Almost all of these devices will support 256 colors. When trying to display something that is not one of these special colors, a device will often resort to some sort of mix between two colors that approximate the one specified. You get a kind of "speckled" effect called dithering that is rather unpleasant. By using the 216 colors of the browser-safe palette, you can eliminate this effect. The reason there are 216 available colors and not 256 is that the major operating systems reserve the remaining colors for their own use, but not the same colors.

The 216-color palette uses 6, evenly-spaced graduations of red, green and blue and their combinations. The colors are created from red, green and blue that have been restricted to the hexadecimal values of 00, 33, 66, 99, cc and ff.

   FFFFFF    FFFFCC    FFFF99    FFFF66    FFFF33    FFFF00
   CCFFFF    CCFFCC    CCFF99    CCFF66    CCFF33    CCFF00
   99FFFF    99FFCC    99FF99    99FF66    99FF33    99FF00
   66FFFF    66FFCC    66FF99    66FF66    66FF33    66FF00
   33FFFF    33FFCC    33FF99    33FF66    33FF33    33FF00
   00FFFF    00FFCC    00FF99    00FF66    00FF33    00FF00
   FFCCFF    FFCCCC    FFCC99    FFCC66    FFCC33    FFCC00
   CCCCFF    CCCCCC    CCCC99    CCCC66    CCCC33    CCCC00
   99CCFF    99CCCC    99CC99    99CC66    99CC33    99CC00
   66CCFF    66CCCC    66CC99    66CC66    66CC33    66CC00
   33CCFF    33CCCC    33CC99    33CC66    33CC33    33CC00
   00CCFF    00CCCC    00CC99    00CC66    00CC33    00CC00
   FF99FF    FF99CC    FF9999    FF9966    FF9933    FF9900
   CC99FF    CC99CC    CC9999    CC9966    CC9933    CC9900
   9999FF    9999CC    999999    999966    999933    999900
   6699FF    6699CC    669999    669966    669933    669900
   3399FF    3399CC    339999    339966    339933    339900
   0099FF    0099CC    009999    009966    009933    009900
   FF66FF    FF66CC    FF6699    FF6666    FF6633    FF6600
   CC66FF    CC66CC    CC6699    CC6666    CC6633    CC6600
   9966FF    9966CC    996699    996666    996633    996600
   6666FF    6666CC    666699    666666    666633    666600
   3366FF    3366CC    336699    336666    336633    336600
   0066FF    0066CC    006699    006666    006633    006600
   FF33FF    FF33CC    FF3399    FF3366    FF3333    FF3300
   CC33FF    CC33CC    CC3399    CC3366    CC3333    CC3300
   9933FF    9933CC    993399    993366    993333    993300
   6633FF    6633CC    663399    663366    663333    663300
   3333FF    3333CC    333399    333366    333333    333300
   0033FF    0033CC    003399    003366    003333    003300
   FF00FF    FF00CC    FF0099    FF0066    FF0033    FF0000
   CC00FF    CC00CC    CC0099    CC0066    CC0033    CC0000
   9900FF    9900CC    990099    990066    990033    990000
   6600FF    6600CC    660099    660066    660033    660000
   3300FF    3300CC    330099    330066    330033    330000
   0000FF    0000CC    000099    000066    000033    000000

You can specify hexadecimal values in shorthand. For example, the color #6633CC can be written as #63C instead. It is also perfectly okay to specify the hexadecimal letters in lowercase, so it would be #63c instead. I would actually recommend this in case it becomes important with future, case-sensitive versions of CSS.

information resource

The section on colors in the Cascading Style Sheet specification goes into greater detail about ways you can specify colors in a style sheet. Visibone specializes in supplying color tools and charts. Visicheck has a useful tool for checking to see if images on your website are posing problems for people with forms of color-blindness. Thank you for reading.

XHTML 1.1 icon, indicating validated XHTML 1.1 CSS icon, indicating validated CSS

© Simon Jessey, 2002