OKLCH-Farbkonverter.

Gib eine Farbe als HEX, rgb(), hsl() oder oklch() ein und erhalte sie in allen vier Formaten, fertig zum Kopieren. Liegt eine OKLCH-Farbe außerhalb dessen, was sRGB-Bildschirme darstellen können, sagt dir die Seite das. Das Tool läuft in deinem Browser, und nichts, was du eingibst, wird hochgeladen.

Beliebige CSS-Farbe

Innerhalb des sRGB-Gamuts.

HEX: #3A81F6
RGB: rgb(58 129 246)
HSL: hsl(217 91% 60%)
OKLCH: oklch(0.62 0.19 260)

Läuft in deinem Browser. Nichts, was du hier hinzufügst, wird hochgeladen oder gespeichert.

So wandelst du eine Farbe in OKLCH um

Gib eine Farbe ein, in einer dieser Formen: HEX (#3B82F6, #38f oder ohne das #), rgb(59 130 246) oder rgb(59, 130, 246), hsl(217 91% 60%) oder oklch(0.62 0.19 260). Kommas sind optional, und Prozentwerte funktionieren, wo CSS sie erlaubt. Du kannst auch die Farbauswahl neben dem Feld nutzen, die es mit der Farbe als oklch()-Wert füllt. Die Seite startet mit oklch(0.62 0.19 260).
Lies die vier Formate ab: HEX, RGB, HSL und OKLCH, daneben ein Farbfeld mit der Farbe. Lässt sich das Feld nicht lesen, wird es rot, und die Seite nennt die Formen, die es akzeptiert.
Beachte die Gamut-Meldung unter dem Feld. Sie sagt entweder, dass die Farbe im sRGB-Gamut liegt, oder warnt, dass sie außerhalb liegt (mehr dazu unten).
Kopier das Format, das du brauchst, mit dem Button Kopieren.

Die Formate werden so geschrieben, wie aktuelles CSS und die Frameworks sie schreiben: rgb(59 130 246) mit Leerzeichen, hsl(217 91% 60%) in ganzen Zahlen und oklch(0.623 0.188 259.815) mit drei Nachkommastellen, wie shadcn/ui und Tailwind v4 ihre schreiben. Ein Grau hat weder Chroma noch Farbton, es kommt also als oklch(0.6 0 0) heraus.

Das Tool liest nur HEX, rgb(), hsl() und oklch(). CSS-Farbnamen wie red und andere Funktionen wie color(display-p3 …) werden nicht unterstützt, und ein Transparenzwert wie in rgb(59 130 246 / 50%) wird ignoriert.

Farben außerhalb von sRGB

OKLCH kann Farben beschreiben, die sRGB, der Farbraum hinter HEX, rgb() und hsl(), nicht darstellen kann. Probier oklch(0.7 0.4 150), ein sehr lebhaftes Grün: Die Seite warnt, dass es außerhalb des sRGB-Gamuts liegt, und die anderen Formate zeigen die nächstliegende Farbe, die sRGB darstellen kann, hier #00BE58. Diese Farbe entsteht, indem Helligkeit und Farbton beibehalten werden und das Chroma gesenkt wird, bis sie passt. Die OKLCH-Zeile und das Farbfeld verwenden weiterhin den OKLCH-Wert, den du eingegeben hast, ein Bildschirm mit großem Farbraum kann also mehr davon zeigen als der HEX-Code.

Eine Farbe, die du als HEX, rgb() oder hsl() eingibst, liegt immer innerhalb von sRGB und löst die Warnung daher nie aus.

Mit Codex verwenden

Codex übernimmt das Farbformat, das es sieht. In einem Tailwind-v4- oder shadcn/ui-Projekt ist das OKLCH. Gib ihm also den oklch()-Wert von dieser Seite statt eines HEX-Codes und bitte es, in diesem Format zu bleiben. Ein Vorteil von OKLCH: Codex kann jeweils nur eine Sache ändern. Senkt es nur die Helligkeit, ergibt das eine dunklere Abstufung derselben Farbe.

Farben in OKLCH halten

Unsere Markenfarbe ist [oklch(0.62 0.19 260)]. Setze in globals.css --primary auf diesen Wert. Erzeuge für die Zustände hover und active dunklere Varianten, indem du nur die Helligkeit um 0,05 und 0,1 senkst und Chroma und Farbton beibehältst. Schreibe jede Farbe wie in der übrigen Datei in oklch() und füge keine HEX- oder hsl()-Werte hinzu.

Häufige Fragen

Ist das Tool kostenlos?

Ja. Es ist kostenlos, braucht keine Anmeldung, und du kannst beliebig viele Farben umwandeln.

Wird das, was ich eingebe, hochgeladen?

Nein. Die Umrechnung passiert in deinem Browser, und nichts, was du eingibst, wird gesendet oder gespeichert. Die Website zählt nur, dass das Tool verwendet wurde, nie die Farben.

Wie rechnet das Tool um?

Es rechnet über lineares sRGB mit den OKLab-Formeln von Björn Ottosson und wandelt OKLab dann in OKLCH um, mit Chroma und Farbton. HEX, rgb() und hsl() werden als ganze Zahlen angezeigt, OKLCH mit drei Nachkommastellen. Wandelst du eine Farbe also in HEX und zurück, können sich die letzten Nachkommastellen ihres OKLCH-Werts ändern.

Warum verwenden shadcn/ui und Tailwind v4 OKLCH?

Die Standardpalette von Tailwind v4 ist in OKLCH geschrieben, und shadcn/ui hat die Variablen seines Themes von HSL auf OKLCH umgestellt, als es auf Tailwind v4 umgestiegen ist. Dafür gibt es drei Gründe. Die Helligkeit in OKLCH entspricht ziemlich genau dem, wie hell eine Farbe wirkt: Zwei Farben mit gleicher Helligkeit sehen gleich hell aus, was bei HSL nicht stimmt, denn ein Gelb und ein Blau bei 50 % HSL-Helligkeit sehen sehr verschieden aus. Außerdem wirkt der Farbton stabiler, wenn du Helligkeit oder Chroma änderst, sodass eine Reihe von Abstufungen von hell nach dunkel weiter wie eine Farbe aussieht. Und OKLCH kann Farben jenseits von sRGB beschreiben, für Bildschirme, die sie darstellen können, was HEX, rgb() und hsl() nicht können.