HEX-, RGB- und HSL-Farbformate erklärt: Wie man umrechnet und wann man welches nutzt

Jeder Webentwickler jongliert mit drei Arten, dieselbe Farbe zu schreiben: Ein Designer reicht Ihnen #FF5733, ein CSS-Framework nutzt rgb(255, 87, 51), und ein Design-Tutorial beharrt darauf, HSL sei die einzig vernünftige Wahl. Es sind drei Notationen für dieselbe Sache, aber sie sind nicht für jede Aufgabe gleich gut — und von Hand umzurechnen ist fehleranfällig genug, dass irgendwann jeder zu einem Werkzeug greift. Diese Anleitung erklärt, was jedes Format wirklich kodiert, wie die Umrechnungen funktionieren und welche praktische Regel gilt, welches wo zu nutzen ist.

RGB: Drei Kanäle Licht

Ein Bildschirmpixel sind drei winzige Lichter — Rot, Grün, Blau —, und die RGB-Notation gibt an, wie hell jedes leuchtet, auf einer Skala von 0 bis 255. rgb(255, 87, 51) bedeutet volles Rot, ein Drittel Grün, ein Fünftel Blau. Alles Nullen ist Schwarz, alles 255 ist Weiß, und gleiche Werte dazwischen ergeben Graustufen.

Warum 0–255? Jeder Kanal ist ein Byte: 8 Bits, 2⁸ = 256 Stufen. Drei Kanäle × 8 Bits ist die „24-Bit-Farbe“ klassischer Display-Spezifikationen, gut für etwa 16,7 Millionen verschiedene Farben. Die 255-Obergrenze erklärt auch den häufigsten RGB-Fehler: Werte sind absolute Intensitäten, keine Prozente. rgb(128, 128, 128) ist mittleres Grau, nicht „halb Rot, halb Grün, halb Blau“.

Modernes CSS akzeptiert außerdem rgb(255 87 51) (durch Leerzeichen getrennt, ohne Kommas) und einen vierten Alpha-Kanal für Deckkraft: rgb(255 87 51 / 0.5) oder das ältere rgba(255, 87, 51, 0.5).

HEX: RGB im Trenchcoat

#FF5733 ist kein anderes Farbmodell — es sind dieselben drei Kanäle in Hexadezimal: FF = 255, 57 = 87, 33 = 51. Rot, Grün, Blau, je zwei Hex-Ziffern, mit # davor. Weil Hex Basis 16 ist, ist ein Byte immer genau zwei Ziffern (00–FF), was die Zeichenkette kompakt und mit fester Breite macht — der Grund, warum sie zum Standardformat in Design-Tools und CSS-Kurzschrift wurde.

HEX flüssig zu lesen erfordert eine Fähigkeit: zu wissen, dass die Größe jedes Paares zählt, nicht der exakte Wert. #F… bedeutet „viel von diesem Kanal“, #3… bedeutet „wenig“. #FF5733 liest sich also sofort als „überwiegend Rot, etwas Grün, kaum Blau“ = orange-artig. Kurzschrift wie #F00 verdoppelt jede Ziffer (#FF0000, reines Rot), und eine achtstellige Form hängt Alpha an: #FF573380 ist 50 % Deckkraft (80 hex = 128 dezimal ≈ halb 255).

RGB → HEX von Hand: Teilen Sie jeden Kanal durch 16; Quotient und Rest sind Ihre zwei Ziffern (mit 10–15 als A–F). 87 ÷ 16 = 5 Rest 7, also 57. Zurück: erste Ziffer × 16 + zweite Ziffer. Ist das nicht, wie Sie Ihren Nachmittag verbringen wollen, zeigt der Color Picker HEX-, RGB- und HSL-Werte live, während Sie einen davon anpassen.

HSL: Das für Menschen entworfene Format

RGB beschreibt Farben so, wie Hardware sie erzeugt; HSL beschreibt sie so, wie Menschen über sie denken:

• Farbton (Hue) (0–360°): Position auf dem Farbrad. 0° ist Rot, 120° Grün, 240° Blau; alles andere ist eine Interpolation um den Kreis.
• Sättigung (0–100 %): wie lebendig die Farbe ist. 0 % ist reines Grau unabhängig vom Farbton; 100 % ist volle Intensität.
• Helligkeit (0–100 %): wie nah an Schwarz oder Weiß. 0 % ist immer Schwarz, 100 % immer Weiß, 50 % die „reine“ Farbe.

