Fun with Colour Difference
Are you looking for a nifty way to choose colours that stand out? Are you the type of person who is not satisfied until you have mathematically proven that your choice is optimal?
One way to do it is to treat red, green, and blue colour values as coordinates in a cube. Two colours are different if the distance between their coordinates is large. But the RGB colour space is not perceptually uniform. Because of the way the human eye works, lots of greens look the same, but we can easily see the difference between subtle shades of yellow. That's why George Takei is hawking TVs. It's also why perceptually uniform colour spaces, such as LAB or LUV warp the cube, as if it were made of play-dough, and left out in the sun for a while. The result is that the differences between the coordinates almost correspond to the perceived difference between two colours for most people.
Below are all of the CSS colours which have names commonly recognized by most browsers. Every colour name from "AliceBlue" to "Gainsboro" to "YellowGreen" is there. The circles float freely, and are repelled by each other and the four sides of their container.
When you click on a colour, the background changes to that colour. All of the circles are then attracted to a vertical position based on how different they are from the background. Those near the top are close to the background colour. Those near the bottom are further away from the background. You can change the colour space in which the distance is calculated by clicking on band at the top of the container.
For HSV, the H parameter is divided by 360 before the distance is calculated, to make its influence fair, since the S and V values range from 0 to 1.
ObservationsIn RGB, black is the most different from white. But in LAB, black is in the middle somewhere, and other dark colours are more distant.
To my eye, both RGB and LAB perform well for finding differences, but HSV results in some odd choices. To choose a contrasting colour, use RGB or LAB and avoid picking anything less than a third of the way down.
The source code is released to the public domain.
- Colours.js - A simple library for converting between text, RGB, HSV, and LAB colours.
- driver.js - Does the force calculations based on this wikipedia article, and handles mouse clicks.
Other articles from my blog
Oh, and thanks by the way, nice little toy.
I found the same bug as Josh, where in "convert_XYZA_RGBA" function you are referencing fields X, Y and Z where you should be using array elements. Please fix!
Other than that, nice work :-)
In fact, since I can't identify many of these colors, it would be nice to show the RGB/HSV/LAB values when you mouseover.
Our eyes are much more sensitive to V than to H or S so it would make sense wouldn't it?
The distance between hues 0.1 and 0.9 is 0.2 because hue wraps around, but your code calculates it to be 0.8.
Only seems to use quite much CPU power (irrelevant, I just wondered why my laptop fan was speeding up).