Which CSS Color System To Use Where

After the response to “What CSS Measurement Systems To Use When”, I thought it might be useful to have an article on another frequently confused aspect of web development.

CSS color systems are relatively simple compared to measurements (at least until the CSS Color Module Level 4 becomes standardized). This simplicity causes many web developers to stick with to old habits, rather than considering alternatives. In reality, traditional web color systems have some significant drawbacks, limiting designs and making your site more complex to maintain and modify.

As before, what follows is a list of suggestions, not absolute rules. Differing opinions and working practices are very welcome in the comments section.

keyword

Use for: Basic “test pattern” fills. Any use of keywords in CSS should be replaced by other color systems during development.

Why? Extremely limited palette; keywords are difficult to remember, easy to misspell and often misleading (darkgrey is actually lighter than grey, for example); color in keywords can’t be altered with any kind of precision or provided with transparency.

hexadecimal

Use for: HTML prototypes. Ideally, replaced with other color systems during development.

Why? Difficult to adjust accurately and hard for designers to understand; can’t be given transparency. All too easy to create primary colors, including pure black and white, which should be avoided in design.

rgb(a)

Use for: shadows

Why? Provides finely-graduated control over shadow color and transparency. IE8 and earlier do not understand rgba, but neither do they support box-shadow or text-shadow, so progressive enhancement principles apply (assuming contrast ratio rules have been followed for content).

hsl(a)

Use for: everything else.

Why? Provides a color system understandable to designers; very easy to make fine adjustments in response to common requests (“a little darker / lighter / less intense / closer to (hue)”). Color theory principles are easy to follow; other advantages beyond the scope of this article.

Avoid if: IE8 support is important. Alternatively, precede any use of hsl with the equivalent in hex for older browsers, or use a polyfill.

Possible exceptions to these rules include the use of CSS pre-processors such as Sass to generate color variations, although this approach will be threatened over time by features already in hsl combined with native support of CSS variables and the aforementioned CSS color module.

Photograph by Andreas Levers, licensed under Creative Commons.