HEX, RGB, HSL — was bedeuten Farbcodes?
Du öffnest Canva, Figma oder den Farbwähler in Windows — und siehst ein Kauderwelsch aus Zahlen und Buchstaben. Was bedeutet eigentlich #E8593C? Und was ist der Unterschied zwischen RGB und HSL? Hier ist alles auf einmal erklärt.
Alle Farbformate beschreiben dieselbe Farbe — nur auf unterschiedliche Arten. Genauso wie "15. Juni" und "15/06" dasselbe Datum ist, ist #E8593C und rgb(232, 89, 60) dieselbe Farbe — Korallrot.
HEX — der Standard im Web
HEX steht für Hexadezimal — ein Zahlensystem mit 16 statt 10 Ziffern (0–9 und A–F). Ein HEX-Farbcode besteht immer aus 6 Zeichen nach dem #: die ersten zwei stehen für Rot, die mittleren zwei für Grün, die letzten zwei für Blau.
#E8593C heißt: E8 (232 in Dezimal) Rot, 59 (89) Grün, 3C (60) Blau. Viel Rot, wenig Grün, wenig Blau — ergibt Korallrot.
- Standard in CSS und Webdesign
- In allen Design-Tools (Figma, Canva, Photoshop)
- Beim Einrichten von WordPress-Themes
- Immer wenn du eine Farbe "kopierst und einfügst"
Kurz-HEX: Wenn alle Paare doppelt sind (#AABB CC → #ABC), kann man abkürzen. #FFFFFF wird zu #FFF (Weiß), #000000 zu #000 (Schwarz).
RGB — Rot, Grün, Blau
RGB beschreibt eine Farbe durch den Anteil von Rot, Grün und Blau — jeweils als Zahl von 0 bis 255. 0 bedeutet kein Anteil, 255 maximaler Anteil. rgb(255, 0, 0) ist reines Rot, rgb(0, 0, 255) reines Blau, rgb(255, 255, 255) Weiß.
RGB ist ein additives Farbmodell: Je mehr Licht, desto heller. Das ist das Gegenteil von Farbe auf Papier — deshalb gibt es für Druck das CMYK-Modell.
- In CSS:
color: rgb(232, 89, 60); - In Bildbearbeitungsprogrammen
- Wenn du Farbwerte manuell eingibst
- Für Bildschirmdarstellung allgemein
HSL — Farbton, Sättigung, Helligkeit
HSL steht für Hue (Farbton), Saturation (Sättigung), Lightness (Helligkeit). Es ist das menschenfreundlichste Format — du denkst in "welche Farbe ist das?" statt in Zahlenwerten.
Hue: Die Farbe als Winkel auf dem Farbkreis (0°=Rot, 120°=Grün, 240°=Blau). Saturation: 0% = grau, 100% = leuchtend bunt. Lightness: 0% = schwarz, 50% = normal, 100% = weiß.
- Wenn du Farben anpassen willst (heller machen, entsättigen)
- In modernem CSS sehr verbreitet
- Ideal zum Erzeugen von Tints und Shades
- Wenn du Farbharmonien verstehen willst
Profi-Tipp HSL: Willst du von einer Farbe eine hellere Version? Erhöhe einfach den L-Wert. Willst du sie gedämpfter? Reduziere den S-Wert. Das geht in HSL intuitiv — in RGB müsstest du alle drei Werte manuell ändern.
CMYK — für den Druck
CMYK steht für Cyan, Magenta, Yellow und Key (Schwarz) — die vier Druckfarben. Im Gegensatz zu RGB (Licht) ist CMYK ein subtraktives Modell: Farbe wird durch das Absorbieren von Licht erzeugt. Je mehr Tinte, desto dunkler.
Wichtig: Farben die auf dem Bildschirm leuchtend wirken, können im Druck matter aussehen — weil CMYK einen kleineren Farbraum hat als RGB. Immer CMYK-Werte prüfen bevor du etwas druckst.
- Für Druckereien und professionellen Druck
- In InDesign, Illustrator für Printprojekte
- Für Visitenkarten, Flyer, Poster
Wann nutzt du welches Format?
| Format | Wann verwenden | Beispiel |
|---|---|---|
| HEX | Web, CSS, Design-Tools, Copy-Paste | #E8593C |
| RGB | Bildbearbeitung, Bildschirm-Design, CSS | rgb(232, 89, 60) |
| HSL | Farbvariationen erstellen, modernes CSS | hsl(9, 77%, 57%) |
| CMYK | Professioneller Druck, Druckereien | cmyk(0%, 62%, 74%, 9%) |
| HSV | Photoshop-Farbwähler, technische Tools | hsv(9, 74%, 91%) |
Umrechnen ohne Kopfrechnen
Du brauchst nicht zu wissen wie die Umrechnung mathematisch funktioniert — dafür gibt es Tools. Unser kostenloser Farbkonverter rechnet sofort zwischen allen Formaten um: einfach einen Wert eingeben, alle anderen erscheinen automatisch.
🔄 Zum kostenlosen Farbkonverter →200+ Paletten als PDF
Mit HEX- und RGB-Codes für alle Farben — einmalig 9 €.