: How do I calculate color gradients? I have a small table of values like this: Food Count Color Pumpkin 345 #DB3236 Cabbage 193 ? Pepper 89 ? Beetroot 96

@Harper654

I discovered this JavaScript fiddle which works great!

You input two RGB colors and choose how many color steps you want to output. It will then give you a list of colors along your given gradient: jsfiddle.net/002v98LL/
Copy the list of colors into Excel to figure out which color corresponds to which gradient step.

And you can use Google or some other tool if you need to convert between Hex and RGB codes.

Vote Up Vote Down

@Vandalay110

As commented color is not linear, nor countable, so from a strictly physical point of view it makes little sense to do this. However you can approximate color as being linear for your purpose. While this is potentially misleading you can do it, human senses aren't that precise when it comes to absolute color variation so no worries. This should explain why is may be a bad idea for example for infographics

Anyway there is a simple visual relationship in your data and what you want to do. Just plot the points next to a gradient in y direction with values in y.



Note that you have very little color variation at the bottom. If instead of showing spatial relationship i would only show swatches you wouldn't have much of anything to show for it. So I suggest more different colors in your gradient (which necessitates showing the scale).

Anyway linear is easy to calculate:

color = x*start_color + (x-1)*end_color


where x is (count-min)/(max-min)
#DB3236 is 219 50 54 in decimals and #FADBDB 250 219 219 in decimals


So for color the interpolant is simply

red = (count-22)/323 * 219 + (count-22)/323 * 250
green = (count-22)/323 * 50 + (count-22)/323 * 219
red = (count-22)/323 * 54 + (count-22)/323 * 219

Vote Up Vote Down