Was sind OKLCH-Farben?

(jakub.kr)

11 Punkte von GN⁺ 2025-08-26 | 1 Kommentare | Auf WhatsApp teilen

OKLCH ist ein modernes Farbmodell, das auf die menschliche visuelle Wahrnehmung abgestimmt ist und die Eigenschaft besitzt, dass Änderungen bei Helligkeit, Sättigung und Farbton zwischen Farben gleichmäßig wahrgenommen werden; es ist also ein wahrnehmungsuniformes Farbmodell
Es besteht aus Lightness (Helligkeit), Chroma (Sättigung) und Hue (Farbton) und ermöglicht im Vergleich zu älteren Modellen die Erstellung konsistenter Farbpaletten
Wenn bei gleicher Helligkeit und Sättigung nur der Hue-Wert geändert wird, lassen sich gleichmäßige Farbpaletten erzeugen, was für UI-Design vorteilhaft ist
Gegenüber sRGB/HSL bietet es vorhersehbare Helligkeitsänderungen und gleichmäßige Verläufe, in manchen Fällen können jedoch unbeabsichtigte Farben entstehen
Auf modernen Displays wie Display-P3 ist eine noch breitere Farbdarstellung möglich; unterstützt wird es in modernen Browsern über CSS Color 4, inklusive sRGB-Fallback, und es etabliert sich zunehmend als Webstandard

Einführung in das OKLCH-Farbmodell

OKLCH ist ein modernes Farbmodell, das mit dem Ziel der wahrnehmungsbezogenen Uniformität (perceptually uniform) entwickelt wurde
Das Modell arbeitet näher an der tatsächlichen menschlichen Farbwahrnehmung, wodurch der Umgang mit Farben in digitalem Design und der Frontend-Entwicklung deutlich einfacher wird

Grundkonzepte von Farbmodellen

Ein Farbmodell ist ein System, mit dem Farben mathematisch definiert und dargestellt werden
Häufig verwendete Modelle sind zum Beispiel: RGB, HSL, LCH, OKLCH, LAB, XYZ
Jedes Modell bestimmt, wie einfach sich Farben darstellen und bearbeiten lassen

Beispiele für Farbangaben

oklch(0.55 0.18 260)
hsl(220 100% 50%)
rgb(0, 128, 255)
lch(60% 60 260)
lab(50 -10 -50)
color(xyz 0.18 0.19 0.6)
#1E90FF

Gamut (Farbraumumfang)

Gamut bezeichnet den gesamten Farbbereich, den ein Farbmodell darstellen kann
Typische Gamuts sind: sRGB (Webstandard), Display-P3 (Unterstützung auf modernen Geräten)
Ein Farbraum besitzt neben dem Gamut-Bereich auch weitere Eigenschaften wie White Point und Transfer Function

Aufbau von OKLCH

OKLCH und LCH bestehen beide aus drei Werten: Lightness, Chroma, Hue
OKLCH basiert auf dem Farbraum OKLab

Lightness (Helligkeit): angegeben als 0–1 oder 0 %–100 %, garantiert eine gleichmäßige Veränderung der Helligkeit
Chroma (Sättigung): die Intensität der Farbe, ähnlich der Saturation (Sättigung) in HSL
Hue (Farbton): Darstellung des Farbtons als Winkel von 0 bis 360 Grad

Vorteile und Einsatz von OKLCH

