Which One Is Faster: Hex Color Codes or Color Names

which one is faster: hex color codes or color names?

My guess is the codes will be faster since the names are probably assigned to a look-up table and reference hex codes anyway.

That being said, my guess is the speed difference will be completely negligible.

Here's a performance test I just created. They're neck and neck, though hex codes seems to be just barely faster on 4/5 runs so far:
http://jsperf.com/css-color-names-vs-hex-codes

Are there any performance differences between color names or hexa values in css?

Putting away the color names, the hex values and RGB are pretty much the same.

But the result shows that Hex codes are slightly faster (not that much to worry about).

For example, Firefox 11 does 15,400 operations of hex code but 14,900 of rgb in a second.

So, that is not much to worry about. You won't even notice that.

Performance differences between color declarations?

If we assume a modern browser making full use of the GPU then the internal color representation will be RGB floats. Ignoring the color name - which is probably just a map to hex anyway - I think that hex and channels will be the fastest. HSB will undoubtedly be the slowest, as the conversion from HSB to RGB does require some work - about 50 lines of C code.

However, I think that for the purpose of CSS, this is a completely irrelevant question. Even for HSB to RGB the amount of work on one color will be totally trivial. By way of support for this, I have several programs - including those running on mobiles - which do color manipulation at a per-pixel level on largish images where I am doing RGB->HSB->(some manipulation)->RGB. Even performing this operation 100,000 times on an ipad only results in a delay of a couple of seconds - so on this relatively slow platform, I think your typical worst case conversion can be safely assumed to take less then 0.0001 seconds. And that's being pessimistic.

So just use whatever is easiest to code.

ADDED: to support the don't worry about this option. Internally a GPU will manipulate colors as an array of floats, so in C terms

float color[4];

or something similar. So the only conversion being done for the numeric options is a simple divide by 255.

On the other hand conversion of HSB to RGB takes considerably longer - I'd estimate, from having written code to do it, about 10 to 20 operations. So in crude terms HSB is considerably slower, BUT 20 (or even 20,000) operations on a modern GPU isn't worth worrying about - it's imperceptible.

Efficiency of color selection in html. RGB vs hex vs name

I think it's safe to say that browsers will render pages faster if you use the #rrggbb color hashes in your CSS.

I made a super-trivial web page that put a background and foreground color on the body element via CSS, an a little JS at the bottom of the page on a timeout to output the first render time (unfortunately I used the performance.timing.msFirstPaint value, so it will only work in IE, but you can get the gist from this). I rendered the page ten times and took the average. Then I changed the color names ("green" and "white") in the CSS, changed them to hex values (#008000 and #fff) and repeated the measurements. Using names, the page rendered in an average of 41.6ms; using hex values: 14.5ms. Given how simple the test page is, with only two colors, I feel that's a pretty significant difference.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Color name test</title>

    <style>body{background-color:green;color:white;}</style>

</head>

<body>

    <h1 id="foo"></h1>

    <script>

        setTimeout(function ()

        {

            var start = performance.timing.domLoading;

            document.getElementById("foo").innerHtml = 

              performance.timing.msFirstPaint - start;

        }, 1000);

    </script>

</body>

</html>

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.

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

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.

Which is better, #fff or #FFF?

Neither;

color: white;

In all seriousness, tho', it doesn't matter so long as it matches the general design of your site. (For example, SO or FB should use #FFF, while, say, Apple would use #fff. Matches the rounded corners better, you see?)

Which One Is Faster: Hex Color Codes or Color Names