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/).


Speed Up Your Site[c] Web Site Optimization
Speed Up Your Site[c] Web Site Optimization
ISBN: 596515081
Year: 2005
Pages: 135

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net