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

html css performance

13,887

Solution 1

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>

Solution 2

You will be unable to measure any difference in the three options on any non-trivial web page.

The cost of downloading and parsing a few more or a few less bytes is tiny compared to the cost of downloading, parsing and rendering the the page.

The performance measurements provided by @Vinny support that.

The only reason im asking this is literally everything on a website has varying colours

If you can optimize your CSS so as to not specify the color in many different places (use inherited properties where you can), that is likely to have a larger impact on overall performance (less CSS to download and parse).

Solution 3

red is the easiest to parse, but will require a lookup in to table to get the actual value to be used.

#ff0000 is the next easiest to parse, requires 3 Text -> Int conversions to get the actual value.

rgb(255,0,0) is the most difficult to parse, and still requires the 3 Text -> Int conversions to get the actual value.

The second is likely the fastest overall since the red method (likely) requires a hashing operation (another Text -> Int conversion, just not what we normally think about), and then the lookup. Also the red token can be arbitrarily long compared to #ff0000.

I won't comment on the micro-optimization aspect or its wisdom.

13,887

Author by

JimmyBanks

Hey

Updated on June 18, 2022

Comments

JimmyBanks almost 2 years
Is there a difference in the speed a browser can parse a colour?

for example, the colour red, i could use the following css:
```
.red
{
    color:red;
    color:#ff0000;
    color:rgb(255,0,0);
}
```
these all produce the same result, text colour red, but in the sense of efficiency, what is the best to go with?

I realize that using the text 'red', is the lowest character count, and for minimalizing the document size that would be the best to choose, is that what should determine the choice?

The only reason im asking this is literally everything on a website has varying colours, so if there is a small change that could add to a few miliseconds, it could possibly be worth using the best method.
JimmyBanks almost 12 years

hmm yes this was the info i was looking for, makes sense
Jukka K. Korpela almost 12 years

The analysis does not really answer the question whether there is a difference in speed.
Eric J. almost 9 years

I absolutely did not believe this... until I ran it. The performance gap was even larger in my environment. Note that for some reason the time is not being inserted into the DOM. I added an alert to display the time. Are you aware of similar performance counters in other browsers? It's hard to imagine that it takes around 25ms to convert "green" and "white" to an integer representing the RGB value compared to converting the #rrggbb encoding.
Remco almost 7 years

"#ff0000 […] requires 3 Text -> Int conversions". No, a single 24 bit conversion is enough, and puts your data in a common internal format. Also hexadecimal conversions can be done faster than decimal ones, but this depends on the amount of micro-optimization.
Noch_ein_Kamel almost 7 years

Unless you try to be a good browser and check for #fff notation
Saint48198 almost 7 years

Never use the color names. It might be easier to remember and in this case easier to type, but the performance for the browser is much worse.
John Stimac almost 7 years

I'm very skeptical of using this result to make decisions. 10 tests per case is not sufficient to draw a statistically significant conclusion, and the method of doing one way first, then the other seems very prone to introducing other variations into the experiment. Perhaps when the first 10 were tested, windows was running a taxing process in the background? Or, perhaps the standard deviation of this performance metric is 200ms, and the averages just happened to come out this way. I think more information is needed to consider this a valid conclusion.