Shorthand hex notation abbreviates 6-character RRGGBB CSS colors into 3-character RGB shorthand. Combined with shorthand properties and grouping, shorthand hexadecimal colors can shrink style sheets dramatically, often by 50%. There are five ways to specify colors in CSS; four use numeric RGB values and one uses named colors. The two most efficient ways are hexadecimal and named colors. Hexadecimal colors come in two flavors: RGB triplets and shorthand. So instead of this: Do this: Hexadecimal values are base-16, so they are usually shorter than base-10 numbers. To specify 0 to 255 in hex, you'd use Nearly all browsers (version 3 and above, except IE3 Mac) support shorthand hex colors. RGB triplets can be abbreviated if each of the Red, Green, and Blue hex pairs are the same. So when you use colors where there are three pairs, you can abbreviate each color channel using one character instead of two identical characters. So this: Becomes this: Browsers automatically expand these three-character colors into six by replicating the R, G, and B values. This technique saves a few bytes for each color abbreviated with shorthand hex notation. In most cases using shorthand hex colors is the most efficient way to specify colors. However in some cases named colors are shorter than their hex equivalents. The 16 named colors supported by the HTML and XHTML specifications are shown in Table 1. Use shorthand hex colors wherever possible, unless the named equivalent is shorter ( The so-called web-safe color cube consists of the 216 colors common to both PC and Mac platforms that display identically and don't exhibit any color shift or dithering. Most of the time, they do. Web-safe colors are expressed in multiples of 20% and 51 for RGB values, and Shorthand hex notation substitutes 3-character color values for 6-character colors when each of the color channels is identical in an RRGGBB hex triplet. Shorthand hex colors save three bytes for each color abbreviated. When combined with shorthand properties, grouping, descendant, and high-level type selectors shorthand hex colors can help optimize your style sheets to their minimum size.Colors in CSS
.orange {color:#ff6600;}
.orange {color:#f60;}
Hexadecimal Colors
00
to ff
, saving a byte for higher colors.Shorthand Hexadecimal Colors
.dark-yellow {color:#ffcc00;}
.dark-yellow {color:#fc0;}
Named Colors
Table 1: Named Color Equivalents
Color Hex Pair Short Hex Aqua #00ffff #0ff Black #000000 #000 Blue #0000ff #00f Fuchsia #ff00ff #f0f Gray #808080 Green #008000 Lime #00ff00 #0f0 Maroon #800000 Navy #000080 Olive #808000 Purple #800080 Red #ff0000 #f00 Silver #c0c0c0 Teal #008080 White #ffffff #fff Yellow #ffff00 #ff0 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
33
in hex. So to create a web-safe color, use any combination of 00
, 33
, 66
, 99
, cc
, and ff
. Web-safe colors can always be abbreviated using shorthand hex notation.Conclusion
Further Reading
By website optimization on 14 Jun 2004 AM