CSS: Use Shorthand Hex Colors

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%.

Colors in CSS

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:

.orange {color:#ff6600;}

Do this:

.orange {color:#f60;}

Hexadecimal Colors

Hexadecimal values are base-16, so they are usually shorter than base-10 numbers. To specify 0 to 255 in hex, you'd use 00 to ff, saving a byte for higher colors.

Shorthand Hexadecimal Colors

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:

.dark-yellow {color:#ffcc00;}

Becomes this:

.dark-yellow {color:#fc0;}

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.

Named Colors

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 (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 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 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

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.

Further Reading

CSS Home Page

From the W3C

CSS Optimization

Summary of chapter on optimizing CSS from Speed Up Your Site: Web Site Optimization.

Cascading Style Sheets, level 2 CSS2 Specification

The CSS specification, from the W3C. By Bert Bos et al.

CSS Support Charts

Eric Meyer. The master CSS reference grid.

Cascading Style Sheets: The Definitive Guide, 2d ed

Newly updated for CSS 2.1, the second edition of this classic book explains how CSS works like no other. CSS, CSS1, CSS2.1 are covered with clear examples and code snippets. Shorthand properties and colors, grouping, and positioning can help you prune both your CSS and XHTML markup. This book is an indispensable reference for web authors. By Eric Meyer (companion site).

CSS: Use Descendant Selectors

Descendant selectors are an elegant way to apply styles to specific areas of your page while reducing the need to embed classes within elements. From Speed Tweak of the Week.

CSS: Group Selectors and Declarations

By grouping CSS selectors that share the same declaration and declarations that share the same selector you can apply multiple declarations to multiple selectors to optimize your style sheets. From Speed Tweak of the Week.

CSS: Use Shorthand Properties

Shorthand properties group related rules into one shorthand notation. Shorthand properties are an effective way to shrink your style sheets. From Speed Tweak of the Week.

CSS: Use Type Selectors

High-level type selectors style identical elements in your document without the need for extra classes. From Speed Tweak of the Week.

By website optimization on 14 Jun 2004 AM