Konsistente Helligkeit
- Wenn in OKLCH Farben mit gleicher Helligkeit und gleichem Chroma, aber unterschiedlichem Hue definiert werden, wirken alle Farben ähnlich hell
- Bei herkömmlichem sRGB oder HSL können Helligkeit und Sättigung je nach Farbe inkonsistent erscheinen
- Deshalb eignet sich OKLCH besonders gut für die Erstellung wahrnehmungsuniformer Farbpaletten
Vorhersehbare Helligkeitsstufen
- In OKLCH lassen sich durch Änderung der Helligkeit verschiedene Farbstufen erzeugen, ohne dass sich Hue (Farbton) oder Chroma (Sättigung) verändern
- Bei HSL und ähnlichen Modellen tritt beim Ändern der Helligkeit häufig ein Drift des Farbtons auf
- Mit OKLCH lassen sich daher allein über die Helligkeitsanpassung konsistente Helligkeitsabstufungen erzeugen
Umgang mit Verläufen (Gradients)
- In sRGB werden Rot-, Grün- und Blauwerte interpoliert, wodurch Zwischenstufen matt wirken oder starke Helligkeitssprünge entstehen können
- OKLCH interpoliert entlang der Achsen Lightness, Chroma und Hue, wodurch natürlichere Verläufe möglich sind
- Da der Hue-Wert eine kreisförmige Struktur hat, können dabei jedoch unerwartete Farbverschiebungen auftreten
- Um das zu vermeiden, kann mit linearer Interpolation in OKLab ein besser vorhersagbares Ergebnis erzielt werden

Unterstützung von Farbräumen

sRGB deckt einen Teil des breiten Farbraums moderner Displays nicht ab
Mit OKLCH lassen sich auf Geräten mit breiten Farbräumen wie Display-P3 lebendigere Farben darstellen
Auf Geräten, die nur sRGB unterstützen, werden die Farben auf möglichst ähnliche Farben abgebildet

Maximaler Chroma-Wert

Mit OKLCH lassen sich mathematisch auch Farben definieren, die außerhalb des tatsächlich darstellbaren Bereichs eines Bildschirms liegen
Ein zu großer Chroma-Wert wie etwa oklch(0.7 0.4 40) kann zum Beispiel nicht real angezeigt werden und wird daher auf eine nahe liegende Farbe geclippt
Es ist wichtig, das Konzept des maximalen Chroma-Werts zu verstehen und je nach Farbton, Helligkeit und gewähltem Farbraum (sRGB, Display-P3) passende Werte zu setzen

Browser-Unterstützung und Fallback

OKLCH-Farben wurden mit dem CSS Color Module Level 4 eingeführt und werden von den meisten modernen Browsern unterstützt

In älteren Browsern werden sie eventuell nicht unterstützt; mit der CSS-Direktive @supports lassen sich Fallback-Werte definieren

@layer base {  
  :root {  
    /* sRGB hex */  
    --color-gray-100: #fcfcfc;  
    --color-gray-200: #fafafa;  
    --color-gray-300: #f4f4f4;  

    @supports (color: oklch(0 0 0)) {  
      /* OKLCH */  
      --color-gray-100: oklch(0.991 0 0);  
      --color-gray-200: oklch(0.982 0 0);  
      --color-gray-300: oklch(0.955 0 0);  
    }  
  }  
}

In unterstützten Browsern wird OKLCH verwendet, in nicht unterstützten Browsern sRGB-Farbe (hex)

Das Tool oklch.fyi

oklch.fyi ist ein Web-Tool, das Funktionen rund um OKLCH wie das Erzeugen von OKLCH-Farbpaletten oder die Umwandlung in CSS-Variablen bereitstellt
Es erleichtert den Einsatz von OKLCH-Farben in Design-Systemen, Themes und ähnlichen Projekten

1 Kommentare

GN⁺ 2025-08-26

Hacker-News-Kommentare

