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:
Hexadecimal values are base-16, so they are usually shorter than base-10 numbers. To specify 0 to 255 in hex, you’d use
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:
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.
|Color||Hex Pair||Short Hex|
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 (
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
ff. Web-safe colors can always be abbreviated using shorthand hex notation.
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.
- 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.