Are there any cons to using color names in place of color codes in CSS?
For example writing red is more efficient than #cc0000. It has less characters, takes up less space, and is easier to remember.
Are there any down sides to using color names over hex codes or RGB values? This includes programming in a multi-developer environment.
Different browsers may not agree on what some color names mean. There are not names for all 16 million 24-bit colors. In fact there are only 17 W3C-standard color names. It's probably OK to use those.
Personally I use a templating system at build time to pre-process my CSS files, so that I can keep a standard set of site colors and refer to them by name. That way I get the best of both worlds: I know exactly what my RGB color values are, but I can use simpler names in the CSS.
(Of course, it's still not possible to know exactly how a color will look on a given user's browser.)
edit — in the 5 years since this answer was written, preprocessors like Less and Sass have become pretty common. Those provide some very sophisticated tools for managing colors (and many other things) in CSS sources.
I recommend that you follow the W3C recommendations:
All of them (CSS Level 1, Level 2 and Level 3) indicate that using color names is perfectly acceptable, but which ones are acceptible varies depending on the specification.
CSS1 Specification
CSS1 Specification recommends to use color names as a valid substitute to hex codes and RGB codes.
6.3 Color units
The suggested list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette, and their RGB values are not defined in this specification.
CSS2 Specification
You can use the color name orange now! The count is up to 17 colors. CSS2 Specification for reference.
CSS3 & X11 Colors
CSS3 allows for SVG 1.0's X11 colors to be used for CSS's properties (as well as hsl() values). This expands the amount of color names to 147 colors. Any of these color names can be used in any browser that supports the SVG 1.0 specification, which is IE9 or newer.
This also means that the list of colors provided in the question are mostly not valid.
Suggested Usage
If you're seeking to support legacy browsers stick to the web safe original 16 color names since X11 colors are not supported. Otherwise, you are free to use any of the 147 color names specified in the X11 spec.
All browsers should abide by the specification in reference to the equivalent hex codes. The time it takes the parser to read the color names is virtually, if not exactly, the same as using a hex value, an rgb value, or an hsl() value.
To me, it's more readable to write your HEX codes in lowercase. For example, #8b88b6 is obviously more readable than #8B88B6. Also, I tend to use shorthand HEX color instead of full code (#666 instead of #666666) since it's more efficient.
personally, i prefer using hexcodes because of 2 reasons
- it's easier to copy a hexcode from Photoshop
- you can use hexcodes throughout a stylesheet but you'll have to mix two styles (hexcodes and color names) otherwise. so your stylesheet can be more uniform/consistent.
This assumes you're using colors other that the simple red, black, white etc. In a multi-developer environment, i'd say hexcodes are better because they're more universally consistent (every developer knows exactly what the color is).
The previous answers look outdated by now.
If you develop for browsers that support CSS3, which are all major browsers since IE9, you can use color names in CSS. In HTML, only the 16 original web colors are supported.
The question was if there are downsides. I think there are a few:
- I find some of the color names are just wrong. Examples:
- Azure is generally considered a much darker color.
- Lawn green is nothing like a lawn I've ever seen.
- Violet looks more like what I'd call pink.
- It is more difficult to create a slightly darker or lighter version of the color by changing its hex values. For instance, a darker variant of #DCDCDC would be #DADADA, but if I would have started with the color name gainsboro, I wouldn't have any idea.
- Javascript calculations are more difficult on a name.
Sources: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value and http://caniuse.com/#search=css3%20colors