One of the two oldest methods of applying color to web pages, named colors remain very useful in web design and development today. Consisting of 149 distinct keywords (shown above, with their hexadecimal equivalents) CSS named colors have a few special features:
First, color keywords are used in the same way in CSS as every other color system; for example, to set the background color of the body element in a linked, scoped or embedded style sheet:
body {
background-color: tomato;
}- Looking at the named color range above, you’ll observe that English and American spellings for “gray” and “grey” are covered, and render the same shade. However, Internet Explorer has issues with the latter keyword, rendering it as green; you should always use the “gray” spelling for this reason.
transparentis a special keyword. Technically, it does not resolve to a hexadecimal color but to an RGB value with0alpha: specifically,rgb(0, 0, 0, 0).transparentis valid wherever any color can be used, but is most frequently associated with gradients and borders. In the list above I’ve provided thetransparentkeyword with its eight-digit hex equivalent value for consistency.rebeccapurpleis the most recent addition to the CSS keyword range. It is named after the favorite color of Rebecca Meyer; her father, Eric Meyer, is a beloved contributor to CSS standards and knowledge. Rebecca's death at the age of six was a blow felt throughout the community.rebeccapurplewas added to the specification in her honour, and is supported in all recent browser versions.
Potential Drawbacks
Keywords have a few potential drawbacks you should be aware of:
- Limited color selection. The keywords provided are the only named options available in CSS.
- They’re unadjustable. Unlike HSL, RGB, or even hexadecimal options, color keywords can’t be made lighter or darker in CSS.
- Color names can be difficult to recall.
black,whiteandredare easy to remember;darkgoldenrod, not so much. - They’re not always logical. You may notice that
darkgrayis actually lighter thangray, due to a historical anachronism; similarly,darkslategreyis more green than gray. - Mispellings can give unexpected results. Browsers attempt to translate unknown keywords into hexadecimal, meaning that misspelled words can generate unexpected colors. Random words can generate colors too:
<body bgcolor="chucknorris">, for example, produces a red.
As a result of these drawbacks, I tend to use color keywords when prototyping, but switch to HSL as I refine the design.
There are some solutions to these issues:
- Sass allows you to make your own color keywords; I made my own color system (“The New Defaults”) with more natural, easier-to-remember names for that reason.
- It’s also possible to lighten and darken any color (including keywords) in Sass.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/XKVRoJ
