CSS Colors

CSS Colors


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.

Check out http://css-colors.techstream.org

So that was a colorful evening have a good time.


Wow ! you have someting to tell us. That's great! Please keep in mind that comments are moderated, we employ rel="nofollow" for links, avoid using a spammy word or a domain in name field, it might end up as a Spam. Thanks for reading.

Last 5 Articles

All Articles >

  1. URL Shortener in Django

  2. MySQL as Database Option

  3. Data Protection Laws Around the World

  4. NodeJS Overview

  5. Server Side Render ReactJS Application


News Letter

Subscribe to our email newsletter for useful tips and valuable resources, sent out every new article release.