OKLCH & moderne CSS-Farben: Der praktische Leitfaden
OKLCH beschreibt Farbe mit drei perzeptiven Werten — Helligkeit, Chroma, Farbton — bei denen gleiche Zahlen gleiches Aussehen bedeuten. Diese eine Eigenschaft verwandelt Palettenarbeit von Handkorrektur in Berechnung: gleichmäßige Farbrampen, vorhersagbarer Kontrast, Dark-Mode-Themes, die abgeleitet statt neu ausgewählt werden. Dieser Hub sammelt unsere Anleitungen zum Farbmodell und dazu, was es in der Praxis verändert; die Ein-Bild-Version ist eine Farbrampe mit wirklich gleichmäßigen Schritten.
Das Problem, das es löst
Ältere Modelle wie HSL beschreiben, wie sich RGB-Zahlen kombinieren, nicht wie Farben aussehen. Das Ergebnis kennt jeder, der schon einmal eine Palette erzeugt hat: Schritte, die sich in der Mitte häufen, Farbtöne, die abdriften, eine Spalte der Palette, die den Kontrast besteht, während ihr Nachbar bei der „gleichen” Helligkeit durchfällt. Wenn Helligkeit hält, was sie verspricht, hören diese Probleme auf, Handwerk zu sein, und werden zu Arithmetik.
OKLCH vs HSL zeigt die Helligkeits-Lüge anhand konkreter Farbpaare, und Was ist perzeptive Gleichförmigkeit? erklärt die Eigenschaft dahinter: gleicher Zahlenabstand bedeutet gleicher sichtbarer Unterschied. Was ist ein JND ergänzt die Messgröße, die aus „diese beiden sehen gleich aus” eine überprüfbare Aussage macht.
Was sich in der Praxis ändert
Mit einem perzeptiven Modell darunter wird eine Palette zu einer Menge von
Kurven statt zu einer Menge einzeln gewählter Werte: eine Helligkeitskurve
setzt die Schritte, ein Chroma-Profil bestimmt, wo die Sättigung ihren
Höhepunkt hat, und dieselbe Maschinerie leitet Dark-Mode-Themes ab und prüft
den Kontrast. Du schreibst nur selten oklch()-Werte von Hand — das Modell ist
der Motor unter der Palette, und die Werte tauchen in erzeugten design tokens
und im CSS auf, wenn du über eine Farbe nachdenken musst.
Genau diese Rolle als Motor nutzt Scale Composer: Eine Skala steuert Farbe, Typografie und Raster zusammen, und die Farbseite wird in OKLCH berechnet, damit die Farbrampen gleichmäßig werden, ohne Korrektur pro Farbton. Die kurvenbasierte Arbeitsweise hat einen eigenen Hub — Farbskalen behandelt Helligkeitskurven und Chroma-Profile als eigenständige Design-Entscheidungen — und der Hub Dark Mode deckt die Ableitungsseite ab: ein Dark-Mode-Theme, das durch Anpassen von Helligkeit und Chroma berechnet wird, statt irgendetwas zu invertieren.
Farbräume (Gamut): der ehrliche Haken
Nicht jede Kombination aus Helligkeit, Chroma und Farbton existiert auf einem Bildschirm. Chroma hat eine Obergrenze, die von Helligkeit und Farbton abhängt, und P3-Displays mit größerem Farbraum heben sie an. Gute Palettenerzeugung respektiert die Obergrenze mit Spielraum, statt gegen sie zu clippen — mehrere der Anleitungen unten behandeln, was das für Markenakzente und Bildmaterial bedeutet. sRGB vs Display-P3 kartiert die beiden Farbräume und wo Bildschirme mit großem Farbraum heute tatsächlich stehen, und Gamut Clipping zeigt, was passiert, wenn eine erzeugte Farbe die Obergrenze überschreitet. Kontrast ist die andere harte Grenze, die eine erzeugte Palette respektieren muss; der Hub Kontrast behandelt, wie man ihn überprüft.
Wo du mit dem Lesen anfängst
Was ist OKLCH? ist die Einführung von Grund auf — fang dort an, wenn die drei Achsen neu für dich sind, und nimm dann Was ist Chroma? für die eine Achse, für die es keine Entsprechung in der Alltagssprache gibt. Auf der Umsetzungsseite behandelt Die CSS-oklch()-Syntax das Schreiben der Werte, Hex in OKLCH umwandeln das Hinein- und Hinausbewegen einer bestehenden Palette, und Browser-Unterstützung für oklch() klärt, ob du es ohne Build-Schritt ausliefern kannst (kannst du, nativ, in allen großen Browsern). Zwei Anleitungen wenden das Modell dann auf Probleme an, die unzusammenhängend wirken, bis das Modell sie sichtbar macht: Warum deine Grautöne nicht wirklich neutral sind über das restliche Chroma, das sich in den meisten Graustufen versteckt, und Sollten Farbrampen den Farbton verschieben? darüber, wann ein Farbton-Drift ein Fehler ist und wann eine Entscheidung.
Anleitungen in diesem Hub
- Browser-Unterstützung für oklch() im Jahr 2026
OKLCH-Browser-Unterstützung 2026: Jede wichtige Engine liefert oklch() seit 2023 aus. Wer noch im Long Tail steckt und die günstigen Fallbacks, die ihn abdecken.
- Die CSS-oklch()-Syntax erklärt
Eine praktische Referenz zur CSS-Funktion oklch(): die drei Werte und Alpha, durchgearbeitete Button-Beispiele, relative Farben mit oklch(from …) und Fallbacks.
- Farbräume erklärt für Designer
Farbräume erklärt für Designer: sRGB, P3 und Rec.2020 sind Gamuts, OKLCH und HSL sind Koordinatensysteme — und welche Kombination zu welcher Aufgabe passt.
- Gamut Clipping: Warum deine Farben zerdrückt werden
Gamut Clipping zerdrückt Farben, die im Modell existieren, aber nicht auf dem Bildschirm: warum das Kappen von Kanälen den Farbton verschiebt, warum Farbrampen flach werden und wie Spielraum das verhindert.
- Hex in OKLCH umwandeln (und zurück)
Hex in OKLCH umzuwandeln ist verlustfrei; der Rückweg kann clampen. Wie die Pipeline funktioniert, warum die Asymmetrie existiert und eine durchgerechnete Farbrampe aus einem echten Marken-Hex.
- OKLCH in Tailwind v4
Tailwind OKLCH in der Praxis: v4 hat seine Palette in OKLCH neu aufgebaut und die Konfiguration in CSS verlagert. Wie du eigene Markenfarben in @theme definierst — und was dir das bringt.
- OKLCH vs HSL: Warum HSL bei der Helligkeit lügt
OKLCH vs HSL: HSLs Helligkeit ist ein Bruchteil von RGB-Zahlen, kein Maß für Wahrnehmung — Gelb und Blau bei 50 % unterscheiden sich enorm. Was OKLCH behebt und wie.
- OKLCH vs LAB und LCH
OKLCH vs LAB und LCH: Was die perzeptiven Farbräume von 1976 und 2020 gemeinsam haben, wie OKLab die Blau-Farbtonverschiebung von CIELAB behoben hat und wann welcher das richtige Werkzeug ist.
- Sollten Farbrampen den Farbton verschieben?
Farbton-Verschiebung in Farbrampen, erklärt: warum handgetunte Paletten den Farbton gedreht haben, warum OKLCH konstanten Farbton konstant aussehen lässt und wann Rotation eine bewusste Entscheidung ist.
- sRGB vs Display-P3: Was Designer wissen müssen
sRGB vs Display-P3: Was ein Gamut ist, wo die zusätzlichen Farben von P3 liegen, warum hex sie nicht ausdrücken kann und wann sich ein weiter Farbraum in echten Projekten lohnt.
- Warum deine Grautöne nicht wirklich neutral sind
Ein neutrales Grau mit gleichen RGB-Kanälen wirkt neben einer Markenpalette oft kalt. Warum die Wahrnehmung Grautöne verschiebt und wie ein Hauch Chroma das behebt.
- Was ist Chroma (und inwiefern ist es nicht Sättigung)?
Chroma misst Buntheit absolut; Sättigung ist ein Prozentsatz dessen, was ein Farbton zulässt. Warum der Unterschied für Paletten und Akzentfarben wichtig ist.
- Was ist ein JND — wann zwei Farben gleich aussehen
Der eben merkliche Unterschied, den Farbwissenschaftler messen: die kleinste Änderung, die ein Auge zuverlässig erkennt. Warum Paletten-Stufen innerhalb von 0,02 OKLCH-Helligkeit verschmelzen.
- Was ist OKLCH? Eine Erklärung für Designer
OKLCH beschreibt Farbe mit drei Werten, die der menschlichen Wahrnehmung entsprechen: Helligkeit, Chroma, Farbton. Erfahre, warum es HSL für Paletten, Rampen und Kontrast abgelöst hat.
- Was ist perzeptive Gleichförmigkeit?
Perzeptive Gleichförmigkeit bedeutet, dass gleiche numerische Abstände wie gleiche sichtbare Unterschiede aussehen. Warum RGB und HSL den Test nicht bestehen und was Gleichförmigkeit der Designarbeit bringt.
Fang mit deiner eigenen Farbe an
Das Modell ergibt am meisten Sinn mit einer Farbe, die dir wichtig ist: Wirf eine Markenfarbe in Scale Composer und es schlägt daraus abgeleitete unterstützende Farben vor — dann sieh zu, wie die Farbrampen, die es baut, ihre Helligkeitsschritte über jeden Farbton hinweg halten. Dieses Verhalten ist OKLCH — gesehen statt erklärt.