Farbkonvertierung: HEX, RGB, HSL einfach erklaert

Warum es verschiedene Farbformate gibt

Farben im Web lassen sich auf mehrere Arten beschreiben, und jedes Format hat seine Berechtigung. HEX-Codes (#FF5733) sind kompakt und seit den Anfaengen des Webs der Standard in CSS. RGB (255, 87, 51) beschreibt Farben als Mischung von Rot, Gruen und Blau — so wie Bildschirme sie tatsaechlich darstellen.

HSL (Hue, Saturation, Lightness) beschreibt Farben intuitiver: Farbton als Winkel auf dem Farbkreis, Saettigung und Helligkeit als Prozentwerte. Designer bevorzugen HSL, weil sich verwandte Farben leicht erzeugen lassen — aendern Sie die Helligkeit, und Sie erhalten dunklere oder hellere Varianten derselben Farbe.

Das HEX-Format verstehen

Ein HEX-Farbcode besteht aus einem Rautezeichen und sechs hexadezimalen Ziffern. Die ersten zwei Ziffern stehen fuer Rot, die mittleren fuer Gruen, die letzten fuer Blau. Jedes Paar repraesentiert einen Wert von 00 (kein Anteil) bis FF (maximaler Anteil).

Kurzschreibweise ist moeglich, wenn beide Ziffern eines Paares identisch sind: #FF5533 wird zu #F53. Seit CSS4 gibt es auch achtstellige HEX-Codes, bei denen die letzten zwei Ziffern die Transparenz angeben: #FF553380 ist halbtransparent.

HEX ist das kompakteste Format und wird in Code-Editoren und Design-Tools als Standard verwendet. Der Nachteil: Die Werte sind fuer Menschen schwer zu lesen. Was #3B82F6 fuer eine Farbe ist, sieht man dem Code nicht an.

RGB und HSL im Vergleich

RGB definiert Farben durch drei Kanaele mit Werten von 0 bis 255. In CSS schreibt man rgb(59, 130, 246) oder mit Transparenz rgba(59, 130, 246, 0.5). Das Modell entspricht der physischen Funktionsweise von Bildschirmen und ist daher fuer programmatische Farbmanipulation gut geeignet.

HSL trennt den Farbton von Saettigung und Helligkeit. hsl(217, 91%, 60%) beschreibt ein mittleres Blau. Um eine hellere Variante zu erhalten, erhoehen Sie einfach den Helligkeitswert. Um die Farbe zu entsaettigen, reduzieren Sie die Saettigung. Diese logische Trennung macht HSL zum bevorzugten Format fuer Design-Systeme und Theming.

Weitere Formate wie CMYK (fuer Druck), Lab (wahrnehmungsbasiert) und OKLCH (modernes CSS-Format) haben spezifische Anwendungsbereiche. CMYK ist fuer Druckereien relevant, Lab fuer farbkritische Anwendungen.

Konvertierung in der Praxis

Die Konvertierung zwischen Formaten ist mathematisch exakt — ein HEX-Wert hat genau eine RGB-Entsprechung und umgekehrt. Die Umrechnung von RGB zu HSL und zurueck ist etwas komplexer, da sie trigonometrische Berechnungen erfordert, aber ebenso verlustfrei.

Bei der Konvertierung zu CMYK gibt es dagegen potenzielle Abweichungen, da der CMYK-Farbraum kleiner ist als RGB. Manche RGB-Farben (besonders gesaettigte Blau- und Gruentoene) lassen sich in CMYK nicht exakt darstellen. Druckereien verwenden ICC-Farbprofile, um diese Abweichungen zu minimieren.

Farben online konvertieren

Unser Farbkonverter rechnet sofort zwischen HEX, RGB, HSL und weiteren Formaten um. Geben Sie einen Wert in einem beliebigen Format ein und erhalten Sie die Entsprechungen in allen anderen Formaten. Die Farbvorschau zeigt Ihnen die Farbe in Echtzeit an. Alle Berechnungen laufen lokal im Browser — schnell, kostenlos und ohne Datenuebertragung.