title: How to vary background color based on value
body: <p>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.</p>
  <p>Example:</p>
  <pre><code>Team A finished 1st and was seeded 3rd -&gt; light green
  Team B finish 2nd and was seeded 30th -&gt; dark green
  Team C finished 10th was seeded 8th -&gt; light red
  Team D finish 30th and was seeded 1st -&gt; dark red
  </code></pre>
  <p>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.</p>
  <p>My site is built using Angular, but is this possible to do with just some simple CSS?</p>
  <p>Here is a picture from another site that has this already implemented:</p>
  <p><a href="https://i.stack.imgur.com/bXT5J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bXT5J.png" alt="screenshot of example website" /></a></p>
  <p>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</p>