Visuell wählen oder einen beliebigen Wert einfügen — HEX, RGB, HSL, OKLCH und OKLAB bleiben synchron. Inklusive WCAG 2.2 Kontrastprüfer und OKLCH-basiertem Palettengenerator. Läuft vollständig in deinem Browser.
Visuell wählen oder einen beliebigen Wert einfügen — HEX, RGB, HSL, OKLCH und OKLAB bleiben synchron. Inklusive WCAG 2.2 Kontrastprüfer und OKLCH-basiertem Palettengenerator. Läuft vollständig in deinem Browser.
Füge deinen HEX-Wert (z. B. #ff5722) in das HEX-Feld ein — die RGB-Zeile wird sofort aktualisiert. Ebenso füge rgb(255 87 34) in das RGB-Feld ein, und HEX, HSL, OKLCH und OKLAB werden alle synchronisiert. Die Konvertierung ist bidirektional über alle unterstützten Formate hinweg.
OKLCH ist ein Farbraum aus CSS Color Module Level 4, der wahrnehmungsbasierte Helligkeit (L), Chroma (C) und Farbton (h) verwendet — wie HSL, aber wahrnehmungsmäßig gleichförmig. Zwei OKLCH-Farben mit demselben L-Wert wirken gleich hell, auch bei unterschiedlichen Farbtönen. Das macht Design-Tokens, generierte Paletten und barrierefreie Farbverläufe deutlich vorhersagbarer als HSL. Alle aktuellen Browser (Chrome 111+, Safari 15.4+, Firefox 113+) unterstützen es.
Farbwerte verlassen dein Gerät nie. Öffne DevTools → Network, und du wirst null ausgehende Anfragen während Konvertierung, Auswahl, Palettengenerierung oder Kontrastprüfung sehen.
Von Designsystemen bis zu Barrierefreiheits-Audits — jedes Format und jede Prüfung, die du brauchst, an einem Ort.
Beidseitige Konvertierung zwischen HEX (3 / 4 / 6 / 8 Stellen), RGB(A), HSL(A), OKLCH, OKLAB und benannten CSS-Farben. Die Ausgabe entspricht der Syntax von CSS Color Module Level 4 — füge sie direkt in deine Stylesheets ein.
Sieh das Kontrastverhältnis zwischen zwei beliebigen Farben mit Ein-Klick-Bestanden/Nicht-bestanden-Badges für AA (4.5 : 1) und AAA (7 : 1), bei normaler und großer Textgröße. Die Berechnung entspricht der W3C-Referenz: sRGB-Linearisierung, relative Luminanz, dann (L1+0.05)/(L2+0.05).
Klicke auf den EyeDropper, um eine beliebige Farbe auf deinem Bildschirm aufzunehmen — Designs, Screenshots, Fotos, sogar andere Browser-Tabs. Verwendet die native EyeDropper API in Chromium-Browsern.
Erzeuge 9-stufige Tönungen und Schattierungen plus komplementäre, triadische und analoge Harmonien — abgeleitet in OKLCH, sodass jeder Schritt wahrnehmungsmäßig gleichmäßig verteilt ist (im Gegensatz zu HSL, wo die Helligkeit stark schwankt).
Jede Konvertierung läuft in JavaScript auf deinem Gerät. Nichts wird hochgeladen, protokolliert oder an Dritte gesendet — öffne DevTools → Network, wenn du es selbst überprüfen willst.
Reines JavaScript, keine Framework-Runtime. Der Kaltstart liegt unter 50 KB gzipped; Konvertierungen und Palettengenerierung sind in unter einer Millisekunde auf einem fünf Jahre alten Laptop fertig.
Vier Wege zum Start, jedes Format synchron.
Ziehe innerhalb des Sättigungs-/Helligkeits-Quadrats, um den Farbton zu wählen, schiebe die Hue-Leiste darunter, um die Grundfarbe zu ändern, und nutze den Alpha-Schieber für Transparenz. Jedes Format auf der rechten Seite wird sofort aktualisiert.
Füge einen HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) oder sogar eine benannte CSS-Farbe (tomato) in das passende Eingabefeld ein — der Picker und die anderen Formate synchronisieren sich alle.
Klicke auf die EyeDropper-Schaltfläche, um einen beliebigen Pixel auf deinem Bildschirm zu erfassen — einen anderen Tab, einen Screenshot, ein Foto, ein Symbol. Verwendet die native EyeDropper API in Chrome, Edge und Opera.
Klicke auf das Kopier-Symbol neben einem Format, um es in deine Zwischenablage zu legen. Oder scrolle zum WCAG 2.2 Kontrastbereich, um zu prüfen, ob deine Vordergrund-/Hintergrund-Kombination AA oder AAA bei normaler und großer Textgröße besteht.
Ein Farbwerkzeug, das in vier gängige Workflows passt.
Konvertiere Marken-HEX-Werte in OKLCH, sodass jede Stufe in deinem Token-Verlauf den gleichen wahrnehmungsbasierten Helligkeitsschritt hat. Füge die OKLCH-Ausgabe direkt in dein CSS ein — kein Präprozessor erforderlich.
Gib Vordergrund-/Hintergrund-Paare ein und lese das Kontrastverhältnis sowie AA-/AAA-Badges ab. Erkenne fehlerhafte Kombinationen, bevor sie ausgeliefert werden — entspricht den vom W3C vorgeschriebenen Schwellen 4.5 : 1 normal / 7 : 1 erweitert.
Hast du einen HEX aus einem Designer-Mockup, brauchst aber einen HSL für eine Tailwind-Konfiguration oder einen OKLCH für ein modernes Stylesheet? Einmal einfügen, in jedem Format kopieren. Die Ausgabe-Strings sind gültige CSS Color Module Level 4 Syntax.
Wähle eine Grundfarbe und sieh sofort neun wahrnehmungsmäßig verteilte Tönungen und Schattierungen plus komplementäre, triadische und analoge Harmonien — generiert in OKLCH, sodass jeder Schritt gleichmäßig hell wirkt.
Farbwerte verlassen dein Gerät nie. Öffne DevTools → Network, und du wirst null ausgehende Anfragen während Konvertierung, Auswahl, Palettengenerierung oder Kontrastprüfung sehen.
Handverlesene Tutorials für Designer, Entwickler und Barrierefreiheits-Teams.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Füge deinen HEX-Wert (z. B. #ff5722) in das HEX-Feld ein — die RGB-Zeile wird sofort aktualisiert. Ebenso füge rgb(255 87 34) in das RGB-Feld ein, und HEX, HSL, OKLCH und OKLAB werden alle synchronisiert. Die Konvertierung ist bidirektional über alle unterstützten Formate hinweg.
OKLCH ist ein Farbraum aus CSS Color Module Level 4, der wahrnehmungsbasierte Helligkeit (L), Chroma (C) und Farbton (h) verwendet — wie HSL, aber wahrnehmungsmäßig gleichförmig. Zwei OKLCH-Farben mit demselben L-Wert wirken gleich hell, auch bei unterschiedlichen Farbtönen. Das macht Design-Tokens, generierte Paletten und barrierefreie Farbverläufe deutlich vorhersagbarer als HSL. Alle aktuellen Browser (Chrome 111+, Safari 15.4+, Firefox 113+) unterstützen es.
Ja. Wir verwenden den Algorithmus aus WCAG 2.2 §1.4.3: jeden sRGB-Kanal linearisieren, relative Luminanz berechnen (0.2126·R + 0.7152·G + 0.0722·B), dann (L_heller + 0.05) / (L_dunkler + 0.05). AA besteht bei 4.5 : 1 für normalen Text und 3 : 1 für großen Text (18 pt+ oder 14 pt+ fett). AAA besteht bei 7 : 1 bzw. 4.5 : 1.
Ja — klicke auf die EyeDropper-Schaltfläche, um die im Browser eingebaute EyeDropper API zu starten. Du kannst jeden Pixel überall auf dem Bildschirm aufnehmen: einen anderen Browser-Tab, ein Figma-Design, ein Videobild, sogar einen Screenshot. Derzeit unterstützt in Chrome, Edge und Opera; Firefox und Safari fallen elegant zurück (die Schaltfläche ist deaktiviert).
Nein. Der Picker, jede Konvertierung, der Palettengenerator und der Kontrastprüfer laufen alle in deinem Browser. Es werden keine Farbwerte, Bildproben oder Texte übertragen. Du kannst DevTools → Network öffnen und überprüfen, dass während der Nutzung null ausgehende Anfragen erfolgen.