Performance differences between color declarations?

user_398242 0
Viewed 7925

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.

css performance
6 Answers

I used the same tool from jsperf.com that the others did, and created my own test for different color formats. I then ran the test on IE11, Edge17, FF64 and Chrome71 and gathered all results in a compact excel spreadsheet.

Top three are green, bottom three are red, best and worst are bold.

I don't know why Chrome is so prone to named colors format, but it made me repeat the test many times with the same and different parameters. Results remain constant.

You cannot get conclusive results of any one format being the absolute best, but my conclusion is as follows.

I will keep using hex over named, lowercase over uppercase and start using short over long hex when possible.

Feel free to update results if they change with new versions of browsers.

user_95834800
Related