Relative color syntax (from)

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

Chrome 119Edge 119Safari 16.4Firefox 128

Nimmt eine bestehende Farbe und schreibt ihre Kanäle um: `oklch(from var(--brand) calc(l + .2) c h)` erzeugt eine hellere Tönung, `rgb(from currentColor r g b / .3)` eine transluzente Version. Themes lassen sich zur Laufzeit aus einer Eingabefarbe ableiten.

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: Setze zuerst einen einfachen Fallback-Wert; Browser ohne Unterstützung ignorieren die Relative-Color-Zeile. Sichere mit `@supports (color: rgb(from red r g b))` ab, wenn das Layout davon abhängt.

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

Prompt

Nutze die Relative Color Syntax, um Varianten aus einem Token abzuleiten: `oklch(from var(--brand) calc(l + 0.2) c h)` für Tönungen, `calc(l - 0.2)` für Schattierungen, `/ 0.15` Alpha für dezente Füllungen. Arbeite in oklch (nicht rgb), damit Anpassungen wahrnehmungsgleichmäßig bleiben, und begrenze die Helligkeit bei Bedarf mit `clamp(0, calc(l + .2), 1)`.