OKLCH-Farbkonverter

• Sofortige OKLCH-Konvertierung: Der OKLCH-Konverter aktualisiert alle Ausgabeformate bei jeder Schiebereglerbewegung – es muss kein Knopf gedrückt werden. Passen Sie Helligkeit, Chroma und Farbton an und erhalten Sie sofort HEX-, RGB-, HSL- und OKLab-Werte. Das Echtzeit-Farbfeld zeigt genau, wie die OKLCH-Farbe auf dem Bildschirm angezeigt wird.
• Wahrnehmungsmäßig einheitlicher Farbraum: OKLCH ist ein wahrnehmungsmäßig einheitlicher Farbraum – gleiche numerische Schritte entsprechen im Gegensatz zu HSL oder RGB gleichen wahrgenommenen Farbunterschieden. Der OKLCH-Konverter erleichtert die Arbeit mit diesem modernen CSS Color Level 4-Format für bessere Farbverläufe, Farbskalen und zugängliche Farboptionen.
• 100 % privat – kein Upload: Die gesamte Konvertierung erfolgt lokal in Ihrem Browser mit reinem JavaScript. Ihre Farbwerte verlassen niemals Ihr Gerät und werden niemals an einen Server gesendet – sicher für Kundenprojekte und proprietäre Designsysteme.
• Kostenlos und ohne Einschränkungen: Konvertieren Sie unbegrenzt OKLCH-Farben ohne Anmeldung, ohne Abonnement und ohne Nutzungsbeschränkungen. Der OKLCH-Konverter ist für immer völlig kostenlos, ohne dass Werbung die Schnittstelle blockiert. Beinhaltet Farbraumerkennung und Vorschläge für den nächstgelegenen Farbraum.

• Moderne CSS-Entwicklung: Frontend-Entwickler verwenden den OKLCH-Konverter, um Farben in modernem CSS zu erstellen und zu überprüfen. Da oklch() jetzt in allen gängigen Browsern unterstützt wird, hilft Ihnen der OKLCH-Konverter dabei, saubereren, besser wartbaren Farbcode unter Verwendung des wahrnehmungsmäßig einheitlichen Farbraums zu schreiben.
• Glatte Farbverlaufserstellung: OKLCH erzeugt deutlich glattere und visuell genauere Farbverläufe als sRGB oder HSL. Verwenden Sie den OKLCH-Konverter, um die richtigen Helligkeits-, Chroma- und Farbtonwerte für Farbverlaufsstopps zu finden, die einen natürlichen Übergang ohne verschwommene Mittelpunkte ermöglichen.
• Zugängliche Farbskalen: Barrierefreiheitsspezialisten verwenden den OKLCH-Konverter, da er aufgrund seiner Wahrnehmungseinheitlichkeit ideal für die Generierung barrierefreier Farbskalen geeignet ist. Gleiche Stufen in der OKLCH-Helligkeit entsprechen gleichen wahrgenommenen Kontraststufen, wodurch WCAG-konforme Farbverläufe viel einfacher zu erstellen sind.
• Designsystem-Farbtokens: Designsystemingenieure verwenden den OKLCH-Konverter, um Farbtokens auf wahrnehmungsbezogen sinnvolle Weise zu definieren. Der OKLCH-Farbraum erleichtert die Erstellung systematischer Farbskalen, bei denen jeder Schritt über alle Farbtöne hinweg ein einheitliches visuelles Gewicht hat.
• Farbwissenschaft und -forschung: Forscher und Farbwissenschaftler verwenden den OKLCH-Konverter, um den OKLab/OKLCH-Farbraum zu erkunden. Das Tool stellt neben den Standardausgabeformaten auch rohe OKLab-Werte bereit, was es für das Verständnis der Farbraummathematik und Wahrnehmungsmodelle nützlich macht.
• Migration von Legacy- auf modernes CSS: Wenn Sie Legacy-Hex- oder RGB()-Farbsysteme auf das moderne oklch() migrieren, verwenden Sie den OKLCH-Konverter, um zu verstehen, was die entsprechenden OKLCH-Werte sind. Dies hilft Ihnen, ein Gespür für den neuen Farbraum zu entwickeln und gleichzeitig die Syntax von CSS Color Level 4 schrittweise zu übernehmen.

OKLCH (Lightness-Chroma-Hue) ist ein moderner Farbraum, der 2020 von Björn Ottosson eingeführt wurde. Er ist Teil von CSS Color Level 4 und soll wahrnehmungsmäßig einheitlich sein – das bedeutet, dass gleiche numerische Änderungen der OKLCH-Werte gleiche wahrgenommene Farbunterschiede erzeugen. Dies ist eine deutliche Verbesserung gegenüber älteren Farbräumen wie HSL und sRGB, die wahrnehmungsmäßig nicht einheitlich sind und bei der Interpolation von Farben zu inkonsistenten visuellen Ergebnissen führen können.

