Optimize CSS Colors

You can specify colors five ways in CSS; four use numeric RGB values and one uses named colors. The two most efficient ways to specify colors are hexadecimal and named colors. Hexadecimal colors take two forms: RGB triplets and shorthand. Here's an example:

 h1 { color: #ff0000 }           /* hexadecimal   #rrggbb */  h1 { color: #f00 }              /* shorthand hex #rgb */ 

Hexadecimal Colors

Hexadecimal values are base-16, which means that they usually are shorter than base-10 numbers . To specify to 255 in hex, you'd use 00 to ff , saving a byte for higher color channels.

Shorthand Hexadecimal Colors

In modern browsers (version 3 and above), RGB triplets can be abbreviated if each of the R, G, and B hex pairs are the same. So instead of this:

 .dark-yellow {color:#ffcc00} 

Do this:

 .dark-yellow {color:#fc0} 

The browser automatically expands three-character colors into six by replicating the R, G, and B values. You can use this shorthand hex notation to shrink your CSS.

Shorthand Hex Notation

All browsers that support style sheets support this three-character form of hexadecimal colors ( #rgb ), with the exception of buggy behavior in IE3 Mac.

For more information, see http://style.webreview.com.

Named Colors

Hexadecimal values are unambiguous and can use fewer characters than their named equivalents, although some named colors use less than their hex equivalents. The 16 named colors are shown in Table 7.1.

Table 7.1. Named Color Equivalents

Color	Hex Pair	Short Hex	Color	Hex Pair	Short Hex
Aqua	#00ffff	#0ff	Navy	#000080
Black	#000000	#000	Olive	#808000
Blue	#0000ff	#00f	Purple	#800080
Fuchsia	#ff00ff	#f0f	Red	#ff0000	#f00
Gray	#808080		Silver	#c0c0c0
Green	#008000		Teal	#008080
Lime	#00ff00	#0f0	White	#ffffff	#fff
Maroon	#800000		Yellow	#ffff00	#ff0

Use shorthand hex colors wherever possible, unless the named equivalent is shorter ( red , for example). Some named equivalents are shorter than their seven-character hex equivalents ( silver , gray , maroon , purple , olive , navy , and teal ).

Web-Safe Colors

The so-called web-safe color cube is made up of 216 colors that supposedly display identically on different platforms, without any color shifting or dithering. Most of the time they do. Web-safe colors happen to be expressed in multiples of 20% and 51 for RGB values, and 33 in hex. So to create a web-safe color, use any combination of 00 , 33 , 66 , 99 , cc , and ff . These values can be abbreviated to shorthand hex values of , 3 , 6 , 9 , c , and f . This means that #fc3 , #c6c , #960 , and #f00 are all web-safe colors.

For site redesigns, try to use web-safe colors or at least colors that can be abbreviated wherever possible. Finding the closest web-safe color to the one you want is a great way to save space in your pages. In addition to the benefit of not dithering, they offer you the added advantage of shorthand equivalents. For more details, see the CSS specification (http://www.w3.org/TR/REC-CSS2/).