Farbwähler

Geben Sie eine Farbe ein oder wählen Sie sie aus, lesen Sie sie in zwölf Schreibweisen ab, erstellen Sie eine Farbharmonie und eine Skala von 50 bis 900 und prüfen Sie den WCAG-Kontrast.

Farbe kopieren: So geht’s

1
Farbe wählen oder Wert einfügen
Geben Sie jede Schreibweise ein, die ein Browser versteht: einen Hex-Code, rgb(), hsl(), oklch() oder sogar einen CSS-Farbnamen. Das Textfeld ist hier das wichtigste Bedienelement; Farbfeld und Pipette sind nur Abkürzungen zum selben Wert.
2
In jedem Format kopieren
Alle zwölf Schreibweisen stehen gleichzeitig untereinander, jede mit einer eigenen Schaltfläche zum Kopieren. Nichts ist in einem Auswahlmenü versteckt, deshalb kostet die Umrechnung von HEX in RGB einen Klick statt drei.
3
Palette als CSS oder JSON exportieren
Die Grundfarbe, die zehnstufige Skala dazu und alle aus einem Bild übernommenen Farben werden gemeinsam exportiert: als CSS-Variablen (Custom Properties), Tailwind-Theme-Fragment, SCSS-Variablen oder reines JSON.

Warum hier in OKLCH gerechnet wird

HSL hat eine praktische Eigenschaft und einen ernsten Mangel. Praktisch ist, dass Farbton, Sättigung und Helligkeit getrennte Zahlen sind, mit denen man gut arbeiten kann. Der Mangel: Die Helligkeit in HSL ist nicht die Helligkeit, die Sie sehen. hsl(60 100% 50%) ist ein leuchtendes Gelb und hsl(240 100% 50%) ein dunkles Blau, obwohl beide fünfzig Prozent angeben. Deshalb entstehen beim Drehen des Farbtons in HSL Farbharmonien, in denen eine Farbe heraussticht und eine andere untergeht. OKLCH behebt das. Seine Helligkeit folgt der menschlichen Wahrnehmung: Ändert sich nur der Farbton, bleibt die Helligkeit tatsächlich gleich. Jede Farbharmonie und jede Skala auf dieser Seite wird in OKLCH berechnet und für die Ausgabe zurück in sRGB umgerechnet.

Was die Kontrastwerte bedeuten

Die WCAG drücken Kontrast als Verhältnis der relativen Leuchtdichte zweier Farben aus – von 1:1 bei identischen Farben bis 21:1 bei Schwarz auf Weiß. Fließtext braucht 4,5:1, um AA zu erfüllen. Großer Text (ab 18,66 px oder 14 px fett) und Bedienelemente wie Symbole und Rahmen von Eingabefeldern brauchen 3:1. AAA verlangt 7:1 für Fließtext. Das sind keine Stilfragen, sondern der Unterschied zwischen einer Seite, die im Sonnenlicht oder bei eingeschränktem Sehvermögen lesbar ist, und einer, die es nicht ist. Reicht ein Farbpaar nicht aus, senkt die Schaltfläche neben dem Ergebnis die Helligkeit in OKLCH schrittweise, bis der Kontrast ausreicht. So erhalten Sie die nächstgelegene konforme Variante Ihrer eigenen Farbe statt einer ganz anderen.

Paletten aus einem Foto

Fügen Sie ein Bild hinzu, und seine dominanten Farben werden per Median-Cut ermittelt: Die Pixelwolke wird wiederholt entlang des Kanals geteilt, der am stärksten schwankt, und der Mittelwert jeder entstehenden Box wird zu einem Farbfeld. Fast gleiche Farben werden danach mit CIEDE2000 aussortiert, dem Maß für den wahrgenommenen Farbabstand. So erhalten Sie sechs klar verschiedene Farben statt sechs Schattierungen desselben Himmels. Das Bild wird zuerst auf 400 Pixel verkleinert und verlässt Ihren Browser nie.

Farben und Bilder bleiben in diesem Tab

Jede Umrechnung ist reine Arithmetik in JavaScript auf Ihrem eigenen Gerät; hinter keiner davon steckt ein API-Aufruf. Ein Bild, das Sie für eine Palette ablegen, wird lokal decodiert, verkleinert und ausgewertet und nie hochgeladen oder gespeichert. Schließen Sie den Tab, bleibt nichts zurück.

Häufige Fragen

Warum ist OKLCH besser als HSL?

Weil seine Helligkeit dem entspricht, was Ihr Auge wahrnimmt. In HSL können zwei Farben mit demselben Helligkeitswert völlig unterschiedlich hell wirken – das verdirbt Farbharmonien und Tonskalen. OKLCH ist von Grund auf wahrnehmungsgleichmäßig aufgebaut: Gleiche Schritte sehen gleich aus.

Warum ist der CMYK-Wert nur ein Richtwert?

Eine echte CMYK-Separation hängt von Druckmaschine, Druckfarbe und Papier ab, die alle in einem ICC-Profil beschrieben sind. Der Wert hier stammt aus der einfachen rechnerischen Umwandlung – gut für einen groben Eindruck, falsch für eine Druckauflage. Fragen Sie Ihre Druckerei nach den Werten mit Profilkorrektur.

Wie lese ich ein Kontrastverhältnis wie 4,5:1?

Es vergleicht die Leuchtdichte zweier Farben. 4,5:1 ist das WCAG-AA-Minimum für Fließtext, 3:1 gilt für großen Text und Bedienelemente, 7:1 ist AAA. Je höher, desto lesbarer; 21:1 ist Schwarz auf Weiß.

Funktioniert die Pipette in Safari und Firefox?

Noch nicht. Die EyeDropper API ist eine Chromium-Funktion. In anderen Browsern weist die Schaltfläche darauf hin und empfiehlt stattdessen den Weg über ein Bild: Fügen Sie ein Bild hinzu und nehmen Sie die Farbe aus der Palette, die daraus entsteht.

Wie erstelle ich eine Palette aus einem Foto?

Öffnen Sie die Einstellungen, wählen Sie ein Bild und legen Sie fest, wie viele Farben Sie möchten – zwischen drei und zwölf. Die dominanten Farben erscheinen als Farbfelder, die Sie einzeln kopieren oder zusammen mit allem anderen exportieren können.

Wird mein Bild irgendwo hochgeladen?

Nein. Ihr Browser decodiert es, zeichnet es mit 400 Pixeln auf eine Leinwand und wertet es dort aus. Kein Teil davon wird übertragen, und die Datei wird nie gespeichert.

Wofür ist die Skala 50–900?

Das ist die Tonabstufung, die Designsysteme und Tailwind erwarten: zehn Stufen eines Farbtons von fast Weiß bis fast Schwarz. An beiden Enden wird die Buntheit (Chroma) zurückgenommen, denn volle Sättigung bei sehr hoher oder sehr niedriger Helligkeit liegt außerhalb von sRGB und wirkt nach der Umrechnung trüb.