Der OKLCH-Konverter unterstützt die vollständige OKLCH-Pipeline: Er konvertiert zwischen OKLCH, OKLab (dem zugrunde liegenden rechteckigen Koordinatenraum), linearem sRGB und Standard-sRGB-Formaten einschließlich HEX, RGB und HSL. Alle Konvertierungen verwenden die exakte Matrixmathematik von Ottosson ohne Näherungen.

1. Passen Sie die OKLCH-Schieberegler an: Stellen Sie Helligkeit (L: 0–1), Chroma (C: 0–0,4+) und Farbton (H: 0–360°) mithilfe der interaktiven Schieberegler oder numerischen Eingaben ein. Sie können auch auf einen beliebigen Beispielfarbchip klicken, um sofort einen voreingestellten OKLCH-Wert zu laden. Alpha-Transparenz wird für halbtransparente Farben unterstützt.
2. Die Konvertierung erfolgt in Echtzeit: Wenn Sie einen beliebigen Schieberegler anpassen, wird der OKLCH-Wert über OKLab in lineares sRGB und dann in die Formate HEX, RGB und HSL konvertiert. Alle Werte werden sofort aktualisiert, ohne dass eine Taste gedrückt werden muss. Das Farbfeld zeigt eine visuelle Vorschau der konvertierten Farbe.
3. Automatische Farbraumprüfung: Der OKLCH-Konverter erkennt automatisch, ob die Farbe außerhalb des sRGB-Farbraums liegt. Wenn dies der Fall ist, wird eine Warnung zusammen mit der nächstgelegenen Farbe im Farbraum angezeigt, die durch Reduzieren des Chromas bei konstanter Helligkeit und Farbton erreicht wird.
4. Beliebigen Wert kopieren: Klicken Sie auf die Schaltfläche „Kopieren“ neben einer beliebigen Ausgabezeile oder Formatkarte, um diesen bestimmten Wert zu kopieren, oder verwenden Sie „Alle Werte kopieren“, um die vollständigen Farbdaten einschließlich der rohen OKLab-Komponenten zu kopieren.

• Helligkeit (L): Bereich von 0 (schwarz) bis 1 (weiß). Im Gegensatz zur HSL-Helligkeit entspricht die OKLCH-Helligkeit weitgehend der menschlichen Wahrnehmung. Eine Helligkeit von 0,5 sieht optisch irgendwo zwischen Schwarz und Weiß aus, unabhängig vom Farbton oder der Farbsättigung.
• Chroma (C): Steuert die Farbintensität oder -sättigung. Die meisten sRGB-Farben haben Chromawerte zwischen 0 und 0,25, einige tiefe Lila- und Cyantöne können jedoch bis zu 0,3 erreichen. Werte über 0,3 liegen zunehmend außerhalb des sRGB-Farbraums. Das theoretische Maximum für OKLCH-Chroma ist unbegrenzt.
• Farbton (H): Der Farbwinkel von 0–360 Grad, entspricht den gleichen Farbtonwinkeln wie OKLab. 0° = rot/rosa, 90° = gelb, 180° = grün, 270° = blau. OKLCH-Farbtöne sind wahrnehmungsmäßig einheitlich – gleiche Winkelschritte führen zu gleichen wahrgenommenen Farbtonunterschieden.
• Alpha (A): Steuert die Transparenz von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig). Der Alphawert wird durch die Konvertierungspipeline an alle Ausgabeformate weitergeleitet, sodass Sie die resultierende Farbe in jedem CSS-Kontext verwenden können, der Transparenz erfordert.

OKLCH vs. HSL: HSL ist wahrnehmungsmäßig nicht einheitlich – zwei Farben mit der gleichen HSL-Helligkeit können in der Helligkeit dramatisch unterschiedlich aussehen (z. B. sieht Gelb bei L=50 % viel heller aus als Blau bei L=50 %). OKLCH behebt dieses grundlegende Problem. HSL erzeugt auch verschwommene Mittelpunkte bei der Interpolation zwischen zwei Farben, während OKLCH-Verläufe eine konsistente Sättigung und visuelle Qualität beibehalten.

OKLCH vs. LCH: LCH (CIE L*a*b*-basiert) ist in CSS schon länger verfügbar, weist jedoch einen erheblichen Fehler auf: Es kann bei der Messung der Farbtonlinearität ungültige Farben erzeugen. OKLCH wurde speziell entwickelt, um robuster zu sein und besser darzustellen, wie das menschliche visuelle System Farben wahrnimmt. Beide werden in modernem CSS unterstützt, aber OKLCH ist die empfohlene Wahl für neue Projekte.

OKLCH vs. sRGB: sRGB ist der Standardfarbraum für Webinhalte, ist jedoch geräteabhängig und nicht wahrnehmungsmäßig einheitlich. OKLCH ist ein geräteunabhängiger Farbraum, der Farben außerhalb des sRGB-Farbraums (Anzeigen mit großem Farbraum) darstellen kann. Der OKLCH-Konverter hilft Ihnen zu verstehen, wann Ihre Farben sRGB überschreiten, und zeigt Ihnen die nächstgelegene In-Gamut-Alternative.