Artikel
Farbwerkzeuge fürs Web: Hex, Paletten und Barrierefreiheit
Farben für eine Website auszuwählen wirkt einfach, bis man auf Hex-Codes, RGB-Tripel und HSL-Winkel stößt, die alle dasselbe auf unterschiedliche Weise beschreiben. Dieser Artikel erklärt, wie diese Formate zusammenhängen, wie man eine einzelne Markenfarbe in eine nutzbare Palette verwandelt und wie man sicherstellt, dass das Ergebnis auch für Menschen lesbar bleibt, die Farbe anders wahrnehmen.
Hex, RGB und HSL beschreiben dieselbe Farbe
Eine Farbe auf dem Bildschirm wird aus rotem, grünem und blauem Licht gemischt. Die Hex-Notation schreibt diese drei Kanäle als sechsstelligen Code wie #2563eb, wobei jedes Zeichenpaar ein Kanal von 00 bis ff ist. RGB schreibt dieselben drei Zahlen dezimal, von 0 bis 255, was leichter zu lesen ist, aber nichts Zusätzliches aussagt. HSL geht einen anderen Weg: Es beschreibt eine Farbe durch ihren Farbton (eine Position auf dem Farbkreis von 0 bis 360 Grad), ihre Sättigung (wie kräftig sie ist) und ihre Helligkeit (wie nah an Weiß oder Schwarz). HSL ist das Format, zu dem Designer greifen, wenn sie eine Farbe anpassen wollen, denn die Helligkeit zu erhöhen oder den Farbton zu verschieben ist eine einzige intuitive Änderung statt dreier gekoppelter Zahlen. Ein Konverter lässt Sie zwischen allen dreien wechseln, sodass Sie einen Wert in einem Format lesen und in einem anderen verwenden können.
Aus einer Farbe eine Palette machen
Eine einzelne Markenfarbe reicht selten aus. Eine funktionierende Palette braucht meist eine Primärfarbe, ein oder zwei Akzente und eine Reihe neutraler Grautöne für Text und Hintergründe. Die Beziehungen zwischen Farben folgen einfachen Regeln auf dem Farbkreis: Komplementärfarben liegen sich gegenüber, analoge Farben liegen für eine ruhige Wirkung nebeneinander, und ein Dreiklang verteilt drei Farben gleichmäßig für Kontrast ohne Dissonanz. Ein Werkzeug für Farbschemata wendet diese Regeln auf Ihre Ausgangsfarbe an und liefert Ihnen die passenden Hex-Codes, sodass Sie die Winkel nicht von Hand berechnen müssen. Wenn Sie bereits ein Bild haben, dessen Stimmung Ihnen gefällt, liest ein Paletten-Extraktor die dominanten Farben daraus, eine schnelle Möglichkeit, eine Website auf einem Foto oder einem Logo aufzubauen.
Kontrast und Farbenblindheit
Eine Palette, die auf Ihrem Bildschirm gut aussieht, kann manche Leser dennoch im Stich lassen. Etwa einer von zwölf Männern und eine von zweihundert Frauen haben eine Form von Farbsehschwäche, am häufigsten die Schwierigkeit, Rot von Grün zu trennen. Wenn Ihr einziges Signal für einen Fehler roter Text auf einem grünen Button ist, übersehen diese Leser ihn. Die Lösung ist nicht, auf Farbe zu verzichten, sondern sich nie allein auf sie zu verlassen: Kombinieren Sie sie mit einem Symbol, einer Beschriftung oder einer Form und halten Sie genügend Helligkeitskontrast zwischen Text und seinem Hintergrund. Ein Simulator für Farbenblindheit zeigt Ihnen, wie Ihre Palette unter den häufigen Arten des Farbsehens aussieht, sodass Sie ein Problem vor der Veröffentlichung erkennen können statt erst nach einer Beschwerde.
All das im Browser erledigen
Keiner dieser Schritte braucht einen Server. Einen Hex-Code umzuwandeln, ein Schema zu erzeugen, Farben aus einem Bild zu lesen und Farbenblindheit zu simulieren sind alles kleine Berechnungen, die ein Browser sofort erledigt. Das zählt, wenn das Bild, das Sie abtasten, ein unveröffentlichtes Design oder das Logo eines Kunden ist: Mit den Werkzeugen hier bleibt die Datei auf Ihrem Gerät und nichts wird hochgeladen. Sie erhalten dasselbe Ergebnis wie bei einem Onlinedienst, ohne das Material aus der Hand zu geben. Der Farbkonverter, der Farbschema-Generator, der Paletten-Extraktor und der Simulator für Farbenblindheit laufen alle lokal und funktionieren offline auf dieselbe Weise, sobald die Seite geladen ist.
OKLCH und erweiterte Farbräume
Hex, RGB und HSL beschreiben Farben innerhalb des sRGB-Farbraums, den Bildschirme seit Jahren verwenden. Neuere Displays zeigen mehr, und CSS kann diesen Bereich inzwischen mit der color()-Funktion und dem Display P3-Farbraum erreichen, der satte Grün- und Rottöne hinzufügt, die sRGB nicht darstellen kann. Der größere Schritt ist OKLCH: eine Schreibweise für Farbe aus Helligkeit, Chroma und Farbton, die der tatsächlichen Helligkeitswahrnehmung des Auges entspricht. In HSL sehen ein Gelb und ein Blau mit derselben 50%-Helligkeit völlig unterschiedlich aus: Das Gelb wirkt hell, das Blau dunkel. In OKLCH bleibt die wahrgenommene Helligkeit stabil, wenn man den Helligkeitswert festhält und nur den Farbton ändert. Damit lässt sich eine Palette aufbauen, in der jeder Farbton dasselbe Kontrastverhältnis erreicht, indem man einen einzigen Wert fixiert, anstatt jede Farbe von Hand anzupassen.
Tools in diesem Artikel
- Farb-KonverterFarben zwischen HEX, RGB, HSL, HSV und CMYK konvertieren. WCAG-Kontrastprüfer inklusive. Kein Upload.
- Farbschema-GeneratorKomplementäre, analoge, triadische, tetradische und monochrome Paletten aus einer Grundfarbe generieren. Kein Upload.
- Farbpaletten-ExtraktorDominante Farben aus einem Bild als HEX-Farbfelder extrahieren. Beliebige Farbe kopieren. Kein Upload.
- Farbenblindheits-SimulatorProtanopie, Deuteranopie, Tritanopie und Achromatopsie auf einem Bild simulieren. Kein Upload.
Häufige Fragen
Was ist der Unterschied zwischen Hex und RGB?
Es sind zwei Schreibweisen derselben Farbe. Hex fasst die Kanäle Rot, Grün und Blau in einem sechsstelligen Code zur Basis 16 zusammen, während RGB dieselben drei Kanäle als Dezimalzahlen von 0 bis 255 auflistet. #ff0000 und rgb(255, 0, 0) sind dasselbe Rot. Hex ist kompakt und in CSS und Designdateien verbreitet, RGB lässt sich auf einen Blick leichter lesen, und das Umrechnen zwischen beiden ändert nichts an der Farbe selbst.
Woran erkenne ich, ob meine Farben für farbenblinde Nutzer lesbar sind?
Schicken Sie Ihre Palette durch einen Simulator für Farbenblindheit, der Ihre Farben so neu zeichnet, wie jemand mit jeder häufigen Art des Farbsehens sie sehen würde. Achten Sie auf Paare, die in denselben Farbton zusammenfallen, besonders Rot- und Grüntöne. Die sicherste Gewohnheit ist, Farbe nie als einzigen Hinweis zu nutzen: untermauern Sie sie mit Text, einem Symbol oder einem Muster und halten Sie einen klaren Helligkeitsunterschied zwischen Vordergrund und Hintergrund, damit die Bedeutung auch dann erhalten bleibt, wenn der Farbton es nicht tut.