<div class="controls">
  <label for="amount">Amount</label>
  <input type="range" min="0" max="100" id="amount" />

  <label for="c1">Color 1</label>
  <input type="color" id="c1" value="#FF0000" data-color />

  <label for="c2">Color 2</label>
  <input type="color" id="c2" value="#0000FF" data-color />

  <fieldset>
    <p>Interpolation method</p>
    <input type="radio" id="shorter" name="method" value="shorter" checked />
    <label for="shorter">Shorter</label>
    <input type="radio" id="longer" name="method" value="longer" />
    <label for="longer">Longer</label>
  </fieldset>

  <fieldset>
    <p>Color space</p>
    <input type="radio" id="srgb" name="space" value="srgb" checked />
    <label for="srgb">srgb</label>

    <input type="radio" id="oklch" name="space" value="oklch" />
    <label for="oklch">oklch</label>

    <input type="radio" id="hsl" name="space" value="hsl" />
    <label for="hsl">hsl</label>
  </fieldset>
</div>
<p data-text hidden></p>

* {
  box-sizing: border-box;
}

body {
  --c1: red;
  --c2: blue;
  --amount1: 50%;
  --amount2: 50%;
  background: color-mix(
    in var(--space, srgb),
    var(--c1) var(--amount1),
    var(--c2) var(--amount2)
  );
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  min-height: 100vh;
  margin: 0;
  font-family: "Helvetica", sans-serif;
}

.controls {
  max-width: 20rem;
  padding: 1rem;
  background: white;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  max-height: 100vh;
  overflow: auto;
}

fieldset {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: subgrid;
  gap: 0.5rem;
  padding: 0.75rem;

  p {
    grid-column: span 2;
    margin: 0;
  }
}

[data-text] {
  align-self: center;
  background: rgb(255 255 255 / 0.7);
  padding: 1rem;
  margin: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 1.4;
}

const amountInput = document.querySelector("#amount");
const text = document.querySelector("[data-text]");
const colorInputs = document.querySelectorAll("[data-color]");
const colorSpaceInputs = [...document.querySelectorAll('[name="space"]')];
const methodInputs = [...document.querySelectorAll('[name="method"]')];

const setAmounts = (value) => {
  document.body.style.setProperty("--amount1", `${value}%`);
  document.body.style.setProperty("--amount2", `${100 - value}%`);
};

const getColorSpace = () => {
  const space = colorSpaceInputs.find((el) => el.checked).value;

  if (space === "srgb") return space;

  const method = methodInputs.find((el) => el.checked).value;

  return `${space} ${method} hue`;
};

const setTextContent = (value) => {
  const c1 = getComputedStyle(document.body).getPropertyValue("--c1");
  const c2 = getComputedStyle(document.body).getPropertyValue("--c2");

  text.hidden = false;

  text.innerHTML = `
    <code>color-mix(in ${getColorSpace()}, ${c1} ${value}%, ${c2} ${
      100 - value
    }%)</code>`;
};

amountInput.addEventListener("input", (e) => {
  const { value } = e.target;
  setAmounts(value);
  setTextContent(value);
});

colorInputs.forEach((el) => {
  el.addEventListener("input", (e) => {
    const { id, value } = e.target;
    document.body.style.setProperty(`--${id}`, value);

    setTextContent(amountInput.value);
  });
});

const setColorSpace = () => {
  document.body.style.setProperty("--space", getColorSpace());
};

colorSpaceInputs.forEach((el) => {
  el.addEventListener("change", (e) => {
    const { value } = e.target;
    setColorSpace(value);
    setTextContent(amountInput.value);
  });
});

methodInputs.forEach((el) => {
  el.addEventListener("change", () => {
    const space = colorSpaceInputs.find((el) => el.checked).value;
    setColorSpace();
    setTextContent(amountInput.value);
  });
});

setAmounts(amountInput.value);
setTextContent(amountInput.value);
setColorSpace();