Are there any cons to using color names in place of color codes in CSS?

0 votes
asked Jul 12, 2010 by jitendra-vyas

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.

10 Answers

0 votes
answered Jan 12, 2010 by jonathan

I think color names are more descriptive... And this is a good reason for using it when possible.

0 votes
answered Jan 12, 2010 by cp3

in my opinion it's a matter of preference. if the color is as simple as red, black, grey, blue, white etc. ill use the word instead of the hex.

0 votes
answered Jan 12, 2010 by paul-d-waite

Personally, I prefer all colours in a CSS file to be defined in the same way, if possible.

That way I don’t have to think in a different way when I see different colours defined (e.g. red, #cd876f and rgba(255,255,0,0.4)).

I also prefer colour notations that match what I’ll see when identifying the colour in the design I’m implementing. Photoshop’s colour palette gives RGB and hex values, amongst others, but doesn’t give CSS colour names. (Other design tools might do though.)

0 votes
answered Jul 12, 2010 by pointy

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.

0 votes
answered Jul 12, 2010 by stephen

I prefer a further optimization, #c00 for red. If you are going to use a primary color, or any color that is similar to #aabbcc, you can use shorthand, #abc.

0 votes
answered Jul 12, 2010 by derekerdmann

It really comes down to your coding style. I stick to hex values for consistency - a color is always formatted as #000 or #000000, and I don't have to worry about switching between namd and unnamed colors.

In the end, it's a decision you and your team will have to make on your own. It's all about your preferences.

0 votes
answered Jul 12, 2010 by pixeltocode

personally, i prefer using hexcodes because of 2 reasons

  1. it's easier to copy a hexcode from Photoshop
  2. 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).

0 votes
answered Jul 19, 2011 by liyali

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.

0 votes
answered Jul 10, 2014 by james

I use color names for prototyping, debugging, and to set up really basic, monochromatic color schemes which are then ripe for theming with hyper-specific hex colors. It makes a theme-able property easy to spot. It's also more human readable; less brain strain when trying to instantly visualize what's going on.

.component {
    background-color: black;
    color: white;
}

...then in theming file...

.some-theme .component {
    background-color: #5f5f5c;
    color: #fafafc;
}
0 votes
answered Sep 15, 2017 by kslstn

The previous answers look outdated by now.

When you support browser that CSS3, which is all 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:

  • Some of the color names are just bad. 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'd 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

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...