Create a color scale with css using a range

Question

I have a numeric range that goes from 0 to 311 to 351, is there a way in css to make a scale that moves with it, starting red, transitioning to yellow on the 311 and then from yellow to green on 311 to 351?

I need a given color at a given point on the scale, not the full scale; so what I'm wondering is can I make a color in css that is some % red, some % yellow, some % green?

Answer 1

You can do this using a linear-gradient - 311/351 * 100 = 88.6%, so the gradient will be from red 0% to yellow 88.6% to green at 100%:

.scale {
  height: 50px;
  background: linear-gradient(to right, red 0%, yellow 88.6%, green 100%);
}

<div class="scale"></div>