CSS relative color syntax — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Derive color variants, don't hardcode them</h1>
    <p class="pg-sub">
      Pick a brand color. Every swatch below is computed <strong>live, in CSS</strong>,
      from that one value using <code>oklch(from var(--brand) ...)</code> — nothing here
      is a second hex code waiting to go stale.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick your brand color</div>
      <div class="color-input-row">
        <input type="color" id="baseColor" value="#3b6fd6" />
        <div class="presets">
          <button class="btn sm" data-color="#3b6fd6">Blue</button>
          <button class="btn sm" data-color="#c2410c">Burnt orange</button>
          <button class="btn sm" data-color="#0f766e">Teal</button>
          <button class="btn sm" data-color="#1a1a2e">Near-black</button>
        </div>
      </div>
      <div class="slider-row">
        <label for="darkenAmount">Hover darkens by</label>
        <input type="range" id="darkenAmount" min="0" max="0.35" step="0.01" value="0.12" />
        <span class="pill amount-pill" id="amountLabel">0.12</span>
      </div>
      <p class="hint">
        That slider changes one CSS custom property (<code>--darken-amount</code>). The
        <code>calc(l - var(--darken-amount))</code> below recomputes on every move — this
        is CSS doing the math, not JavaScript repainting swatches.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Every variant, derived from the one color above</div>
      <div class="swatch-row" id="swatches">
        <div class="swatch">
          <div class="swatch-color" style="background: var(--brand);"></div>
          <div class="swatch-meta"><div class="name">Base</div><div class="val">var(--brand)</div></div>
        </div>
        <div class="swatch">
          <div class="swatch-color" style="background: var(--brand-hover);"></div>
          <div class="swatch-meta"><div class="name">Hover</div><div class="val">oklch(from var(--brand) calc(l - amt) c h)</div></div>
        </div>
        <div class="swatch">
          <div class="swatch-color" style="background: var(--brand-active);"></div>
          <div class="swatch-meta"><div class="name">Active / pressed</div><div class="val">oklch(from var(--brand) calc(l - amt*2) c h)</div></div>
        </div>
        <div class="swatch">
          <div class="swatch-color" style="background: var(--brand-border);"></div>
          <div class="swatch-meta"><div class="name">Border</div><div class="val">oklch(from var(--brand) calc(l + 0.15) c h)</div></div>
        </div>
        <div class="swatch">
          <div class="swatch-color" style="background: var(--brand-tint); background-image: linear-gradient(45deg, #8884 25%, transparent 25%, transparent 75%, #8884 75%), linear-gradient(45deg, #8884 25%, transparent 25%, transparent 75%, #8884 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px;"></div>
          <div class="swatch-meta"><div class="name">Tint (8% alpha)</div><div class="val">oklch(from var(--brand) l c h / 8%)</div></div>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot good" id="dot"></span>
        <span id="statusText">Change the color or the slider — every swatch recomputes with no JS repaint.</span>
      </div>
    </div>
  </div>

preview

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