Getting A Color Range From Percentage-CodePudding

What I'm Attempting I am pulling from an API that gets a number between 1 and 32. I'm attempting to turn that return into a certain background color, ranging from green to red, for good to bad respectively. Basically, if the returning number is 32, the background turns bright red, while if it's 1, it returns bright green.

What I've Tried

Here's the Code currently.

function colorChange(x) {
    let y = x.substring(0, x.length - 2);    <<<----THIS IS TO TAKE THE NUMBER FROM 32ND TO JUST 32.
    let z = y / 2
    return "#"   z z z
}

 <div 
                    className="team-stat"
                    style={{backgroundColor: colorChange(teamStats.stats[1].splits[0].stat.pts)}}
                >
                    <h4>Points:</h4>
                    <h1>{teamStats.stats[0].splits[0].stat.pts}</h1>
                    <h3>Rank: {teamStats.stats[1].splits[0].stat.pts}</h3>
                </div>

Currently in the code I'm calling an API that results in a result from 1st to 32nd. I've already taken out the last two characters, so no th or nd are included. I managed to make it so it returns basically a hex code of #171717, but the current range goes from black to slightly-less-black. With the hex codes going into letters, I'm a little stumped on how to proceed. Any help is appreciated,and I'll happily clarify on any misunderstandings.

CodePudding user response：

Use HSLA model for the background color. Then change the first parameter (hue) based on your value from 1 to 32 multiplied by 3.75 (120/32)

Here's an example: https://codepen.io/akost/pen/ZEJWZVx

<script>
  let list='';
    for(let i = 1; i <= 32; i  ) {
    let h = i*3.75; // we need hue values from 0 to 120
    let row = `<div style='background:hsla(${h}, 100%, 50%, 1)'></div>`;
    list  = row;
  }
  document.getElementById('foo').innerHTML = list;
</script>
<style>
  #foo div {
  width:100px;
  height:10px;
  border-bottom:solid 1px #fff;  
  }
</style>

<div id="foo"></div>

CodePudding user response：

You could use rgb() for the background-color then scale the red and green values depending on the x value. Assuming 32 is the most green, something like:

function colorChange(x) {
    ...
    const maxPossibleScore = 32;
    const individualPointValue = 255 / maxPossibleScore;

    return {
        red: 255 - individualPointValue * x,
        green: individualPointValue * x
    }
}

const colors = colorChange(10);

style={{backgroundColor: `rgb(${colors.red}, ${colors.green}, 0)`}}

This doesn't answer your question directly using hex but you in theory could slot in a decimal to hex translation and get the hex result you're looking for.