ColorPicker rechnet Farben in alle gängigen Formate um und zeigt alle Werte, die Entwickler brauchen: Kontrastverhältnisse, WCAG-Stufen, relative Leuchtdichte, CSS-Farbnamen und kopierfertigen Code. Alles läuft im Browser - es werden keine Daten an einen Server gesendet.
Im Quadrat wählst du Sättigung und Helligkeit, im Farbton-Slider die Farbfamilie und im Alpha-Slider die Transparenz. Ein Klick auf eine Vorschau, Vorlage oder zuletzt verwendete Farbe lädt sie. Der kleine Farbknopf neben dem Eingabefeld öffnet die Systemauswahl des Betriebssystems.
Das Textfeld versteht #4f8cff, #4f8c, #4f8cff80, rgb(79, 140, 255), rgba(79, 140, 255, 0.5), hsl(217, 100%, 65%), hsv(...), hwb(...), cmyk(...), lab(...), lch(...), oklab(...), oklch(...) sowie alle CSS-Farbnamen wie rebeccapurple. Kurzes HEX mit drei oder vier Stellen funktioniert ebenfalls.
Die Tabelle Formate listet die Farbe als HEX, HEXA, RGB(A), HSL(A), HSV, HWB, CMYK, LAB, LCH, OKLAB, OKLCH sowie als Code-Schnipsel für Tailwind, Swift und Android. Jede Zeile hat einen Kopier-Knopf, Alles kopieren legt die ganze Liste in die Zwischenablage.
Der Abschnitt Kontrast zeigt das WCAG-2.2-Verhältnis zu reinem Weiß und reinem Schwarz, gekennzeichnet mit AAA (7:1), AA (4,5:1), AA18 (3:1, nur für große Schrift) oder fail. Die APCA-Werte (Lc) zeigen das modernere, wahrnehmungsbasierte Modell, das die alten Verhältnisse in WCAG 3 ablösen soll. Zudem nennt die App die beste lesbare Textfarbe zu Hintergründen.
Farbinformationen zeigt HSL, HSV, OKLCH, die relative Leuchtdichte in Prozent, den exakten CSS-Farbnamen, falls der Wert zu einem passt, sowie den nächstgelegenen benannten CSS-Farbwert inklusive Lab-Distanz.
Farbharmonien leitet komplementäre, triadische, analoge, split-komplementäre, tetradische und monochrome Varianten ab. Töne und Abstufungen bauen eine Helligkeitsrampe von 95% bis 0%, die Mischvarianten verrechnen die Farbe mit Weiß oder Schwarz. Jede Vorschau lässt sich anklicken und wird zur aktiven Farbe.