Farbformate erklärt: HEX, RGB und HSL

Im Web lässt sich dieselbe Farbe auf mehrere Arten schreiben — #3498db, rgb(52, 152, 219) und hsl(204, 70%, 53%) sind alle genau dasselbe Blau. Zu wissen, was jedes Format bedeutet (und wann man zu welchem greift), macht das Auswählen, Anpassen und Abstimmen von Farben viel leichter. Dieser Ratgeber erklärt HEX, RGB und HSL und wie sie zusammenhängen.

Alles beginnt mit Rot, Grün und Blau

Bildschirme erzeugen Farbe, indem sie drei farbige Lichter mischen: Rot, Grün und Blau. Jede Farbe, die du siehst, ist eine Kombination dieser drei Kanäle, jeder auf eine Intensität von 0 (aus) bis 255 (voll) gesetzt. Ganz Schwarz ist 0, 0, 0; ganz Weiß ist 255, 255, 255. HEX und RGB sind nur zwei Notationen für dieselben drei Zahlen.

RGB

RGB gibt die drei Kanalwerte direkt an:

rgb(52, 152, 219)
     R    G    B

Es ist das lesbarste der drei, weil die Zahlen direkt auf „wie viel Rot, Grün, Blau“ abbilden. Ideal, wenn du über die Kanäle selbst nachdenken willst.

HEX

HEX kodiert genau dieselben 0–255-Kanalwerte hexadezimal (Basis 16), als # gefolgt von drei Paaren:

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

Jedes Paar läuft von 00 (0) bis ff (255). HEX ist kompakt und der Standard in den meisten Design-Tools und in CSS, weshalb es das Format ist, das du am häufigsten kopierst. Es gibt auch eine Kurzform: #39f expandiert zu #3399ff, indem jede Ziffer verdoppelt wird.

HSL

HSL beschreibt Farbe so, wie Menschen intuitiv über sie denken, mit drei verschiedenen Achsen:

• Farbton (Hue) (0–360°) — die Farbe selbst auf einem Kreis: 0° Rot, 120° Grün, 240° Blau.
• Sättigung (Saturation) (0–100%) — wie lebendig, von Grau bis zur vollen Farbe.
• Helligkeit (Lightness) (0–100%) — wie hell, von Schwarz über die Farbe bis Weiß.

hsl(204, 70%, 53%)
    hue  sat  light

Die Superkraft von HSL ist das Anpassen von Farbe. Willst du eine dunklere Version einer Farbe? Senke die Helligkeit und lass Farbton und Sättigung unangetastet. Willst du eine Reihe passender Abstufungen? Halte den Farbton fest und variiere die Helligkeit. In HEX oder RGB heißt das, alle drei Kanäle neu zu berechnen; in HSL ist es eine Zahl.

Alpha: Transparenz hinzufügen

Jedes Format hat eine Variante mit einem Alpha-Kanal für Deckkraft, von 0 (voll transparent) bis 1 (voll deckend): rgba(52, 152, 219, 0.5) und hsla(204, 70%, 53%, 0.5). Modernes CSS erlaubt auch ein 8-stelliges HEX, bei dem das letzte Paar Alpha ist — #3498db80 ist dasselbe Blau bei 50 %.

Welches solltest du nehmen?

• HEX — eine feste Markenfarbe kopieren oder in ein Design-Tool einfügen. Kompakt und universell.
• RGB / RGBA — wenn du über die rohen Kanäle nachdenkst oder einfache Transparenz brauchst.
• HSL / HSLA — wenn du gestaltest: Paletten bauen, Hover-/Aktiv-Abstufungen, oder eine Farbe nach Gefühl anpassen.

Die gute Nachricht: du musst nicht von Hand umrechnen. Unser HEX↔RGB-Konverter wechselt sofort zwischen Formaten, und der Farbwähler lässt dich eine Farbe visuell wählen und ihre HEX-, RGB- und HSL-Werte auf einmal ablesen — plus Verläufe und Paletten bauen. Musst du eine Farbe aus einem Bild ziehen? Der Bild-Farbwähler macht genau das.