Farbwähler — HEX Farbcode, RGB und HSL bestimmen

Übersicht der Farbformate

Wie funktioniert ein Farbwähler?

Ein grafischer Farbwähler besteht aus drei Bedienelementen, die zusammenarbeiten. Das große Quadrat ist ein zweidimensionales Sättigungs-/Hellwert-Feld: Bewegen Sie den Punkt nach rechts, wird die Farbe kräftiger; bewegen Sie ihn nach oben, wird sie heller. Der schmale Streifen daneben ist der Farbtonregler. Er durchläuft den Farbkreis von Rot über Orange, Gelb, Grün, Cyan, Blau und Magenta wieder zurück zu Rot bei 360°. Ein dritter Regler steuert das Alpha, also die Deckkraft, und liegt üblicherweise auf einem Schachbrettmuster, damit die Durchsichtigkeit sichtbar wird.

Dass dieses Muster auf HSV beruht und nicht auf RGB, hat einen sehr menschlichen Grund: So denken wir über Farbe. Zuerst entscheiden wir, welche Farbe es sein soll — den Farbton —, danach, wie kräftig und wie hell sie sein soll. Drei getrennte Zahlen von 0 bis 255 so lange zu verschieben, bis ein etwas gedämpftes Himmelblau herauskommt, ist ungleich mühsamer, als einen Punkt in einem Quadrat zu ziehen. Weil der Farbtonregler den Farbton festhält, während Sie im Quadrat suchen, lässt sich die gesamte Sättigungs-/Hellwert-Ebene dieses Farbtons als durchgehender Verlauf zeichnen — genau das Feld, das Sie hier oben sehen.

Diese Anordnung wurde durch den Farbwähler von Adobe Photoshop bekannt und ist inzwischen der De-facto-Standard in Figma, Sketch, GIMP und praktisch jedem Farbwähler im Web. Die Gewöhnung ist so stark, dass fast jeder ein nie zuvor gesehenes Werkzeug sofort bedienen kann: kräftige Farben oben rechts, Weiß oben links, Schwarz entlang der unteren Kante — unabhängig vom eingestellten Farbton.

Die Pipette und die Farbauswahl des Browsers

Browser bringen bereits eigene Wege mit, eine Farbe zu wählen. Das HTML-Element <input type="color"> zeigt ein kleines Farbfeld, das beim Anklicken den Farbdialog des Betriebssystems öffnet. Sein Wert ist seit jeher eine siebenstellige Zeichenkette in Kleinbuchstaben der Form #rrggbb — klassisch ohne Alphakanal, und ohne Vorgabe startet er bei #000000. Deshalb liefern viele einfache Farbwähler ausschließlich den HEX Farbcode.

Die Pipette ist eine neuere und deutlich weiter reichende Fähigkeit. Die EyeDropper API erlaubt einer Webseite, die Farbe jedes beliebigen Bildpunkts auf dem Bildschirm aufzunehmen — nicht nur innerhalb der Seite, sondern überall dort, wo Sie etwas sehen können, auch in anderen Fenstern. Beim Aufruf von new EyeDropper().open() wird der Mauszeiger zur Lupe; das zurückgegebene Promise löst erst nach einem bewussten Klick auf einen Bildpunkt auf und liefert ein Objekt, dessen Eigenschaft sRGBHex die aufgenommene Farbe enthält. Aus Datenschutzgründen lässt sie sich nur durch eine echte Nutzeraktion starten — hier durch die Schaltfläche „Pipette“ —, sie funktioniert nur über eine gesicherte HTTPS-Verbindung, und mit Esc brechen Sie jederzeit ab. Unterstützt wird sie derzeit von Browsern auf Chromium-Basis, also Chrome, Edge und Opera; Firefox und Safari kennen sie noch nicht, weshalb dieses Werkzeug die Schaltfläche in dem Fall deaktiviert. Das Aufgenommene wird nirgendwohin gesendet: Die Farbe entsteht vollständig auf Ihrem Gerät.

HEX, RGB oder HSL — welchen Farbcode sollten Sie kopieren?

