<h1>
  CSS level 4 color blend adjuster just with custom properties and calc()
</h1>

<div>
  <div class="fg">Foreground</div>
  <div class="bg">Background</div>
  <div class="blended">Foreground blended with background by <em>blend percentage</em> in the HSL space</div>
</div>

<form>
  <label><strong>Blend amount</strong></label><input type="range" name="--blend-amount" value="50"/><code></code>
  <label>Background hue</label><input type="range" name="--bg-h" value="180" min="0" max="360"/><code></code>
  <label>Background saturation</label><input type="range" name="--bg-s" value="100"/><code></code>
  <label>Background lightness</label><input type="range" name="--bg-l" value="50"/><code></code>
  <label>Foreground hue</label><input type="range" name="--fg-h" value="240" min="0" max="360"/><code></code>
  <label>Foreground saturation</label><input type="range" name="--fg-s" value="100"/><code></code>
  <label>Foreground lightness</label><input type="range" name="--fg-l" value="50"/><code></code>
</form>

/*
  The CSS level 4 blend adjuster mimicked with just custom properties and calc().
  While it's pretty straightforward to mimick the hue, saturation and
  lightness adjusters, blend requires a bit more math.
  Results might not be 100% in line with the spec, but are very much usable IMHO.
  Syntax of course is even more bloated than for the simple adjusters mentioned above.
*/
body {
  /* Actual values set from JS */
  --bg-h: 0; --bg-s: 0; --bg-l: 0; /* Background hue, saturation, lightness. */
  --fg-h: 0; --fg-s: 0; --fg-l: 0; /* Foreground hue, saturation, lightness. */
  /* The percentage for the blend() adjuster (just unit-less in this case),
     see https://www.w3.org/TR/css-color-4/#modifying-colors */
  --blend-amount: 0;
  
  /* If you see a pink blend result, you might have a syntax error somwehere below this. */
  --blend-result: pink;
  
  /* The result of blending foreground with background in the HSL space by --blend-amount: */
  --blend-result: hsl(
    calc(
      (var(--fg-h) * ((100 - var(--blend-amount)) * 0.01)) +
      (var(--bg-h) * (var(--blend-amount) * 0.01))
    ),
    calc((
      (var(--fg-s) * ((100 - var(--blend-amount)) * 0.01)) +
      (var(--bg-s) * (var(--blend-amount) * 0.01))
    ) * 1%),
    calc((
      (var(--fg-l) * ((100 - var(--blend-amount)) * 0.01)) +
      (var(--bg-l) * (var(--blend-amount) * 0.01))
    ) * 1%)
  );
}

/* A few demo styles. */
h1 {
  /* This is how colors need to be specified.
     Conversion of saturation and lightness to percentage done here to enable prior calculations. */
  background-color: hsl(var(--bg-h), calc(var(--bg-s) * 1%), calc(var(--bg-l) * 1%));
  color: var(--blend-result);

  font-weight: bold;
  font-size: 26px;
  padding: 1em;
  position: relative;
}
body {
  font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
}
body > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  margin: 0 -.5em;
}
div > div {
  color: white;
  text-shadow: 1px 1px 1px black;
  flex: max-content 0 0;
  padding: 3em;
  margin: .5em;
}
/* div + div { margin-left: 2em } */
.bg { background-color: hsl(var(--bg-h), calc(var(--bg-s) * 1%), calc(var(--bg-l) * 1%)) }
.fg { background-color: hsl(var(--fg-h), calc(var(--fg-s) * 1%), calc(var(--fg-l) * 1%)) }
.blended { background-color: var(--blend-result) }
form {
  display: grid;
  grid-template-columns: minmax(min-content, max-content) max-content max-content;
  grid-gap: .5em;
  align-items: center;
  margin-top: 1em;
}
code { text-align: right }

const updateStyle = element => document.body.style.setProperty(element.name, element.value) || (element.nextElementSibling.innerText = element.value)
Array.from(document.querySelectorAll('input')).forEach(input => updateStyle(input))
document.addEventListener('input', ({ target }) => requestAnimationFrame(() => updateStyle(target)))