Performance differences between color declarations?

Question

In CSS we can use several different methods to define a color:

• Color word: red
• Hexadecimal: #FF0000
• Red/Green/Blue channels: rgb(255, 0, 0)
• Hue/saturation/lightness: hsl(0, 100%, 50%)

_{I do realize that using named colors is not a good idea, as different browsers have their own idea of what aquamarine looks like.}

Ignoring alpha channel and browser support, are there any differences performance-wise between these 4 methods?

If we were trying to squeeze every last bit of optimization out of our CSS, which one would be preferred, if any? Are the color values converted to a specific format internally, or does the performance of it depend on anything else (like which rendering agent or browser is used)?

Looking for a "technical" answer if possible, references appreciated.

Answer 1

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.

Answer 2

Here are the results including color names, short hex, hex, rgb, rgba, hsl, and hsla. You can run the test yourself here.