Farbwähler online: Farbe wählen, umrechnen, prüfen

Die Farbpipette auf der Startseite beginnt mit einem Foto: Du lädst ein Bild und nimmst Farben daraus auf. Der Farbwähler auf dieser Seite beginnt stattdessen mit einem Farbwert. Nutze ihn, wenn du den HEX-Code schon kennst, etwa aus einem Markenhandbuch oder von einer Kollegin, und die Umrechnungen, Variationen, Barrierefreiheitsprüfungen und Code-Schnipsel dazu brauchst.

HEX mit drei, vier, sechs oder acht Stellen, mit oder ohne Raute; rgb() und rgba() mit Kommas oder Leerzeichen; hsl() und hsla(); und jedes der 148 CSS-Farbschlüsselwörter wie rebeccapurple oder cornflowerblue. Was nicht gelesen werden kann, lässt die aktuelle Farbe stehen, statt sie zurückzusetzen.

HSL ist nicht wahrnehmungsgleichmäßig: Zwei Farben mit derselben HSL-Helligkeit können sehr unterschiedlich hell wirken, weshalb in HSL erzeugte Paletten ungleichmäßig ausfallen. OKLCH behebt das und wird von jedem aktuellen Browser unterstützt. Die Variationen, die Harmonien und die vorgeschlagene barrierefreie Farbe auf dieser Seite werden genau deshalb alle in OKLCH berechnet.

Es ist die übliche unkalibrierte Formel, dieselbe, die die meisten Web-Werkzeuge verwenden, und sie taugt für eine grobe Vorstellung. Sie ist keine farbverwaltete Umrechnung: ein echter Druckauftrag braucht ein ICC-Profil für die konkrete Maschine und das konkrete Papier. Nimm den CMYK-Wert hier als Ausgangspunkt für die Druckerei, nicht als endgültige Vorgabe.

Das ist der CIEDE2000-Abstand zwischen zwei Farben, ein Maß dafür, wie verschieden sie aussehen. Unter 1 sieht niemand den Unterschied. Um 2 sieht ein aufmerksamer Betrachter ihn, wenn die Farben nebeneinanderstehen. Über 10 wirken sie wie verschiedene Farben. Das Maß trifft das menschliche Sehen weit besser als ein Vergleich von RGB-Werten.

Nach der Formel aus WCAG 2.1: die relative Leuchtdichte jeder Farbe in linearem Licht, dann (heller + 0,05) / (dunkler + 0,05). AA verlangt 4,5:1 für Fließtext und 3:1 für großen Text oder Bedienelemente, AAA verlangt 7:1 und 4,5:1. Der Farbton spielt dabei keine Rolle. Deshalb können zwei Farben sehr verschieden aussehen und trotzdem durchfallen.

Nein. Die Seite liefert die Farbmathematik als JavaScript und führt alles in deinem Browser aus. Beim Ändern der Farbe gibt es keinen API-Aufruf, nichts wird protokolliert, und die Seite funktioniert nach dem Laden auch mit getrennter Netzwerkverbindung.

Ja. Ein Farbwert ist nicht urheberrechtlich schützbar, und nichts hier steht unter einer Lizenz. Die erzeugten Skalen, Harmonien und Code-Schnipsel kannst du in jedem Projekt verwenden. Beachte aber: Eine Farbe kann als Marke geschützt sein, in Deutschland etwa als Farbmarke für bestimmte Waren oder Dienstleistungen. Die exakte Markenfarbe eines Wettbewerbers zu übernehmen, ist deshalb eine rechtliche und keine technische Frage.

Füg den HEX-Code in das Feld oben auf dieser Seite ein. Er wird sofort in RGB, HSL, HSV, CMYK, OKLCH und 28 weitere Formate umgerechnet, und jeder Wert lässt sich mit einem Klick kopieren. Die sechs HEX-Ziffern sind drei Paare für Rot, Grün und Blau, jeweils von 00 bis FF, also 0 bis 255 in RGB.

Für normalen Fließtext verlangt WCAG AA mindestens 4,5:1 zwischen Text und Hintergrund, AAA verlangt 7:1. Großer Text (24 px oder etwa 19 px fett) braucht für AA 3:1. Gib deine beiden Farben in den Kontrastprüfer auf dieser Seite ein, um das Verhältnis und die erreichten Stufen zu sehen.

Nutze den Farbenblindheits-Simulator auf dieser Seite. Er zeigt deine Farbe so, wie Menschen mit Protanopie, Deuteranopie, Tritanopie und Achromatopsie sie sehen, und listet Farben in der Nähe auf, die für sie gleich aussähen. Unterscheiden sich zwei Zustände nur durch Rot und Grün, füg zusätzlich eine Form, ein Symbol oder eine Beschriftung hinzu.