Color-Picker mit OKLCH-Werten

Was macht der Color-Picker?

Der Picker stellt eine Farbe in fünf Modellen gleichzeitig dar — HEX, RGB, HSL, HSB und OKLCH — und liefert daneben sofort sechs Code-Snippets für CSS, Tailwind v4, SwiftUI, Flutter und Figma. Die OKLCH-Slider sind das Herzstück: Helligkeit, Chroma und Hue stehen unabhängig voneinander, weil die Achsen wahrnehmungsgleich sind. Das macht den Picker für Design-System-Arbeit besser geeignet als ein klassischer HSL-Slider.

Pure-client. Jeder Wert bleibt in deinem Browser. Kein Server, kein Tracking, keine Cookie-Wall. Recent-Farben halten sich nur in der laufenden Sitzung — beim Neuladen ist die Reihe leer.

Warum OKLCH zuerst?

In HSL wirkt eine grelle gelb-grüne Farbe heller als ein dunkles Lila, obwohl beide laut L denselben Wert haben. Das liegt daran, dass HSL die Helligkeit linear aus RGB rechnet — was nicht entspricht, wie das menschliche Auge Licht wahrnimmt. OKLCH löst dieses Problem, weil es im perzeptuellen Oklab-Raum operiert: gleicher L-Wert bedeutet gleiche wahrgenommene Helligkeit, egal ob die Farbe grün, blau oder rot ist.

Für Design-Systeme heißt das: eine Farbpalette mit konstanter Helligkeit und variierendem Hue funktioniert in OKLCH ohne Nachjustieren. In HSL muss man die Helligkeit pro Hue korrigieren, sonst springen die Akzente.

P3- und Rec2020-Gamut-Warnung

OKLCH kann Farben beschreiben, die der sRGB-Farbraum nicht darstellen kann. Auf einem modernen P3-Display — alle Apple-Geräte ab 2015, viele Android-Smartphones, moderne Designer-Monitore — sind diese Farben sichtbar. Auf einem Standard-sRGB-Monitor werden sie geclampt. Der Picker erkennt diese Situation automatisch und blendet eine kleine „Außerhalb sRGB”-Warnung ein, sobald die gewählte OKLCH-Kombination das sRGB-Dreieck verlässt. So weißt du, dass deine Empfänger die Farbe je nach Monitor unterschiedlich sehen werden.

Wie funktionieren EyeDropper und Pixel-Pick aus Bildern?

Der EyeDropper-Button öffnet die Browser-eigene Bildschirm-Pipette: ein Klick irgendwo auf dem Bildschirm übernimmt die Pixel-Farbe. Verfügbar in Chrome ab Version 95 und Edge ab 95. In Firefox und Safari fehlt die API noch — das Tool zeigt dann einen Hinweis und blendet den Button aus, statt einen Fehler zu produzieren.

Als browserübergreifende Alternative gibt es den Bild-Pick: ein Bild per Drag-and-Drop hineinziehen oder per Klick öffnen, dann einen einzelnen Pixel im Bild anklicken. Die Pipette liest die RGB-Werte über das <canvas>-Element direkt aus dem Bild — alles im Browser, keine Übertragung an einen Server. Funktioniert mit jedem Format, das der Browser dekodiert: JPG, PNG, WebP, GIF, SVG, AVIF.

Warum Dual-Kontrast aus WCAG 2.2 und APCA?

Eine Farbe ist nie isoliert lesbar — sie steht immer auf einem Hintergrund. Der Picker zeigt Kontrast deshalb gegen einen hellen und einen dunklen Referenz-Hintergrund parallel. So siehst du auf einen Blick, ob die Farbe für ein Light-Mode-UI taugt, für ein Dark-Mode-UI oder für beide.

WCAG 2.2

Das Web Content Accessibility Guidelines-Verhältnis ist die rechtlich verbindliche Referenz nach BFSG und European Accessibility Act. Schwellen:

• 3.0 — Großer Text (≥18 pt oder ≥14 pt fett)
• 4.5 — Fließtext (AA)
• 7.0 — Fließtext (AAA, höchste Stufe)

WCAG misst Kontrast als Verhältnis der relativen Luminanzen, kennt aber keine Polarität — der Wert ist symmetrisch zwischen Vordergrund und Hintergrund.

APCA Lc

Der Accessible Perceptual Contrast Algorithm von Andrew Somers wurde für WCAG 3 vorgeschlagen, weil er Kontrast perzeptueller modelliert. APCA-Werte sind signiert: positiv bedeutet dunkler Text auf hellem Grund, negativ andersherum. Faustregeln aus der APCA-W3-Empfehlung:

• Lc 75+ — kleiner Fließtext (etwa 14 pt)
• Lc 60+ — größerer Fließtext
• Lc 45+ — Hervorhebungen und Icons
• Lc 15+ — UI-Komponenten und Trennlinien

