color interpolation

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.

For colors, Mike Bostock’s D3 offers interpolation in 3 different color spaces: RGB, HSL, and HCL.  Curious to understand the difference between these color spaces, I created a little script to visualize them.  link  Change the colors in the javascript on line 8 to a different pair & press “run” to compare different end points for the colors.

Which color scale do you think looks the most natural?  Shows a quantitative gradient from one side to the other?  

blue to orange

Screen Shot 2013-08-16 at 12.02.52 PM

Screen Shot 2013-08-16 at 12.05.15 PM

So, what are these color spaces anyway?  

From Wikipedia:

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 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.


One thought on “color interpolation

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s