Relative color syntax (from)

Baseline 2024 (Chrome 119, Safari 16.4, Firefox 128).

Chrome 119Edge 119Safari 16.4Firefox 128

Takes an existing color and rewrites its channels: `oklch(from var(--brand) calc(l + .2) c h)` makes a lighter tint, `rgb(from currentColor r g b / .3)` a translucent version. Themes can be derived from one input color at runtime.

CSS

.fx-008 button{
  --bg:var(--brand);
  background:var(--bg);color:oklch(from var(--bg) calc(l + .55) .02 h);
  border:1px solid oklch(from var(--bg) calc(l - .15) c h);
  padding:10px 16px;border-radius:8px;font:600 15px system-ui;margin-right:8px;
}
.fx-008 .ghost{background:oklch(from var(--brand) l c h / .12);color:oklch(from var(--brand) calc(l - .1) c h)}
.fx-008 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-008" style="--brand:#7c3aed">
  <button>Primary</button><button class="ghost">Ghost</button>
</div>

Fallback: Set a plain fallback value first; unsupported browsers ignore the relative color line. Guard with `@supports (color: rgb(from red r g b))` when layout depends on it.

Source: developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

Prompt

Use relative color syntax to derive variants from one token: `oklch(from var(--brand) calc(l + 0.2) c h)` for tints, `calc(l - 0.2)` for shades, `/ 0.15` alpha for subtle fills. Work in oklch (not rgb) so adjustments stay perceptually even, and clamp lightness with `clamp(0, calc(l + .2), 1)` where needed.