color-mix() — native CSS color blending

<div class="pg">
    <h1 class="pg-title">🎨 color-mix() — blend colors in native CSS</h1>
    <p class="pg-sub">
      <code>color-mix()</code> takes two colors, a ratio, and a color space, and hands
      back the blend — no Sass, no build step. Drag the ratio, switch the space, and
      watch the CSS and the <strong>browser-resolved value</strong> update live. Then
      build a whole shade scale from one source color, the way the post does.
    </p>

<div class="banner" id="supportBanner">
      ⚠️ This browser doesn't support <code>color-mix()</code>, so the swatches below
      fall back to a plain color. Try the latest Chrome, Firefox, or Safari (Baseline 2023).
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Mix two colors</div>
      <div class="mixrow">
        <div class="endcap">
          <input id="colorA" type="color" value="#3b82f6" aria-label="First color" />
          <span class="cap">color A</span>
        </div>
        <div class="ratio">
          <input id="ratio" type="range" min="0" max="100" step="1" value="80" aria-label="Percentage of color A" />
          <div><span class="pct" id="ratioPct">80%</span> <span class="muted" id="ratioInv">A · 20% B</span></div>
        </div>
        <div class="endcap">
          <input id="colorB" type="color" value="#000000" aria-label="Second color" />
          <span class="cap">color B</span>
        </div>
      </div>

<div class="field" style="margin-top:14px">
        <span class="ctl-label">Color space</span>
        <div class="seg" id="spaceSeg" role="group" aria-label="Color space">
          <button data-space="srgb" aria-pressed="true">srgb</button>
          <button data-space="hsl" aria-pressed="false">hsl</button>
          <button data-space="oklch" aria-pressed="false">oklch</button>
          <button data-space="oklab" aria-pressed="false">oklab</button>
          <button data-space="lab" aria-pressed="false">lab</button>
        </div>
      </div>

<div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="darken">🌚 Sass darken(15%)</button>
        <button class="btn sm" data-preset="lighten">🌝 Sass lighten(15%)</button>
        <button class="btn sm" data-preset="tint">💧 Brand + white</button>
        <button class="btn sm" data-preset="mix">🔀 Two brand colors</button>
      </div>
      <p class="hint" id="mixHint" style="margin-top:12px"></p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Why the color space matters</div>
      <p class="hint" style="margin-top:0">
        Here is the <em>same</em> 50/50 mix of your two colors, computed in every space
        at once. In <code>srgb</code> the channels just average — mixing complementary
        colors muddies toward gray. <code>oklch</code>/<code>oklab</code> travel through a
        perceptually uniform space, so the midpoint stays vivid. Click a tile to load it above.
      </p>
      <div class="btn-row" style="margin:2px 0 12px">
        <button class="btn ghost sm" id="complementBtn">Try blue + yellow (the classic)</button>
      </div>
      <div class="spaces" id="spaceGrid"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> One source color → a whole scale</div>
      <p class="hint" style="margin-top:0">
        This is the Sass-replacement pattern. Pick a brand color; every step below is
        <code>color-mix(in oklch, brand X%, white|black)</code> — derived in CSS, no
        preprocessor. Change the source and the entire scale re-derives instantly.
      </p>
      <div class="row" style="gap:10px; margin:4px 0 14px">
        <div class="endcap" style="flex-direction:row; gap:10px">
          <input id="brand" type="color" value="#3b82f6" aria-label="Brand source color" />
          <span class="ctl-label">--brand</span>
        </div>
        <button class="btn ghost sm" id="brandRandom" style="margin-left:auto">🎲 Surprise me</button>
      </div>
      <div class="scale" id="scaleGrid"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Delete the preprocessor</div>
      <div class="code" id="sassOut" aria-hidden="true"></div>
      <p class="hint">Baseline 2023 — Chrome 111, Firefox 113, Safari 16.2. Unsupported browsers just
        ignore the declaration, so a pre-computed fallback value stays visible.</p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.