Ich bin skeptisch, was die Funktion „Better Gradients“ angeht. OKLCH ist ein Polarkoordinatenraum, und der Hue-Wert fungiert darin als Winkel. Wenn man Farben zwischen zwei verschiedenen Punkten interpoliert, bewegt man sich daher entlang des Kreisrandes. Verwendet man zum Beispiel den Code linear-gradient(in oklch, #f0f, #0f0), gerät der Verlauf von Grün zu Violett deutlich außerhalb des darstellbaren Farbbereichs. Dreht man den Kreis in die andere Richtung, läuft man wie bei linear-gradient(in oklch longer hue, #f0f, #0f0) über Cyan oder Aqua. Solche Pfade zeigen, wie unpraktisch ein wahrnehmungsbasierter Farbraum sein kann, wenn er mit den Grenzen von sRGB oder des für Menschen wahrnehmbaren Farbbereichs, also dem Gamut, umgehen muss. Tatsächlich reichen schon minimale Wertänderungen, damit Farben aus dem Bereich herausfallen. Es gibt zwar verschiedene Algorithmen, um das zu lösen, aber dabei leidet die perzeptuelle Gleichmäßigkeit. So wird etwa das Rot im Verlauf auffallend dunkel. Wenn man bessere Gradients will und perzeptuelle Gleichmäßigkeit wichtig ist, sollte eigentlich Oklab-Interpolation der Standard sein. Oklab interpoliert auf einem geraden Pfad quer durch den Kreis und geht bei Bedarf auch durch Grau (linear-gradient(in oklab, #f0f, #0f0)). Damit verschwindet auch das oft sichtbare Abdunkeln bei sRGB-Interpolation, und es entsteht ein natürlicher Gradient von Magenta zu Lime. Übrigens hat Tailwind v4 in der Beta erst Oklch statt sRGB verwendet, sich im finalen Release aber für Oklab als sichereren Default entschieden
- Ich halte die Art, wie Browser Farben in sRGB interpolieren, eigentlich für einen Bug. sRGB ist eine logarithmisch skalierte Kodierung, daher sollte man laut Spezifikation Farbinterpolation nicht direkt in sRGB durchführen, sondern erst in lineares RGB umwandeln und dann interpolieren
- Der Artikel wurde inzwischen überarbeitet, also kann man meinen Kommentar ignorieren. Ich stimme aber weiterhin zu, dass Oklab-Interpolation der Default sein sollte. Im Artikel steht zu „besseren Gradients“ auch, dass der Hue-Wert in OKLCH kreisförmig ist und daher unerwartete Pfade entstehen können. Um solche Probleme zu vermeiden, verwenden viele Tools OKLAB, und Oklab liefert mit seinem geraden Pfad konsistente Ergebnisse
- Eigentlich erfüllt CIE LAB dieselbe Rolle und existiert bereits als Standard (CIE-LAB-Wikipedia)
  W3C-Prüfunterlagen
- Danke für die sehr hilfreiche Erklärung. Ich bin der Autor dieses Artikels. Ich werde den Text überarbeiten, damit er klarer wird
- Ein Gradient aus zwei Farben auf gegenüberliegenden Seiten des Spektrums ist ein ziemlich extremer Fall. Es gibt keine eindeutige richtige Darstellung, und ich glaube auch nicht, dass man in echtem Design oft solche Gradients braucht. Normalerweise wählt man bei einem Design ohnehin die Zwischenfarben direkt aus
Im Zusammenhang mit OKLCH hat mir oklch.com geholfen, ein Gefühl dafür zu bekommen. Man sollte aber beachten, dass sich der Hue-Wert von dem in HSL unterscheidet und dass das Chroma-Maximum je nach Hue und Lightness variiert. Das ist kein Bug, sondern spiegelt die Eigenschaften des menschlichen Sehens und von Displays wider. Anders als bei OKLCH ist das Maximum bei HSL immer konstant, dafür ist die Farbbedeutung nicht konsistent. Gut an CSS-OKLCH ist, dass man es in Formeln manipulieren kann. Zum Beispiel so: oklch(from var(--accent) calc(l + .1) c h). Um solche Formeln in der Praxis gut zu nutzen, braucht man aber Farbtheorie oder man muss testen. Ich dachte etwa, für Schatten müsse man nur die Lightness ändern, in der Praxis muss sich aber auch der Hue-Wert verschieben. Das bedeutet nicht, dass OKLCH-Gradients immer die beste Wahl sind. Bei ähnlichen Hue-Werten wirken Farben zwar gleichmäßiger, aber wenn man sich auch dafür interessiert, wie sich Licht physikalisch beim Mischen verändert, braucht man den XYZ-Farbraum. In dem Zusammenhang ist die MDN-Dokumentation zu color-mix nützlich. Übrigens kommt „ok“ tatsächlich einfach vom Wort OK. Der Name entstand daraus, dass das ältere LCH semantisch Probleme hatte, also eben nicht OK war
- Es wurde gesagt, dass Formeln in CSS-OKLCH praktisch sind, aber relative Farbmanipulationen lassen sich eigentlich in allen CSS-Farbräumen verwenden. Zum Beispiel: background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));
- Dank OKLCH und relativen Farben konnte ich die Zahl der im Stylesheet hartcodierten Farben stark reduzieren
  Beispiel für CSS-Variablen
