Relative Farbsyntax in CSS erklärt

Mar 15, 2026 · 4 min read

Wenn Sie jemals ein Dutzend Custom Properties definiert haben, nur um eine halbtransparente Version Ihrer Markenfarbe zu erstellen, verstehen Sie bereits das Problem, das die relative Farbsyntax in CSS löst. Diese Funktion ermöglicht es Ihnen, neue Farben direkt aus bestehenden Farben innerhalb jeder modernen CSS-Farbfunktion abzuleiten – ohne Präprozessoren, ohne JavaScript, ohne zusätzliche Variablen.

Wichtigste Erkenntnisse

Die relative Farbsyntax in CSS verwendet das Schlüsselwort from, um neue Farben von einer bestehenden Ausgangsfarbe abzuleiten, indem deren einzelne Kanäle als modifizierbare Variablen bereitgestellt werden.
Sie funktioniert mit rgb(), hsl(), hwb(), lab(), lch(), oklab() und oklch().
OKLCH ist der bevorzugte Farbraum für Manipulationen, da sein Helligkeitskanal perzeptuell uniform ist und visuell konsistente Ergebnisse über alle Farbtöne hinweg erzeugt.
Relative Farben lassen sich natürlich in Token-basierte Designsysteme integrieren und ermöglichen es Ihnen, eine Basisfarbe zu definieren und jede Variante daraus abzuleiten – ohne Präprozessoren oder Build-Schritte.

Was ist die relative Farbsyntax in CSS?

Relative Farben in CSS, definiert in der CSS Color Level 5 Spezifikation, ermöglichen es Ihnen, eine bestehende Farbe – die sogenannte Ausgangsfarbe (origin color) – zu nehmen und deren einzelne Kanäle als Variablen zu verwenden, um eine neue Farbe zu konstruieren. Die zentrale Ergänzung ist das Schlüsselwort from.

Die grundlegende Struktur sieht folgendermaßen aus:

color-function(from <origin-color> channel1 channel2 channel3)

Wenn der Browser auf from stößt, konvertiert er die Ausgangsfarbe in den Ziel-Farbraum, stellt jeden Kanal als benannte Variable bereit und ermöglicht es Ihnen, diese Variablen – modifiziert oder unverändert – als Ausgabewerte zu übergeben.

Dies funktioniert mit modernen CSS-Farbfunktionen wie rgb(), hsl(), hwb(), lab(), lch(), oklab() und oklch().

Wie die CSS-from-Farbsyntax funktioniert

Betrachten wir dieses einfache Beispiel:

/* Origin color: green */
/* Channels exposed: r=0, g=128, b=0 */
color: rgb(from green r g b); /* outputs rgb(0 128 0) */

Die Ausgabe ist hier identisch mit der Eingabe, aber die eigentliche Stärke liegt darin, dass Sie einzelne Kanäle mit calc() modifizieren können:

/* Rotate the hue by 180 degrees to get the complement */
background: hsl(from blue calc(h + 180) s l);

/* Lighten by multiplying the lightness channel */
background: oklch(from blue calc(l * 1.25) c h);

/* Reduce opacity without a separate variable */
background: rgb(from lime r g b / 50%);

Kanalwerte werden innerhalb der Funktion zu einfachen Zahlen aufgelöst, sodass calc()-Berechnungen sauber funktionieren, ohne dass es zu Einheitenkonflikten kommt.

Warum relative Farben in OKLCH sich lohnen

Nicht alle Farbräume eignen sich gleichermaßen für Manipulationen. HSL ist vertraut, aber sein Helligkeitskanal ist nicht perzeptuell uniform – eine Anpassung von l um denselben Betrag erzeugt visuell inkonsistente Ergebnisse bei verschiedenen Farbtönen.

OKLCH löst dieses Problem. Sein Helligkeitskanal ist perzeptuell uniform, was bedeutet, dass eine Verschiebung um +0.1 unabhängig vom Farbton wie derselbe visuelle Schritt aussieht. Das macht ihn zu einer starken Wahl für die Erzeugung von Tönungen, Schattierungen und barrierefreien Kontrastpaaren.

Falls Sie mit perzeptuellen Farbräumen nicht vertraut sind, erklärt das OKLab/OKLCH-Farbmodell, eingeführt von Björn Ottosson, die Überlegungen hinter diesen neueren Farbräumen.

/* Darken by 25% */
background: oklch(from var(--color-primary) calc(l * 0.75) c h);