Alle drei beschreiben exakt dieselbe Farbe, aber sie eignen sich für unterschiedliche Aufgaben. Der HEX Farbcode (#rrggbb, mit Alpha #rrggbbaa) ist die Standardwährung des Webs: kurz, überall akzeptiert und bequem zu kopieren. Sein Nachteil ist die Lesbarkeit — niemand erkennt an #5c85ff auf den ersten Blick ein helles Blau. RGB zeigt dieselben drei Kanäle als Dezimalzahlen und ist praktisch, wenn Sie im Code rechnen oder Farben mischen.

HSL ist das Format, mit dem sich am leichtesten denken lässt, denn seine drei Zahlen entsprechen genau den Fragen, die man tatsächlich stellt: Welcher Farbton (0–360°)? Wie kräftig (0–100 %)? Wie hell (0–100 %)? Daraus folgt der entscheidende Vorteil: Sie können eine Farbe gezielt verändern, ohne ihren Charakter zu verlieren. Aus hsl(225, 100%, 68%) wird durch Absenken der dritten Zahl auf 40 % ein dunkleres Blau derselben Familie — in HEX müssten Sie dafür alle drei Kanäle gleichzeitig neu schätzen. Genau so entstehen konsistente Hover-Zustände, Rahmenfarben und Hintergründe: Farbton festhalten, Helligkeit staffeln. Praktische Faustregel: Wählen und speichern Sie Farben als HEX Farbcode, denken und variieren Sie in HSL.

Modernes CSS kennt darüber hinaus hwb() (Farbton plus Weiß- und Schwarzanteil, wie beim Anmischen von Farbe), sowie lab(), lch(), oklab() und oklch(). Die letzten beiden arbeiten wahrnehmungsgleichmäßig: Ein gleich großer Zahlenschritt sieht überall im Farbraum nach einem etwa gleich großen Unterschied aus. Für abgestufte Farbskalen in einem Designsystem ist oklch() deshalb die derzeit empfohlene Wahl.

Kontrast und Farbfehlsichtigkeit mitdenken

Eine Farbe, die gefällt, ist nicht automatisch eine Farbe, die für alle funktioniert. Etwa 8 % der Männer und 0,5 % der Frauen mitteleuropäischer Herkunft haben eine Form der Farbfehlsichtigkeit, denn die häufigsten Varianten hängen an Genen des X-Chromosoms. Die weitaus meisten Fälle betreffen den Rot-Grün-Bereich und lassen Rot-, Grün-, Braun- und Orangetöne leicht verwechselbar erscheinen; die Blau-Gelb-Schwäche ist selten. Daraus folgt die alte Barrierefreiheitsregel: Verlassen Sie sich nie allein auf die Farbe. Eine rote Fehlermeldung braucht zusätzlich ein Symbol oder klaren Text, Diagrammreihen brauchen Muster oder Beschriftungen, und Links sollten nicht nur farbig, sondern auch unterstrichen sein.

Die zweite Hälfte des Themas ist die Lesbarkeit, und dort sind die Vorgaben präzise. Die Web Content Accessibility Guidelines (WCAG) definieren ein Kontrastverhältnis zwischen Text und Hintergrund und verlangen auf der fast überall angesetzten Stufe AA mindestens 4,5:1 für Text in normaler Größe und 3:1 für großen Text (etwa ab 18 pt, bei fettem Text ab 14 pt) sowie ebenfalls 3:1 für Bedienelemente und bedeutungstragende Grafiken. Wenn dieser Farbwähler Ihnen also einen HEX Farbcode für Fließtext liefert, lautet die entscheidende Frage nicht „Sieht das gut aus?“, sondern „Erreicht das gegenüber dem Hintergrund 4,5:1?“. Wählen Sie die Farbe hier und prüfen Sie das Paar anschließend im Kontrastprüfer.

Warum genügen drei Zahlen für jede Farbe?

Dass ein Bildschirm mit nur drei Lichtfarben nahezu jeden Farbeindruck erzeugen kann, liegt an der Biologie des Auges. Das menschliche Farbsehen ist trichromatisch: Die Netzhaut enthält drei Zapfentypen, die jeweils auf einen anderen Wellenlängenbereich ansprechen — grob im langwelligen, mittleren und kurzwelligen Bereich, also für rötliches, grünliches und bläuliches Licht. Das Gehirn misst keine Wellenlänge, sondern vergleicht, wie stark die drei Zapfentypen reagieren, und leitet daraus die Farbe ab.

Deshalb können völlig verschiedene Lichtmischungen denselben Farbeindruck erzeugen — ein Effekt, den man Metamerie nennt. Bildschirme nutzen ihn konsequent aus: Aus roten, grünen und blauen Subpixeln setzen sie zu fast jeder sichtbaren Farbe ein gleich aussehendes Gegenstück zusammen. Genau darum liegt das RGB-Modell allen Displays und allen Farbwählern zugrunde. Mit 8 Bit je Kanal stehen 256 Rot-, 256 Grün- und 256 Blaustufen zur Verfügung, zusammen 256 × 256 × 256 = 16,7 Millionen Kombinationen — mehr Abstufungen, als das Auge im Alltag auseinanderhalten kann.