It was a fine day indeed, In my life I never heard any story that didn’t happen on a fine day :D.

It has been a year since I made CSS Cursors a show case of different cursor properties supported in CSS. I had thought to build another showcase on the code I made for it. So CSS colors it is, CSS colors contains human readable name you can use instead of a fancy code.

I have to agree this was a quick project, start to end in under 4 hours. That is reasonable as I didn’t have to write much code, fork CSS Cursors and replace the array with new value was all I had to do. And that’s what I did, it works. what went wrong ? Not the old code, not the new code, its was the order how colors were displayed. Initial plan was to sort them alphabetic order, which is a good order but not so good when you look at the color.

Here’s how my friend Nikhil makes the entry, he helped in sorting the color in accordance with the hex value #ffffff->#000000 it worked pretty well, but it still lacked the order. Then he marked up a formula to get them sorted in accordance with their hue value. He made up a formula to sort CSS Colors with hue value. (XLS file)

Now we ended with three set of order and some findings

  • CSS Color names were formed without any order.
  • A color when represented in RGB, combinations of its different values like hue, saturation etc forms a 3D space of colors. When mapped in to 2D space, it breaks the continuity and brings distortion.
  • Since we had 3 sets of orders, I thought to show the three sets with an option for you to choose how you want to see.

css colors

Check out

So that was a colorful evening have a good time.