/* Generate a high-contrast text color */
color: oklch(from var(--color-primary) calc(l + 0.6) c h);

Beachten Sie, dass der Helligkeitskanal in OKLCH von 0 bis 1 reicht, sodass eine Verschiebung um calc(l + 0.6) erheblich ist. Werte, die den gültigen Bereich überschreiten, werden vom Browser automatisch begrenzt.

Relative Farben vs. `color-mix()`

Diese beiden CSS-Farbfunktionen dienen unterschiedlichen Zwecken. color-mix() mischt zwei Farben in einem bestimmten Verhältnis. Relative Farben in CSS manipulieren direkt die Kanäle einer einzelnen Ausgangsfarbe. Wenn Sie einen Hover-Zustand, eine gedämpfte Variante oder ein opazitätsangepasstes Token benötigen, ist die relative Syntax das richtige Werkzeug. Wenn Sie zwischen zwei unterschiedlichen Farben interpolieren müssen, greifen Sie zu color-mix().

Integration in ein Token-basiertes Designsystem

Hier zeigen relative Farben in CSS ihre wahre Stärke. Definieren Sie ein Basis-Token und leiten Sie dann jede Variante davon ab:

:root {
  --color-primary: #3b82f6;

  --color-primary-hover:    oklch(from var(--color-primary) calc(l * 0.9) c h);
  --color-primary-active:   oklch(from var(--color-primary) calc(l * 0.8) c h);
  --color-primary-disabled: oklch(from var(--color-primary) l c h / 0.5);
  --color-on-primary:       oklch(from var(--color-primary) calc(l + 0.6) c h);
}

Ändern Sie --color-primary und jedes abgeleitete Token wird automatisch aktualisiert. Keine Sass-Funktionen, kein Build-Schritt.

Browser-Unterstützung

Die relative Farbsyntax wird in modernen Versionen von Chromium, Firefox und Safari unterstützt. Verwenden Sie @supports, um sie sicher zu verwenden:

@supports (color: rgb(from white r g b)) {
  /* relative color syntax is available */
}

Für Browser ohne Unterstützung geben Sie vor der relativen Farbdeklaration eine Fallback-Farbe an. Die Kaskade stellt sicher, dass ältere Browser den statischen Wert verwenden, während moderne Browser ihn überschreiben:

.button {
  background: #3b82f6;
  background: oklch(from var(--color-primary) calc(l * 0.9) c h);
}

Fazit

Die relative Farbsyntax in CSS ersetzt eine ganze Kategorie von Präprozessor-Logik durch ein einziges, lesbares Muster. Wählen Sie OKLCH für perzeptuell konsistente Helligkeitsanpassungen, verwenden Sie hsl(), wenn Sie direkte Sättigungskontrolle benötigen, und verbinden Sie alles mit einer Custom Property, damit Ihre gesamte Farbpalette ausgehend von einem einzigen Quell-Token synchron bleibt.

Häufig gestellte Fragen

Ja. Sie können jede Custom Property mit var() als Ausgangsfarbe übergeben. Zum Beispiel funktioniert oklch(from var(--brand-color) calc(l * 0.8) c h) wie erwartet. Der Browser löst zuerst die Variable auf, konvertiert dann die resultierende Farbe in den Ziel-Farbraum und stellt deren Kanäle bereit.

Der Browser begrenzt Werte außerhalb des gültigen Bereichs automatisch. Wenn beispielsweise ein calc()-Ausdruck die OKLCH-Helligkeit über 1 oder unter 0 schiebt, beschneidet der Browser sie auf den gültigen Bereich. Das bedeutet, dass Sie in den meisten Fällen nicht manuell gegen Überlauf absichern müssen.

Der Performance-Einfluss ist für typische Anwendungsfälle vernachlässigbar. Der Browser löst relative Farben zur Computed-Value-Zeit auf, ähnlich wie er calc() in anderen Properties auflöst. Sie bräuchten Tausende von relativen Farbdeklarationen auf einer einzelnen Seite, bevor ein messbarer Unterschied aufträte.

Relative Farbfunktionen können verkettet werden, wenn das Ergebnis einer Transformation zu einem gültigen Farbwert aufgelöst wird. In der Praxis weisen Entwickler oft das Ergebnis einer relativen Farbberechnung einer Custom Property zu und verwenden diese als Ausgangsfarbe für eine weitere Transformation, was mehrere Schritte der Farbmanipulation ermöglicht und gleichzeitig den Code lesbar hält.

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.