Einige Kritikpunkte wurden schon genannt, aber als Einführung in OKLCH und seine Verwendung in CSS finde ich den Artikel ziemlich gut. Eine ergänzende Frage betrifft den Trend, in neueren Blogposts kein Datum mehr anzugeben. Gerade die Aussage „OKLCH ist ein neues Farbmodell“ wird meiner Meinung nach schnell veralten. Auf der Hauptseite steht nur „August 2025“, wodurch es fast so wirkt, als würde das Datum absichtlich weggelassen
Zugehörige Website
- Ich kann es nicht exakt begründen, aber ich halte undatierte Texte für ein ernstes Problem. Ob das gerade wirklich ein Trend ist, weiß ich nicht, aber ohne Datum kann man alte Beiträge leicht für aktuell halten. Manchmal schätze ich das Jahr eines Artikels anhand von Zeitstempeln in den Kommentaren, aber viele Blogs haben gar keine Kommentare mehr, und dann verliere ich die Lust, die Seite erneut zu besuchen. (Auf der Startseite des OP steht, er sei „nicht von Details besessen“, was ironisch wirkt, wenn man sich nur auf Designästhetik konzentriert und die Nutzbarkeit vergisst)
- Wenn ein Artikel kein Datum hat, schaue ich beim Abruf des HTML-Dokuments per HTTP auf den Last-Modified-Header. Aber oft kümmern sich Autoren auch darum nicht. Sie scheinen nicht zu verstehen, dass schon das Wort Blog ursprünglich von [web]-log kommt und Zeitstempel ein Kernelement sind. Zur Einordnung: Last-Modified gibt den Zeitpunkt der letzten Änderung an dieser Ressource, also des HTML, an. Wenn der Server kein korrektes Caching konfiguriert und das Backend die Seite bei jedem Request neu rendert, wird das Datum ständig aktualisiert
  Beispiel für dieses Problem
- Das dient vor allem SEO-Zwecken, damit alte Inhalte in Suchmaschinen nicht schlechter eingestuft werden. Ein wirklich lästiger Trick
- Wegen Google und SEO
Es hieß, OKLCH liefere im Vergleich zu HSL konsistentere Blautöne, aber tatsächlich verschiebt sich die Helligkeitsänderung in OKLCH stark in Richtung Grün. Eine konstante perzeptuelle Intensität ist sicher ein Vorteil, aber ich finde den behaupteten Effekt hier übertrieben
- Wenn man sich das Hue-Diagramm dieser Farbe ansieht, versteht man den Grund
  OKLCH-Farbdiagramm
  Hebt man die Helligkeit an, überschreitet man das Limit des Hue-Bands dieser Farbe, und wegen der Grenze für auf Displays darstellbares helles Blau verschiebt sich die Farbe Richtung Cyan. OKLCH hält beim Anpassen der Helligkeit in Gradients nicht den Hue-Wert konstant, sondern die Sättigung. Ob dieser Effekt gut aussieht, ist eine Frage des ästhetischen Geschmacks, aber nachdem im Web lange Farben mit konstantem Hue und entsättigteren Abstufungen üblich waren, ist es erfrischend, nun wählen zu können, welchen Kompromiss man bevorzugt
  Zugehörige Hacker-News-Diskussion
  In der Wissenschaft wurden kürzlich sogar noch tiefere blaue LEDs erfunden; vielleicht werden in 10 bis 20 Jahren Technologien Display P3 ablösen, mit denen sich genauere blaue Gradients ohne diesen Cyan-Shift darstellen lassen. Bis dahin gilt im Design wohl einfach: Was gut aussieht, ist richtig.
  Ich frage mich außerdem, ob man bei zukünftigen Farbraum-Designs nicht zwingend zwischen konstantem Hue und konstanter Sättigung binär wählen müsste, sondern bis an die Display-Grenzen konstante Sättigung beibehalten und am Grenzpunkt allmählich zu konstantem Hue übergehen könnte. Wegen der Beschränkungen von Farbprofilen (IDCv4) ist das aber sehr schwierig. Als experimentelles DisplayCAL-Target wäre es dennoch spannend
