Are There Any Cons to Using Color Names in Place of Color Codes in CSS

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

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.

It is recommendable to type the color's name instead of its hex value in CSS?

I'll prefer the hex value since it is supported by all browsers and I can specify wide range of colors than the named colors.

Is there a performance difference between the different css color formats

From what I read in the article I linked below using HEX code is better but not by much we are talking if you have 100,000 colors in your code then it will create 1ms difference between them.

but you can visit this link to get a more meaning full understanding of why is doesn't make that much of a difference

and to see if it really makes a difference run an audit on your website and see the performance difference for each and see which one is better if any.
Link to answer

Where can I find a list of easy-to-type hex color codes for use in CSS?

The way I do it is to get the colors I want in a color picker, look at the hex values they generate, and then try to round to the nearest doubled pairs. So let’s assume I color-picked the following (and I typed these essentially at random, so only generate the actual colors at your own risk):

#82AC37
#B8AB29
#194645

In the first case, 82 is close to 88, AC is close to AA, and 37 is close to 33. So that one becomes #88AA33, or #8A3. Through similar means, I get #BA3 and #244.

If I find that pattern-rounding takes a color too far away from where it was, then I look for something with an easy-ish pattern, like (in the first case) #82AA33 or (in the second case) #B8A828. It becomes a bit of an art, really. And you definitely have to be comfortable with base-16, so that you can tell when it’s a better to round up versus down.

background-color: white - ok or should hexidecimal be used?

This is taken from the W3C specification. And it clearly tells that names are depreciated. Its only kept for legacy reasons.

Techniques:

Use numbers, not names, for colors.
Example.

Use numbers, not names, for colors:

   H1 {color: #808000}
   H1 {color: rgb(50%,50%,0%)}
Deprecated example.

 H1 {color: red}
Use these CSS properties to specify colors:

'color', for foreground text color.
'background-color', for background colors.
'border-color', 'outline-color' for border colors.
For link colors, refer to the :link, :visited, and :active pseudo-classes.

background-color problems in css

You should remove p tag inside a tag.

Here is an updated fiddle: fiddle link

Hope this helps!

Color names allowed in HTML/CSS

There are a plethora of colors listed at http://www.w3schools.com/HTML/html_colornames.asp. There's also a cautionary note at the bottom:

Note: The names above are not a part of the W3C web standard.

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want valid HTML or CSS use the HEX values instead.

---

Related Topics