Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to calculate gradient color by percent

I have a float score, which is 0 to 1

I need translate this score to color,

0 is green

1 is red

0.5 should at the middle of green to red gradient color

and so on

how to write this? I have no idea.

like image 620
guilin 桂林 Avatar asked Apr 25 '12 03:04

guilin 桂林


People also ask

How do I make a percentage gradient in CSS?

The to bottom direction tells you that your gradient is going from top to bottom. So if the first color is 85%, that means that it goes down to 85% of the height of the container. By inverting the percentage (85% -> 15%), you can achieve the result you want. That did the trick!

What is percentage in linear gradient?

The linear-gradient syntax is equivalent to placing colour stops as: white 50%, yellow 75% and red 100% as the stops without percentage or distance values will spread out equally to fill the remaining space.

What is an example of the color gradient?

Gradients can blend or transition similar colors (so, for example, different shades of blue or a light orange to a dark red) or completely different or contrasting colors (like purple and red or blue and yellow).


2 Answers

let gradient colour parameter be t, 0.0 =< t =< 1.0

colour = RGB(255 * t, 255 * (1 - t), 0)
like image 73
Mitch Wheat Avatar answered Oct 02 '22 11:10

Mitch Wheat


Multiply the float by 255 to get your green value, and multiply (1-float) by 255 to get your red value. If you need to output a css color code, use rgb(x,y,z).

like image 26
gcochard Avatar answered Oct 02 '22 10:10

gcochard