title: Lighten RGB with pure CSS
body: <p>Using <strong>pure CSS</strong> how can I lighten an RGB like: <code>rgb(255, 0, 0)</code></p>
  <p>SASS's <code>lighten</code> mixin works well: <code>lighten(rgb(255, 0, 0), 25%)</code> however it doesn't support CSS variables like this: <code>lighten(var(--redColor), 25%)</code></p>
  <p>I need to use CSS variables because you can change CSS variables on the fly after the page has loaded.</p>
  <h3>Things I've tried</h3>
  <ol>
  <li><code>opacity: 0.75</code> - Opacity makes the background bleed into the color which I don't want.</li>
  <li><code>filter: brightness(</code> - Filters affect the whole element but I just want to lighten specific colors.</li>
  <li><code>hsl(0, 100%, 50%)</code> - HSL looks promising though I need a way to convert RGB to HSL in order to lighten the RGB.</li>
  </ol>
  <p>Ideally I hope to have a SASS mixin that does some CSS to lighten whatever color's passed into it.</p>