Die Killer-Eigenschaft ist, dass jeder Regler eine intuitive Sache tut. Wollen Sie eine dunklere Version Ihrer Markenfarbe? Senken Sie die Helligkeit von 50 % auf 35 % — fertig, keine Mathematik. Wollen Sie sie gedämpfter? Sättigung senken. Wollen Sie den komplementären Akzent? Addieren Sie 180° zum Farbton. Versuchen Sie eines davon in RGB, und Sie raten an drei verschränkten Zahlen: rgb(255, 87, 51) korrekt abzudunkeln bedeutet, alle drei Kanäle proportional zu skalieren, und Ihr erster Versuch verschiebt meist den Farbton.

Deshalb glänzt HSL für systematisches Design: Hover-Zustände (Helligkeit −10 %), deaktivierte Zustände (Sättigung −40 %), eine ganze Palette aus einem Marken-Farbton erzeugen. Der Color Palette Generator nutzt genau das — er variiert Sättigung und Helligkeit um einen Basiston und erzeugt Familien automatisch harmonierender Farben, etwas, das man in HEX kaum abschätzen kann.

HSL ↔ RGB umrechnen: Die Form des Problems

HSL → RGB ist aufwendiger als die HEX-Umrechnung, weil der Farbtonwinkel zuerst einen Sektor des Farbrads auswählt (welche zwei Kanäle aktiv sind) und Sättigung/Helligkeit dann das Ergebnis skalieren. Der grobe Algorithmus: Chroma (Farbigkeit) aus Sättigung und Helligkeit berechnen, den 60°-Sektor finden, in den der Farbton fällt, Chroma den passenden Kanälen zuweisen und alles um den Helligkeits-Offset anheben. Es funktioniert, aber es ist die Art Formel, die niemand pro Aufgabe neu herleiten sollte — dafür gibt es Farbwerkzeuge.

Die Umrechnungen, die es wert sind, verinnerlicht zu werden, sind die Anker: hsl(0, 100%, 50%) = #FF0000 (Rot), hsl(120, 100%, 50%) = #00FF00 (Grün), hsl(240, 100%, 50%) = #0000FF (Blau), und jede Farbe mit 0 % Sättigung ist ein Grau, dessen Stufe allein aus der Helligkeit kommt.

Welches Format wann

• HEX: der Standard für Konstanten — Markenfarben, Design-Tokens, alles aus einem Design-Tool Kopierte. Kompakt, universell unterstützt, greppbar.
• RGB/RGBA: wenn Sie bereits mit Kanälen arbeiten — Canvas-Pixel, Bildverarbeitung — oder wenn Sie schnell Alpha auf einen bestehenden RGB-Wert brauchen.
• HSL: für alles Berechnete oder Systematische — Theme-Varianten, Hover-/Aktiv-Zustände, programmatische Paletten, Dark-Mode-Anpassungen (Helligkeit durchweg senken, und Sie haben einen ersten Entwurf eines dunklen Themes).

Ein praktisches CSS-Muster kombiniert sie: Definieren Sie Markenfarben als HEX-Custom-Properties und leiten Sie dann Varianten mit hsl() über color-mix() ab oder indem Sie die Kanäle getrennt speichern. Und egal welches Format das finale CSS nutzt, benennen Sie Ihre Tokens semantisch (--color-danger, nicht --color-red), damit sich der zugrunde liegende Wert ändern kann, ohne das ganze Projekt zu durchsuchen. Reicht Ihnen ein Stakeholder eine Farbe per Namen — „mach es korall“ —, bildet der Color Name Finder Namen auf ihre exakten HEX/RGB-Werte ab und zurück, was besser ist, als zu raten, ob #FF7F50 gemeint war.

Kurzreferenz

• HEX = RGB in Hexadezimal: #FF5733 ≡ rgb(255, 87, 51). Gleiches Modell, andere Notation.
• RGB-Kanäle sind absolute Intensitäten 0–255; gleiche Werte sind Graustufen.
• HSL: Farbton = welche Farbe (0–360°), Sättigung = wie lebendig, Helligkeit = dunkel ↔ hell (50 % ist rein).
• Dunkler/heller machen und entsättigen in HSL; Konstanten in HEX speichern; RGBA/HSLA nutzen, wenn Sie Deckkraft brauchen.
• #RGB-Kurzschrift verdoppelt jede Ziffer; #RRGGBBAA hängt Alpha als zwei weitere Hex-Ziffern an.