- Auf meinem Display sehe ich in dem Beispiel überhaupt keinen Grün-Shift. Vielleicht ist dein Bildschirm nicht richtig kalibriert?
- Stimme zu. Die Farbe kippt komplett von Blau zu Cyan. Wenn OKLCH korrekt implementiert ist, würde ich es nie verwenden wollen. In der Hue-Berechnung scheint etwas grundlegend schiefzulaufen. HSL/HSV haben zwar Probleme mit perzeptueller Lightness, aber der Hue-Wert selbst bleibt immer konstant und muss nicht korrigiert werden
- Ich kenne mich mit Farbwissenschaft nicht besonders gut aus und das ist vielleicht nur subjektiv, aber das rechte Ende der OKLCH-Farben wirkt auf mich im schlimmsten Fall blaugrün oder einfach hellblau. Dagegen sehen die beiden hellsten HSL-Farben für mich nicht mehr blau aus; die zweithellste eher hellviolett und die ganz rechte fast grau. In der Bildunterschrift hieß es, die dunkle Seite von HSL sei gräulich, aber tatsächlich wirken bei OKLCH und HSL beide ganz linken Farben blau. Wenn man mit dem macOS Digital Color Meter misst, haben das rechte OKLCH und das rechte HSL fast denselben Grünwert (226 bzw. 227, in sRGB 228 bzw. 227)
Ich empfehle zu diesem Thema einen besseren Artikel
OKLCH in CSS: Why quit RGB, HSL von Evil Martians
OKLCH-Konvertierungstool zum Ausprobieren
Frühere Hacker-News-Diskussion (vor 6 Monaten, 30 Kommentare)
OKLCH basiert auf OKLab, einem perzeptuell gleichmäßigen Farbraum, und ist ein Modell zur Steuerung von Lightness, Chroma und Hue. Das „OK“ im Namen stammt daher, dass der Erfinder sagte, es funktioniere „ganz okay“
- Ich vermute, dass das „OK“ in OKLCH in Wirklichkeit für „Ottossons kulör“ steht, also auf Schwedisch „Ottossons Farbe“. Es könnte aber auch sein, dass der Erfinder bescheiden einfach OK gesagt hat
Ich finde, bei Arbeit mit Farben sowie mit Text und Logos sollte man auch Kontrast und Lesbarkeit unbedingt berücksichtigen
APCA Contrast
- Die obige Website ist gut, wenn man den neueren Kontrastalgorithmus APCA verwenden will, also den offiziellen Algorithmus des noch nicht veröffentlichten WCAG-3-Standards. Derzeit orientieren sich aber viele Branchen noch an WCAG 2, deshalb sollte man auch rechtliche Anforderungen im Blick behalten.
  Kontrastprüfung (WCAG 2)
  Es gibt außerdem viele weitere Tools
In meinem Kopf wurde der Name OKLCH ganz natürlich als „Oklachroma“ gelesen
Es gibt einen ursprünglichen Blogpost, der den OKLab-Farbraum eingeführt hat; aus historischer Sicht ist er interessant
OKLab-Originalbeitrag
Ich frage mich, warum die Formel zur Umrechnung in den OKLCH-Farbraum nirgends dokumentiert ist. Wenn man googelt, findet man nur ein Gist[0] und zur Oklab-Farbe einen Wikipedia-Eintrag[1]
Beispiel für Umrechnungsformeln in einem Gist
Oklab auf Wikipedia
- Der Kern der Umrechnung steckt in der Matrix zwischen Oklab und sRGB. Die Umrechnung zwischen OKLab und OKLCH selbst ist nur eine Koordinatentransformation und steht auch bei Wikipedia
- OKLCH und OKLab sind derselbe Farbraum. Nur die Darstellung ist unterschiedlich: kartesische Koordinaten (OKLab) versus Polarkoordinaten (OKLCH)