# Relative color syntax (from)

Status: Baseline 2024 (Chrome 119, Safari 16.4, Firefox 128).  
Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors  
Seite: https://designforai.dev/de/css/relative-color-syntax

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.

## HTML

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

## CSS

```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; }
```

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.

## 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)`.