# OKLCH erklärt: wahrnehmungsgerechte Farbe für Designer [Canonical HTML page](https://gradiently.design/de/guide/oklch-explained) HSL versprach lesbare Farbwerte und hielt es fast. OKLCH behält den lesbaren Teil und korrigiert die Lüge über die Helligkeit, und deshalb wechseln Designsysteme dorthin. ## The short version - OKLCH beschreibt eine Farbe mit drei Werten: wahrgenommene Helligkeit (L), Chroma oder Buntheit (C) und Farbtonwinkel (H). - Anders als bei HSL entspricht die Helligkeit in OKLCH dem, wie hell Farben für Menschen aussehen, sodass zwei Farben mit gleichem L einen ähnlichen Kontrast zu Weiß haben. - In CSS schreibt man `oklch(60% 0.2 293)`, optional mit Alpha nach einem Schrägstrich, und alle aktuellen großen Browser unterstützen es. - Chroma hat kein festes Maximum: Wie viel Farbe möglich ist, hängt von Helligkeit, Farbton und Bildschirm ab, und Farben außerhalb des Bildschirmumfangs werden zurück hineingerechnet. - Verläufe in OKLCH oder OKLab zu interpolieren vermeidet die graue, schlammige Mitte, die Mischungen in sRGB zwischen weit entfernten Farbtönen erzeugen. **OKLCH** ist eine Schreibweise für Farbe als Helligkeit, Chroma und Farbton, wobei die Helligkeit so gemessen wird, wie das menschliche Auge sie wahrnimmt. In CSS ist `oklch(60% 0.2 293)` ein Violett, das 60 % des Weges von Schwarz zu Weiß hell wirkt, mit kräftiger Farbe, bei einem Farbtonwinkel von 293 Grad. Der praktische Gewinn für Designer ist einfach: Ändere den Farbton, lass L gleich, und die neue Farbe wirkt genauso hell. HSL kann das nicht versprechen, und genau deshalb ist OKLCH in neueren Designsystemen zum Standard geworden, auch in der Farbpalette von Tailwind. ## Helligkeit, Chroma und Farbton | Buchstabe | Name | Bereich | Was er steuert | | --- | --- | --- | --- | | L | Helligkeit | 0 % bis 100 % (oder 0 bis 1) | Wie hell die Farbe wirkt, so wie das Auge urteilt | | C | Chroma | Ab 0 aufwärts, selten über 0,37 | Wie viel Farbe: 0 ist Grau, höher ist leuchtender | | H | Farbton | 0 bis 360 Grad | Welche Farbe: etwa 30 Rot, 110 Gelb, 140 Grün, 265 Blau | | / A | Alpha | 0 bis 1 oder 0 % bis 100 % | Deckkraft, optional | Die Farbtonwinkel in OKLCH stimmen nicht mit denen von HSL überein. Reines Blau liegt hier bei etwa 264, nicht bei 240. Die **Helligkeit** ist der Star. Sie stammt aus OKLab, einem 2020 veröffentlichten Farbraum, der gebaut wurde, um wahrgenommene Helligkeit, Buntheit und Farbton gleichmäßiger vorherzusagen als ältere Modelle. **Chroma** ersetzt die Sättigung: Statt eines Prozentsatzes von irgendeinem Maximum ist es eine absolute Farbmenge, ein Chroma von 0,1 bedeutet also unabhängig vom Farbton dieselbe sichtbare Intensität. Der **Farbton** ist weiterhin ein Winkel, aber die Winkel sind so verteilt, dass ein Schritt von 30 Grad rundherum wie eine ähnliche Veränderung aussieht. ## OKLCH oder HSL: dieselbe Helligkeit im direkten Vergleich Nimm sechs Farbtöne und halte Helligkeit und Chroma bei `oklch(65% 0.11 H)` fest. Die Farbfelder unten wirken wie eine Familie, und ihr Kontrast zu Weiß bleibt zwischen 3,1:1 und 3,4:1. Mach dasselbe in [HSL](https://gradiently.design/de/guide/hsl-colors) bei 50 % Helligkeit, und der Kontrast zu Weiß schwankt von etwa 1,07:1 bei Gelb bis 8,6:1 bei Blau. - H 30 #c97466: #c97466 - H 90 #a98c35: #a98c35 - H 150 #5aa26b: #5aa26b - H 210 #11a1b4: #11a1b4 - H 270 #758bd3: #758bd3 - H 330 #b576af: #b576af `oklch(65% 0.11 H)` bei sechs Farbtönen. Gleiche Helligkeit, gleiches Chroma, und so sehen sie auch wirklich aus. Diese Gleichmäßigkeit macht OKLCH für echte Arbeit nützlich. Ein Set aus Statusfarben, Diagrammreihen oder Kategorie Tags kann ein L und ein C teilen und sich nur im Farbton unterscheiden, und keine Farbe schreit lauter als die anderen. Brauchst du dann ein Set, das auch bei Farbenblindheit funktioniert, variierst du zusätzlich L; das behandelt [farbenblindfreundliche Paletten](https://gradiently.design/de/guide/color-blindness-design). ## So schreibst du OKLCH in CSS ```css :root { /* lightness as a percentage or a number */ --violet: oklch(60% 0.2 293); --violet-same: oklch(0.6 0.2 293); /* with transparency */ --violet-soft: oklch(60% 0.2 293 / 0.4); /* grey: chroma 0, hue ignored */ --grey: oklch(60% 0 0); } /* a fallback for very old browsers comes first */ .button { background: #8860ea; background: oklch(60% 0.2 293); } ``` `oklch(60% 0.2 293)` liegt in sRGB nah bei #8860ea. Aktuelle Versionen von Chrome, Edge, Firefox und Safari unterstützen alle oklch(). Die Browserunterstützung ist breit, die Details kannst du auf [caniuse](https://caniuse.com/mdn-css_types_color_oklch) prüfen. Um Werte visuell zu erkunden, ist [oklch.com](https://oklch.com) ein Farbwähler, der zeigt, welche Kombinationen ein normaler Bildschirm darstellen kann. Um einen bestehenden Hex Wert deiner Marke umzurechnen, füg ihn in diesen Farbwähler ein oder in das Farbpanel der Entwicklertools deines Browsers, das jede Farbe in OKLCH anzeigen kann. ## Eine Skala mit OKLCH bauen Für eine Skala aus Aufhellungen und Abdunklungen stufst du die Helligkeit gleichmäßig ab und lässt das Chroma zur Mitte hin steigen und zu den Enden hin fallen. Sehr helle und sehr dunkle Farben können physikalisch nicht viel Farbe halten; hältst du das Chroma an den Enden hoch, muss der Browser sie beschneiden. Hier ist eine violette Skala, die so gebaut ist. - L 97 C .015: #f5f3ff - L 90 C .05: #dfd9fd - L 80 C .10: #c0b2f9 - L 70 C .17: #a486fd - L 60 C .22: #8a5af4 - L 50 C .22: #6e37d2 - L 40 C .18: #50249d - L 30 C .12: #331b63 - L 20 C .07: #180d32 Durchgehend Farbton 293. Jede Stufe ist ein ähnlicher sichtbarer Sprung, was Skalen in HSL selten schaffen. Weil L der wahrgenommenen Helligkeit folgt, kannst du grobe Kontrastentscheidungen allein anhand der Zahlen treffen. In dieser Skala erreicht weißer Text ab L 50 abwärts 4,5:1, schwarzer Text ab L 60 aufwärts. Prüf immer mit einem [Kontrastprüfer](https://gradiently.design/de/guide/color-contrast-accessibility) nach, aber du wirst selten überrascht. Wie du eine solche Skala in benannte Tokens verwandelst, behandelt [Design Tokens](https://gradiently.design/de/guide/design-tokens). ## Gamut: wenn eine Farbe auf dem Bildschirm nicht existiert OKLCH kann Farben beschreiben, die kein Bildschirm zeigen kann. Die meisten Monitore zeigen sRGB; viele aktuelle Handys und Laptops zeigen das größere Display P3. Treib das Chroma hoch genug, und du verlässt beide. Dann rechnet der Browser die Farbe auf die nächstgelegene zurück, die der Bildschirm darstellen kann, es geht also nichts kaputt, aber du bekommst vielleicht nicht, was du eingetippt hast. ### Vermeiden - Hohes Chroma bei sehr hellem oder sehr dunklem L - P3 Werte in einen Markenleitfaden für den Druck kopieren - Annehmen, dass eine leuchtende OKLCH Farbe auf jedem Bildschirm gleich aussieht - Chroma über etwa 0,2 für große Hintergrundflächen ### Machen - Werte in einem Farbwähler prüfen, der die Grenze von sRGB markiert - Für Markenfarben einen Hex Fallback behalten - Chroma zu den Enden einer Skala hin senken - Die leuchtendsten Farben für kleine Akzente aufheben ## Verläufe in OKLCH Bei Verläufen zahlt sich wahrnehmungsgerechte Farbe am sichtbarsten aus. Ein einfacher CSS Verlauf mischt in sRGB, und das sackt zwischen weit entfernten Farbtönen ins Graue ab. Modernes CSS lässt dich den Farbraum für die Mischung wählen, und OKLab oder OKLCH halten die Mitte hell und sauber. - In sRGB gemischt: graue Mitte: `linear-gradient(90deg in srgb, #2563eb, #facc15)` - In OKLab gemischt: sauber: `linear-gradient(90deg in oklab, #2563eb, #facc15)` - In OKLCH gemischt: über Grün: `linear-gradient(90deg in oklch, #2563eb, #facc15)` Dieselben zwei Farben auf drei Arten. OKLCH wandert um den Farbkreis und kann so durch Farbtöne gehen, die keines der beiden Enden enthält. OKLab mischt auf gerader Linie und passt zu den meisten Verläufen mit zwei Farben. OKLCH dreht den Farbton, was für Sonnenuntergänge und Regenbögen wunderbar ist, dich aber überraschen kann. Die vollständige Technik, einschließlich der Schlüsselwörter `shorter hue` und `longer hue`, steht in [CSS Verläufe in OKLCH](https://gradiently.design/de/guide/css-gradient-oklch), die Theorie dahinter in [Interpolation von Verläufen](https://gradiently.design/de/guide/gradient-interpolation). Die Marks von Gradiently werden live gerendert statt als CSS geschrieben, und jeder trägt seine eigene Palette: Die Automatische Farbe wählt für jede Zeile helle oder dunkle Schrift aus dieser Palette, sodass die Worte lesbar sind, ohne dass du Zahlen prüfst. Wenn du lieber mit einem fertigen lebendigen Hintergrund beginnst als mit einem Wert in einem Farbwähler, durchsuche den Markt nach Farbwörtern. ## FAQ ### Was ist OKLCH? OKLCH ist ein Farbformat auf Basis des Farbraums OKLab. Es beschreibt Farben über wahrgenommene Helligkeit, Chroma und Farbton, sodass gleiche Werte gleich hell und gleich leuchtend wirken. ### Ist OKLCH besser als HSL? Für Paletten, Skalen und Verläufe ja, weil seine Helligkeit dem entspricht, was das Auge sieht. Für schnelle Änderungen von Hand ist HSL weiterhin in Ordnung. ### Kann ich oklch() heute in CSS verwenden? Ja. Aktuelle Versionen von Chrome, Edge, Firefox und Safari unterstützen es. Setz einen Hex Fallback davor, wenn du sehr alte Browser unterstützen musst. ### Was ist das maximale Chroma in OKLCH? Es gibt kein festes Maximum. Das mögliche Chroma hängt von Helligkeit, Farbton und Bildschirm ab; in sRGB liegen die meisten Farbtöne deutlich unter 0,37. ### Wie wandle ich Hex in OKLCH um? Füg den Hex Wert in einen OKLCH Farbwähler wie oklch.com ein oder in das Farbpanel der Entwicklertools deines Browsers, das dieselbe Farbe in OKLCH anzeigen kann.