HEX in OKLCH
HEX in OKLCH umrechnen, kostenlos und online: Füge einen Hex-Code ein und du bekommst den oklch()-Wert für dein CSS. Aus #0F766E wird oklch(51.094% 0.08606 186.39). OKLCH ist der wahrnehmungsnahe Farbraum aus CSS Color 4, und Tailwind CSS 4 legt seine Palette darin fest. Die Seite nennt auch die nächste Tailwind-Farbe. Alles läuft in deinem Browser.
So rechnest du HEX in OKLCH um
- 1Füge deinen Hex-Code in „Farbe“ ein, mit oder ohne #
- 2Oder wähle eine Farbe mit dem Farbwähler neben dem Feld
- 3Klicke auf „Kopieren“ neben dem oklch()-Wert in der großen Zeile
- oklch(L C H), bereit für eine CSS-Variable
Gemacht für modernes CSS
- Geschrieben wie in CSS.Helligkeit in Prozent, Buntheit und Farbton als Zahlen, so passt es direkt ins Stylesheet
- Tailwind gleich daneben.Die Liste zeigt die nächste Farbe aus Tailwind 4 und Tailwind 3 und wie nah sie jeweils liegt
- Nichts wird gesendet.Dein Browser rechnet, auf deinem eigenen Gerät
Was du tun kannst
- Einen Hex-Code in oklch() umrechnen, mit der Helligkeit auf drei Nachkommastellen in Prozent, der Buntheit auf fünf und dem Farbton auf zwei
- Auch OKLab kopieren, denselben Farbraum mit a und b statt Buntheit und Farbton
- Statt eines Hex-Codes rgb(), hsl(), einen CSS-Namen oder einen Tailwind-Namen wie sky-500 einfügen
- HEX, RGB, HSL, Lab, LCH und XYZ derselben Farbe in einer Liste sehen
Gut zu wissen
- Jeder Hex-Code liegt in sRGB. Sein OKLCH-Wert ergibt zurückgerechnet also immer wieder denselben Hex-Code
- Die Buntheit in OKLCH ist klein: Farben in sRGB bleiben unter etwa 0.33, Grautöne liegen bei 0. Bei Grau wird der Farbton als 0 geschrieben
- OKLCH und LCH sind verschiedene Farbräume. Kopiere die Zeile OKLCH, nicht LCH, wenn dein CSS oklch() verwendet
Fragen
Wie rechne ich HEX in OKLCH um?
Füge den Hex-Code ins Feld ein. Die große Zeile zeigt sofort den oklch()-Wert, „Kopieren“ übernimmt ihn. #FFC61A ist zum Beispiel oklch(85.406% 0.17061 86.92).
Warum stellen so viele ihre Farben auf OKLCH um?
Die Helligkeit folgt dem, was das Auge sieht: Zwei Farben mit gleichem L wirken etwa gleich hell, egal welcher Farbton. So baust du Paletten, Hover-Zustände und Dark Modes leichter, indem du eine Zahl änderst.
Versteht jeder Browser oklch()?
Alle aktuellen großen Browser tun es. Für sehr alte Browser kannst du den Hex-Code als Ersatz behalten, und diese Seite gibt dir beides.
Wird meine Farbe an einen Server geschickt?
Nein. Die Umrechnung läuft in deinem Browser. Mit deiner Farbe wird keine Anfrage gestellt.
Weitere Tools in „Web & Code“
Diese Seite gibt es nicht. Such unten oder zieh eine Datei hierher, um das passende Werkzeug zu finden.
Eine Website für jede Dateiaufgabe. Welche ist deine?
Schluss mit dem Hin und Her zwischen Konverter-Websites. Wähle eines von 410+ Tools oder ein Rezept, das mehrere aneinanderreiht.
- Dateien bleiben auf deinem Gerät
- Kein Wasserzeichen
- Funktioniert offline
Datei hierher ziehen
Eine eingefügte Datei geht auch.
oder such ein Tool
Eine App öffnen
Von „uff, diese Datei“ zu erledigt, in drei Schritten.
- Zieh sie rein oder wähl eine Aufgabe
Keine Datei? Such, was du brauchst. Dateien werden auf deinem Gerät verarbeitet, nicht zur Verarbeitung hochgeladen.
- Wähl, was du willst
Kleiner, ein anderes Format, unterschrieben, zusammengefügt. Ein Klick, ohne erst Einstellungen zu studieren.
- Mach ein Rezept daraus
Jede Woche dieselben drei Schritte? Reih sie einmal aneinander und lass beim nächsten Mal dasselbe Rezept laufen.
Ein freigegebener Werkzeugkasten für das ganze Team.
Ob im Büro, auf der Baustelle oder in der Agentur: Teams arbeiten den ganzen Tag mit vertraulichen Dateien. ToolRecipe gibt allen dieselben Werkzeuge und dieselben Rezepte, und die Dateien werden auf dem eigenen Computer jeder Person verarbeitet.
- Dateien werden auf dem Gerät der Mitarbeitenden verarbeitet
- Firmenrezepte, die alle gleich ausführen
- Ein Ort statt zehn Konverter-Seiten