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

Question

I just wanted to know if it's faster to use hex color codes or the color names when I want to use it in CSS?

Magnificence

pick the lowest hanging fruit. seriously, you should optimize pretty much everything else before this becomes an issue. – Chronicles

yeah I know I should optimize everything else. it was just a want-to-know thingy at the back of my head. – Magnificence

This is an interesting question more from a browser design standpoint, than from a web-optimizing standpoint. – Glaser

Answer 1

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

Microfilm

yes that was my guess, and yes I know it doesn't make much of a difference but I just wanted to be sure. – Magnificence

Here's a revision of that test, comparing short hex codes (#FFF), long hex codes (#FFFFFF), rgb, rgba, and color codes. – Ratline

Answer 2

I'll go against popular consensus and suggest that it's possible that the color names are faster, if the look-up table returns the color value as an integer. That would mean that when using a named color the browser does not have to manually parse from a string containing hex characters to the corresponding integer, all it needs to do is an O(1) hash look-up. And that may well be slightly faster than parsing from string to integer.

Though as others have rightly noted, in all practical terms the difference between the two will be infinitesimally small. Not something you would ever notice in practice.

Milesmilesian

hmmm, interesting point. your answer shows that even in the most unimportant and smallest of matters there could be so much to disagree upon. – Magnificence

I hadn't thought of that. I'll bet some browsers do exactly what you say--and others don't. And this brings up the other question: Is the name-lookup faster than a 3-digit hex conversion, too, or only faster than the 6-digit hex colors?! Hmmmm! – Glaser

Answer 3

Faster in terms of rendering?

In practical terms, there's no possible way it will ever make any difference.

In technical terms, that depends on how the CSS rendering is implemented in each browser. If I had to make a guess, I'd imagine that using hex is about 3 CPU cycles (an exaggeration) faster in most browsers, since the name has to be converted to hex first.

But the time it took you to ask the question represents more time than has been wasted by all browsers in the world doing this conversion since the Internet was invented.

Glaser

In principal I agree with you but the "3 cpu cycles" claim seems pretty ill thought out... to convert a name to its numeric equivalent you need to find its entry in a lookup table of n entries which will take, on average, (log n)/2 attempts; each attempt would take considerably more than 3 CPU cycles to find the actual entry and then perform the string comparison. That being said, even if the conversion takes 30000 cpu cycles longer the user is not going to see any difference. – Providenciaprovident

Sorry, I meant to add a side-note to my "3 CPU cycles" figure, but I forgot. I realize it's an exaggeration. I have updated the answer :) – Glaser

I don't know anything about browser internals but a very simple hash with O(1) seems to be better for this task. – Chronicles