Hey All,

I wrote a simple console application that calculates ramps through interpolation between two colors.

Here is an example:


What I did was define two colors
[26, 27, 34] & [156, 190, 252]

and asked for 5 colors. The output are the start color, end color, and 3 colors in between that combine for a color ramp.

Below I used the colors on the outside as my start/stop colors and generated the colors in between. As you can see, circular ramps are a lot easier to create.


Here is the Source

and the Release

Edit: * .NET 3.5 framework required

Edited by shampoop - 29 September 2011 at 3:46pm

You generally don't want to do colour ramp interpolation in RGB, as for example at the halfway point between blue (0,0,255) and yellow (255,255,0) you will get grey (127,127,127) rather than the desired green (0,255,0).
A hue-based colour-space such as HSL solves this problem.

Here's a few basic things I've noticed about the relationship between RGB and HSB.

RGB / HSB

255, 0, 0 = 0, 100, 100
255, 255, 0 = 60, 100, 100
0, 255, 0 = 120, 100, 100
0, 255, 255 = 180, 100, 100
0, 0, 255 = 240, 100, 100
255, 0, 255 = 300, 100, 100

With RGB values maxed for red, yellow, green, etc., the HSB values are always 100% saturation and value while the hue increases by increments of 60 around the color wheel.

Now if you cut the numbers in half in all of that for RGB , using 128 instead of 255 in each case, then it's the exact same results as above in HSB except the value is cut in half from 100% to 50%.

128, 0, 0 = 0, 100, 50
128, 128, 0 = 60, 100, 50
0, 128, 0 = 120, 100, 50
0, 128, 128 = 180, 100, 50
0, 0, 128 = 240, 100, 50
128, 0, 128 = 300, 100, 50

Saturation is slightly more complicated. Take all of the zeros in the first list above and replace it with half of the other number, which in this case will be 128.

255, 128, 128 = 0, 50, 100
255, 255, 128 = 60, 50, 100
128, 255, 128 = 120, 50, 100
128, 255, 255 = 180, 50, 100
128, 128, 255 = 240, 50, 100
255, 128, 255 = 300, 50, 100

It's exactly the same as the first list, it just has the saturation reduced by half each time because the other channels were filled with what would otherwise be grey if the one or two channels with 255 in them had been equal to those.

Here's a combination of reducing both the saturation and values by half.

128, 64, 64 = 0, 50, 50
128, 128, 64 = 60, 50, 50
64, 128, 64 = 120, 50, 50
64, 128, 128 = 180, 50, 50
64, 64, 128 = 240, 50, 50
128, 64, 128 = 300, 50, 50

Because the high numbers are cut in half the value is down to 50%, and because the other channels have half of the high number in them the saturation is also cut in half.

Now let's look at some different hues.

255, 128, 0 = 30, 100, 100
128, 255, 0 = 90, 100, 100
0, 255, 128 = 150, 100, 100
0, 128, 255 = 210, 100, 100
128, 0, 255 = 270, 100, 100
255, 0, 127 = 330, 100, 100

Using the first one as an example- If 255, 0, 0 had a hue of 0°, and 255, 255, 0 had one of 60°, then only putting 128 into the green channel should only get us halfway to 60° because it's half of 255, so it comes out as a hue of 30°.

Notice that the last one in the list had a 127 in it instead of 128. I put that there on purpose to show that there's colors in RGB that don't exist in HSB, which actually has far fewer total possible colors (3,682,561 vs 16,777,216). It doesn't matter if you have a 127 or 128 in that last row, because they both convert into the same HSB numbers. I think it applies to many other cases of 127/128 throughout these lists, but I haven't tested them all to see if it's all of them or just some.




Edited by tanuki - 29 September 2011 at 11:58pm

Thanks for the help!

I had the same idea yrizoud, convert rgb to hsl with range 0.0 - 1.0, interpolate, and convert back to rgb. I used the conversions found here and finished the implementation.

Strange though, when going from blue (0,0,255) to yellow (255,255,0), I got green (0, 255, 128).

Here are the differences from the example from my first post:

[26, 27, 34] & [156, 190, 252]
(top is rgb interpolation, bottom is hsl interpolation)



The hsl ramp is way better IMO.

here is the program to generate color ramps based on HSL interpolation:

HSLInterpolation.zip

this is interesting! thanks for sharing :)

Yes, this tool is limited. Take the following example:



As you can see, the interpolation will not "wrap around." Instead, it interpolates across the whole HSL space.

Also, straight interpolation leads to bland ramps. Adding some kind of variant or third space is something I will explore. Something like this:



Anyway, the tool is a good way to mock up some quick ramps as long as the start and end color are somewhat close. Also cyclic ramps are easy to generate by having the next start color be the last end color.