So nutzt du: HEX zu OKLCH Konverter
- Füge deine HEX-Farbe ein, zum Beispiel #2563eb.
- Passe Helligkeit, Chroma oder Farbton an, wenn du eine Variante möchtest.
- Kopiere den Wert
oklch()in dein CSS.
Warum HEX in OKLCH umwandeln?
HEX sagt dem Browser, welche Farbe angezeigt werden soll, lässt sich aber nur schwer von Hand anpassen. OKLCH zerlegt eine Farbe in Helligkeit, Chroma und Farbton, sodass du einen dunkleren Ton durch Ändern einer einzigen Zahl erzeugst. Farben mit gleicher Helligkeit wirken außerdem gleich hell, was dir hilft, konsistente Paletten zu bauen.
Neu bei diesem Format? Lies wie du OKLCH in CSS verwendest oder sieh dir im Vergleich OKLCH vs. HSL an.
Auch gesucht als: hex zu oklch, hex in oklch umwandeln, hex to oklch converter, oklch aus hex, hex oklch konverter, css farben umrechnen, oklch farbe berechnen.
Passende Tools zu: HEX zu OKLCH Konverter
- OKLCH Farbkonverter — Erkunde den wahrnehmungsgleichmäßigen OKLCH-Farbraum mit Live-Reglern, prüfe, ob eine Farbe in sRGB passt, und kopiere passende HEX-, RGB- und HSL-Fallbacks.
- OKLCH zu HEX Konverter — Füge einen oklch()-Wert ein und erhalte den passenden HEX-Wert sowie RGB und HSL.
- Farbmischer — Wähle zwei Farben und die Anzahl der Schritte, um gleichmäßig gemischte Übergangsfarben zu erhalten — ideal für Verläufe, Rahmen, Diagramme und Hover-Zustände.
- Tailwind-Farbgenerator — Füge eine Markenfarbe ein und erhalte eine ausgewogene 11-stufige Farbskala (50 bis 950), die in OKLCH integriert ist – mit Kontrasthinweisen und Exportmöglichkeiten für Tailwind v3, v4, CSS und SCSS.
Häufige Fragen
Ist die Umwandlung exakt?
Sehr genau. Die Werte werden für lesbares CSS gerundet, daher kann eine Farbe minimal und unsichtbar abweichen.
Unterstützen Browser OKLCH?
Ja. Alle gängigen modernen Browser unterstützen es. Sehr alte Browser brauchen einen HEX-Fallback.
Werden meine Daten hochgeladen?
Nein. Alles läuft direkt in deinem Browser.
Kann ich HEX zu OKLCH Konverter als Web-App installieren und offline nutzen?
Ja. HEX zu OKLCH Konverter ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.