HEX, RGB, HSL: Farbcodes endlich verstehen
Geprüft am 28. Juli 2026
Boltpic
Die Artikel beschreiben die aktuellen Boltpic-Werkzeuge und verlinken relevante technische Quellen. Ergebnisse, die von Bild, Browser oder Gerät abhängen, werden als variabel gekennzeichnet.
#e63946, rgb(230, 57, 70) und hsl(355, 78%, 56%) beschreiben denselben Rotton. Es sind drei Schreibweisen, die sich für unterschiedliche Aufgaben eignen.
Wer alle drei lesen kann, wird viele kleine Alltagsreibungen los: eine Markenfarbe exakt treffen, einen Button für den Hover-Zustand abdunkeln oder erklären, warum „hellgrauer Text auf Weiß“ unleserlich ist.
HEX: kompakt und ideal zum Kopieren
Ein HEX-Code ist drei Zahlen in Verkleidung. Nach dem # steht jedes Zeichenpaar für einen Kanal — Rot, Grün, Blau — im Sechzehnersystem, wobei 00 für 0 und ff für 255 steht. #e63946 zerlegt sich also in e6 (230) Rot, 39 (57) Grün, 46 (70) Blau. Bestehen alle drei Paare aus Doppelzeichen, gibt es die Kurzform: #ffffff wird zu #fff.
Ein achtstelliger HEX-Wert wie #e6394680 ergänzt ein viertes Paar für den Alphawert; 80 entspricht etwa 50 % Deckkraft. HEX unterscheidet außerdem nicht zwischen Groß- und Kleinschreibung. Die kompakte Form eignet sich gut, um Farben in Chats, Tickets oder Stylesheets weiterzugeben.
RGB: am nächsten dran, wie Bildschirme denken
rgb(230, 57, 70) sagt dasselbe in Dezimalzahlen: wie viel rotes, grünes und blaues Licht gemischt wird, jeweils von 0 bis 255. Bildschirme funktionieren buchstäblich so — drei winzige Lichter pro Pixel — was RGB zur natürlichen Schreibweise macht, wenn man über Licht selbst nachdenkt. Mit Alphawert wird daraus rgba(230, 57, 70, 0.5), die halbtransparente Version.
Die Schwäche von RGB zeigt sich, sobald man eine Farbe von Hand anpassen will. Schnell: Wie machst du rgb(230, 57, 70) etwas dunkler, ohne den Rotton zu verändern? Alle drei Zahlen nach Gefühl zu senken verschiebt gern den Farbton. Genau dieses Problem löst HSL.
HSL: die Schreibweise für Menschen
hsl(355, 78%, 56%) bedeutet 355° Farbton, 78 % Sättigung und 56 % Helligkeit. Die Schreibweise trennt Farbfamilie, Farbintensität und die Position zwischen Schwarz und Weiß, sodass sich Varianten gezielt ableiten lassen.
Für einen dunkleren Hover-Zustand kannst du Farbton und Sättigung beibehalten und die Helligkeit senken. Für eine gedeckte Variante senkst du die Sättigung. So lässt sich aus einer Basisfarbe eine kleine Abstufung aufbauen:
--brand: hsl(355, 78%, 56%);
--brand-hover: hsl(355, 78%, 46%);
--brand-soft: hsl(355, 60%, 92%);
--brand-text: hsl(355, 70%, 32%);(Wer tiefer gräbt: Modernes CSS bietet auch oklch(), das dieselbe Aufgabe wahrnehmungstreuer erledigt, plus Weitfarbraum-Werte für neuere Displays. Gut zu wissen, dass es das gibt; für die tägliche Arbeit reicht HSL.)
Also — welche nehmen?
CSS akzeptiert alle drei Schreibweisen. Nutze HEX zum Teilen und Ablegen von Werten, HSL zum Anpassen oder Ableiten von Varianten und RGB, wenn Code oder ein anderes Werkzeug Kanalwerte ausgibt. Gemischte Schreibweisen funktionieren, eine einheitliche Teamregel erleichtert jedoch die Pflege.
Exakte Werte aus einem Bild ziehen
Farbarbeit beginnt oft mit der Frage „Welche Farbe ist das?“ — etwa bei einer Logodatei, dem Screenshot einer Referenzseite oder einem Foto. Eine Pipette beantwortet das präzise: Boltpics Farbpipette vergrößert den Bereich um den Cursor, damit du das gewünschte Pixel triffst, und liefert den Wert als HEX, RGB und HSL. Geht es nicht um ein einzelnes Pixel, ermittelt das Palettenwerkzeug die dominanten Farben des gesamten Bildes.
Textkontrast prüfen
Den Code lesen zu können macht eine Kombination noch nicht lesbar. WCAG 2.2 verwendet auf Stufe AA — abgesehen von definierten Ausnahmen — mindestens 4,5:1 für normalen und 3:1 für großen Text. Hellgrau #aaaaaa auf Weiß erreicht rund 2,3:1. Prüfe vor der Veröffentlichung die tatsächliche Kombination aus Text- und Hintergrundfarbe.