It’s been a little while as I started playing with some real, but confidential, data. But, I’m back to talk about colors! This is also my first time playing with the scales functions from D3. Live code here.
numbers –> colors
My goal was to turn numbers into colors that were quantitatively meaningful. To do this, I used the scales functions from D3 – documentation & tutorial. These functions create a mapping from an input (domain) to a output range. Then, submit any value in the domain and the function will return the corresponding value in the range. This is massively useful for mapping data to # of pixels when plotting the data, without changing the underlying datasets (so you can still do mathematics operations on them, display the raw values, etc). As a bonus, it can also be used to find a mapping between numbers and colors, and to interpolate between two colors.
Which color scale do you think looks the most natural? Shows a quantitative gradient from one side to the other?
So, what are these color spaces anyway?
RGB uses additive color mixing, because it describes what kind of light needs to be emitted to produce a given color. Light is added together to create form from out of the darkness. RGB stores individual values for red, green and blue.RGBA is RGB with an additional channel, alpha, to indicate transparency.
HSL (hue, saturation, lightness/luminance), also known as HLS or HSI (hue, saturation, intensity) is quite similar to HSV, with “lightness” replacing “brightness”. The difference is that the brightness of a pure color is equal to the brightness of white, while the lightness of a pure color is equal to the lightness of a medium gray.
And from hclcolor.org: HCL is the least written about, at least as far as my Google searches go. But, it seems quite interesting. “HCL is an acronym for Hue, Chroma, Luminance. It is a color-space which lends itself to easy control of the visual impact that colors have on our perception” – link -.
Ross Ihaka: “There is a problem associated with choosing colours in the RGB or HSV spaces; the way that colours are spaced in these spaces is not in accordance with our perception of how similar or different the colours appear to be.”
And… “it is crucial to rely on the distance criterion which states that the distance D(c1, c2) between two colors c1 and c2 is correct if and only if the distance value is close to the difference perceived by the human eye.”
In other words, HCL attempts to align the distance in the color space metric to the perceived difference between two colors. The question is, do they do it? 🙂
Edit: this appears to be another color space.