HEX, RGB und HSL erklärt: Webfarben wählen und umrechnen
Verstehe CSS-Farbformate, Transparenz und warum eine korrekte Umrechnung noch keinen guten Kontrast garantiert.
HEX, RGB und HSL beschreiben Farben für Bildschirme auf unterschiedliche Weise. Eine korrekte Umrechnung kann dieselbe Farbe in einer anderen Schreibweise darstellen, doch jedes Format erleichtert andere Aufgaben. Das Verständnis hilft bei konsistenten Designsystemen und verhindert unkontrolliert kopierte Farbwerte.
RGB: Lichtkanäle
RGB gibt die Intensität von Rot, Grün und Blau an. In der klassischen CSS-Schreibweise reicht jeder Kanal von 0 bis 255. Schwarz ist rgb(0, 0, 0), Weiß rgb(255, 255, 255) und reines Rot rgb(255, 0, 0).
Transparenz lässt sich über einen Alphakanal ergänzen. Alpha 0 ist transparent, Alpha 1 vollständig deckend. Die sichtbare Farbe hängt dann zusätzlich vom Hintergrund ab.
HEX: kompakte RGB-Schreibweise
HEX verwendet zwei hexadezimale Stellen pro Kanal. #FF0000 entspricht Rot 255, Grün 0 und Blau 0. Verwendet werden 0 bis 9 und A bis F; FF steht für 255.
Die Kurzform #RGB ist nur möglich, wenn jede Stelle verdoppelt werden kann: #3A7 entspricht #33AA77. Es gibt auch eine Alpha-Schreibweise, deren Unterstützung im Zielsystem geprüft werden sollte.
HSL: Farbton, Sättigung und Helligkeit
HSL trennt den Farbton auf einem Gradkreis von Sättigung und Helligkeit. Dadurch lassen sich Varianten erzeugen, indem der Farbton erhalten und Sättigung oder Helligkeit verändert wird. Gleiche numerische Änderungen wirken bei verschiedenen Farben allerdings nicht immer gleich stark.
.button {
background: hsl(265 80% 55%);
color: #ffffff;
}Umrechnen ohne Farbänderung
Der ToolBlur Farbkonverter zeigt gleichwertige HEX-, RGB- und HSL-Werte mit Vorschau. Durch Rundung können sich Zahlen nach wiederholten Umwandlungen geringfügig verändern. Nutze daher in deinem Designsystem ein festgelegtes Quellformat.
Farbformat und Barrierefreiheit sind verschieden
Eine gültige Farbe ist nicht automatisch barrierefrei. Kontrast entsteht zwischen Vorder- und Hintergrund und hängt zusätzlich von Textgröße und -stärke ab. Prüfe Normal-, Hover-, Fokus- und Deaktiviert-Zustände. Fehler oder Erfolg sollten nie ausschließlich über Farbe vermittelt werden.
Tipps für ein Farbsystem
- Farben nach Funktion benennen, etwa
--color-text. - Eine zentrale Quelle für Werte pflegen.
- Zulässige Hintergründe dokumentieren.
- Helles, dunkles und kontrastreiches Design testen.
- Zu viele nahezu identische Varianten vermeiden.
Häufig gestellte Fragen
Bietet HEX mehr Farben als RGB?
Nicht bei 8-Bit-Kanälen. Beide sind verschiedene Schreibweisen für denselben Wertebereich.
Ist HSL genauer?
Nicht automatisch. Es ist für bestimmte Anpassungen intuitiver, erweitert aber nicht grundsätzlich die Genauigkeit.
Warum sieht eine Farbe auf zwei Bildschirmen anders aus?
Kalibrierung, Helligkeit, Farbprofil, Paneltechnik und Umgebungslicht beeinflussen die Wahrnehmung.