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

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).

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

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.

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;
}

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.

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.)

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

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.

I believe that using hex codes is more useful than color names because let's say if you want use red color and you use "red" for color value, but you don't like that predefined red color, you want something lighter or darker so hex codes are really Good for that.

Once you have your own red color of choice, you will remember that hex code everytime you want to use it rather than using the color name.