Werte unter 15 sind praktisch nicht lesbar. Die Skala reicht von etwa −108 (Weiß auf Schwarz) bis +108 (Schwarz auf Weiß).

WCAG und APCA gleichzeitig zu sehen hilft, Grenzfälle einzuordnen — manche Farben bestehen WCAG knapp, scheitern aber an APCA und umgekehrt. Bei einer Light-Mode-Marke, die WCAG-AA gerade so erreicht, lohnt der Blick auf den APCA-Wert.

Was zeigt die Farbsehschwäche-Vorschau?

Etwa 8 % aller Männer und 0,4 % aller Frauen in Mitteleuropa haben eine Form von Farbsehschwäche. Die häufigste ist Deuteranopie (Grün-Schwäche), gefolgt von Protanopie (Rot-Schwäche). Tritanopie (Blau-Schwäche) ist sehr selten. Der Picker rechnet die gewählte Farbe nach der Methode von Machado, Oliveira und Fernandes (2009) für alle drei Schwächen um — auf Basis ihres physiologischen Modells der Zapfen-Reaktion. Die ursprüngliche Theorie geht auf die Arbeit von Brettel, Viénot und Mollon (1997) zurück.

Wenn zwei UI-Farben in der Simulation identisch wirken, sind sie für die jeweilige Schwäche nicht unterscheidbar. Ampel-Rot und Ampel-Grün sehen für Deuteranopie beide gelblich-olive aus — das ist der klassische Grund, weshalb gute Status-Karten zusätzlich ein Icon oder ein Label tragen.

Welche Code-Snippets liefert der Picker?

Ein Klick liefert die gewählte Farbe in dem Format, das dein nächster Schritt verlangt:

• CSS-Variable — --brand: #1A8FE6; für ein eigenes Stylesheet oder eine tokens.css.
• Tailwind v4 arbitrary — bg-[oklch(60%_0.18_240)] für einmalige Anwendung im Markup.
• Tailwind v4 @theme — Ein @theme { --color-brand: ...; }-Block für ein Design-Token.
• SwiftUI — Color(red:, green:, blue:) mit 0..1-Werten für iOS / macOS-Apps.
• Flutter — Color.fromRGBO(26, 143, 230, 1.0) für Dart-Code.
• Figma-HEX — 1A8FE6 ohne führendes #, wie Figma im Color-Picker-Eingabefeld erwartet.

Wo bleiben Recent-Farben gespeichert?

Bis zu acht zuletzt gewählte Farben halten sich als kleine Reihe für die laufende Browser-Sitzung — ohne localStorage, ohne Cookies, ohne Server. Beim Neuladen ist die Reihe leer. Das ist eine bewusste Entscheidung: kein Browser-Storage heißt auch keine DSGVO-Pflicht, keine Cookie-Wall, keine Datenschutzerklärung-Lücke. Wer ein Set sichern will, kopiert die Code-Snippets in eine Notiz oder ein Stylesheet. Wer eine einzelne Farbe teilen will, nutzt den Share-Link mit OKLCH im URL-Hash — #oklch=62.80_0.258_29.23 rekonstruiert die Farbe beim Öffnen.

Wie sind Tastatur, Touch und Eingabe-Toleranz geregelt?

Jeder Slider akzeptiert Pfeiltasten für Schritte von einem Prozent oder einem Grad — gut für feines Nachjustieren. Tab springt sauber durch die Reihenfolge OKLCH → HEX-Eingabe → EyeDropper → Bild → Snippets → Kontrast → Vorschau, sodass das Tool ohne Maus benutzbar bleibt. Touch-Targets sind durchgehend mindestens 44 × 44 Pixel groß, um WCAG 2.5.5 zu erfüllen.

Das HEX-Eingabefeld toleriert sowohl mit als auch ohne führendes #, sowohl Großbuchstaben als auch Kleinbuchstaben, und kann 3-, 4-, 6- oder 8-stellige Werte verarbeiten — der Konverter expandiert #FA0 automatisch zu #FFAA00. Sobald die Eingabe parsebar ist, springen die OKLCH-Slider synchron auf den passenden Wert, und die Recent-Reihe nimmt die Farbe auf.

Welche Tools sind verwandt?

Weitere Tools aus dem kittokit-Ökosystem, die zum Thema passen:

• HEX zu RGB Konverter — Einzelne Farben zwischen HEX, RGB, HSL und OKLCH umrechnen, ohne Picker-Oberfläche.
• Kontrast-Prüfer — Zwei konkrete Farben gegen WCAG-Schwellen prüfen, mit Side-by-Side-Vorschau.
• CSS-Gradient-Generator — Verläufe mit OKLCH-Stopps in der wahrnehmungsgleichen Interpolation bauen.
• Box-Shadow-Generator — Mehrlagige Schatten mit OKLCH-Farb-Eingabe und Material-Elevation-Presets.