Farbkonverter verstehen: HEX, RGB, RGBA, HSL, HSV, Alpha und barrierefreie Webfarben
HEX, RGB, HSL und HSV sind unterschiedliche Koordinatensysteme zur Beschreibung von Farbwerten. HEX zu RGB kann im selben RGB-Farbraum exakt sein, während RGBA zu HEX zusätzlich klären muss, wie Transparenz behandelt wird. Wer die Modelle versteht, vermeidet stille Farbverschiebungen.
HEX und RGB sind oft dieselben Kanäle
Sechsstellige HEX-Werte #RRGGBB schreiben drei 8-Bit-RGB-Kanäle kompakt in Hexadezimalnotation. Jeder Kanal liegt gewöhnlich zwischen 0 und 255. HEX zu RGB ändert dann nur die Schreibweise.
Kurzform #369 wird zu #336699. Die Gleichheit gilt jedoch nur, wenn Quelle und Ziel denselben RGB-Farbraum meinen. Moderne CSS-Farbräume können über sRGB hinausgehen.
Alpha beschreibt Transparenz
RGBA ergänzt einen Alpha-Wert. Die sichtbare Farbe entsteht erst durch Mischung mit dem Hintergrund; halbtransparentes Blau sieht auf Weiß anders aus als auf Schwarz. HEX zu RGBA kann Alpha erhalten, aber ohne Hintergrund keine endgültige Anzeige vorhersagen.
Achtstellige CSS-HEX-Werte #RRGGBBAA können Alpha speichern. Bei RGBA zu HEX ist deshalb wichtig, ob acht Stellen ausgegeben oder die Farbe zuerst auf einen Hintergrund zusammengesetzt wird.
HSL ist bequem, aber nicht wahrnehmungsgleich
HSL trennt Hue, Saturation und Lightness und ist für Variationen leicht zu bedienen. HEX zu HSL hilft beim Ableiten von Varianten.
Gleiche HSL-Lightness bedeutet jedoch nicht gleiche wahrgenommene Helligkeit. Gelb und Blau können bei identischem Prozentwert sehr unterschiedlich wirken. Moderne perceptual spaces sind für gleichmäßigere Skalen besser geeignet.
HSV beantwortet eine andere Frage
HSV verwendet Value statt HSL-Lightness und ist aus vielen Color Pickern bekannt. HEX zu HSV eignet sich beim Austausch zwischen Anwendungen.
HSL und HSV dürfen nicht einfach umbenannt werden; Saturation und dritte Achse sind unterschiedlich definiert, obwohl die sichtbare Farbe nach korrekter Konvertierung gleich bleiben kann.
Rundung und Roundtrip
Konvertierungsformeln erzeugen oft Bruchteile. Werden HSL-Prozente früh stark gerundet, kann die Rückkonvertierung RGB-Kanäle um einzelne Schritte verändern. Für Design Tokens sollte intern höhere Präzision erhalten bleiben.
Auch Alpha wird zwischen Dezimalwerten und 8-Bit-Stufen gerundet. Eine konsistente Rundungsregel verhindert Drift bei wiederholten Umwandlungen.
Wide Gamut und modernes CSS
CSS Color 4 unterstützt Farbräume wie display-p3. Deren Gamut kann größer als sRGB sein. Eine Umwandlung in sechsstellige HEX-Werte kann Clipping oder Gamut Mapping erfordern.
Bei professionellen Bildquellen sollte deshalb Profil/Farbraum geprüft werden. Ein numerisch gleicher RGB-Wert garantiert über unterschiedliche Farbräume hinweg keine gleiche Farbe.
Kontrast nach der Konvertierung prüfen
Ein Konverter sagt nichts über Lesbarkeit. WCAG-Kontrast basiert auf relativer Luminanz von Vorder- und Hintergrund, nicht auf HSL-Lightness. Transparenz muss in den effektiven Hintergrund eingerechnet werden.
Farbe sollte zudem nicht allein Information transportieren. Fehler, Auswahlzustände und Diagramme brauchen bei Bedarf Text, Symbole oder weitere visuelle Hinweise.
Design-Systeme konsistent halten
Speichern Sie einen kanonischen Farbwert und erzeugen Sie Syntaxvarianten daraus, statt immer wieder gerundete Werte zu konvertieren. Dokumentieren Sie Alpha-Overlays und den zugrunde liegenden Farbraum.
RGB zu HEX löst die Syntaxarbeit; Branding, Gamut, Kontrast und Zustände bleiben Designentscheidungen.
Praktischer Ablauf
Quelle und Farbraum bestimmen, Original bewahren, mit ausreichender Präzision konvertieren, Alpha bewusst erhalten oder compositen und das Ergebnis in der Zielanwendung prüfen.
Danach folgt bei UI-Farben der Kontrasttest. So werden RGBA zu HEX und andere Werkzeuge zu verlässlichen Helfern statt zu einer Quelle stiller Abweichungen.
Häufige Fragen
Ist HEX genauer als RGB?
Nein. Sechsstellige HEX- und 8-Bit-RGB-Werte können dieselben Kanäle darstellen.
Bestimmt RGBA die endgültige sichtbare Farbe?
Nicht allein; der Hintergrund beeinflusst das Compositing.
Sind HSL und HSV austauschbar?
Nein, ihre Achsen sind unterschiedlich definiert.
Kann eine korrekte Umrechnung unzugänglich sein?
Ja. Kontrast und Verwendung der Farbe müssen separat geprüft werden.
Farbstandards und Barrierefreiheitsquellen
- W3C — CSS Color Module Level 4
- W3C Web Accessibility Initiative — Understanding Contrast Minimum
- W3C Web Accessibility Initiative — Use of Color
- U.S. Web Design System — Color
This article is an original practical guide informed by the standards and official references above.