How to vary background color based on value - html

Question

I'm listing out a table that has the results of a tournament. I have the final placements, as well as the original seeds for each team in the tournament. I'm adding a small bubble with a +/- of how the final placement compares to the original seeding. I'd like to make the background get a darker red as the team did worse, and darker green as the team did better.
Example:
Team A finished 1st and was seeded 3rd -> light green
Team B finish 2nd and was seeded 30th -> dark green
Team C finished 10th was seeded 8th -> light red
Team D finish 30th and was seeded 1st -> dark red
I'd like to set a limit obviously for how dark/light the colors get, so teams that out/under performed past a certain amount would all have the same dark tone.
My site is built using Angular, but is this possible to do with just some simple CSS?
Here is a picture from another site that has this already implemented:
As you can see, the final finish is listed on the left, and how well they performed in comparison to their original seeding is on the right. Blank signifies Seed == Finish

Answer 1

You can create an array for the colors
TS:
colors = [{ finished: "1st", color: "light green" }, { finished: "30th", color: "dark green"}]
Loop through your data in a table (or how you prefer) and add ngStyle:
<table>
<th>Team</th>
<th>Finished</th>
<tr *ngFor="let res of colors" [ngStyle]="{'background':getColor(res.finished)}">
<td>res.whateveryourfieldiscalled</td>
<td>res.whateveryourfieldiscalled</td>
</tr>
</table>
And then add it with a ts getColor method:
getColor(finished) {
return this.colors.filter(item => item.finished === finished)[0].color
}