Mobile app version of vmapp.org
Login or Join
Annie732

: 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

@Annie732

Posted in: #Gradient

I have a small table of values like this:

Food Count Color
Pumpkin 345 #DB3236
Cabbage 193 ?
Pepper 89 ?
Beetroot 96 ?
Potato 62 ?
Lettuce 35 ?
Carrot 26 ?
Tomato 25 ?
Banana 22 ?
Apple 22 #FADBDB


I want to calculate a color gradient between #DB3236 and #FADBDB based on the COUNT values.

For example "Pumpkin" = 345 and has the strongest color, and "Apple" = 22 which is the weakest color. Even though "Potato" is in the middle of my table it only has a Count value of 62 which means it will be quite weak on the color gradient scale.

I'm not great with numbers so I'm really struggling how to figure this out.

How do I create the color gradient for the other foods on my table?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Annie732

2 Comments

Sorted by latest first Latest Oldest Best

 

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

10% popularity 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

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme