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