HEX, RGB, HSL: Web-Farbcodes verstehen

Sie bearbeiten eine Website und sehen #FF5733 im CSS. Oder Sie arbeiten mit einem Designer, der Ihnen rgb(255, 87, 51) schickt. Oder ein Design-Tool zeigt eine Farbe als hsl(11, 100%, 60%) an. All diese beschreiben exakt dieselbe Farbe — ein lebhaftes Rot-Orange — aber in drei verschiedenen Formaten.

Wenn Sie jemals von Web-Farbcodes verwirrt waren, wird dieser Leitfaden in fünf Minuten Klarheit schaffen.

Wie digitale Farben funktionieren

Jede Farbe auf Ihrem Bildschirm wird durch Mischen von drei Primärfarben des Lichts erzeugt: Rot, Grün und Blau. Das ist das RGB-Farbmodell. Durch Variation der Intensität jedes Kanals von Null (aus) bis Maximum (volle Helligkeit) können Sie jede der ungefähr 16,7 Millionen Farben erzeugen, die ein Standardbildschirm darstellen kann.

• Rot 255, Grün 0, Blau 0 = reines Rot
• Rot 0, Grün 255, Blau 0 = reines Grün
• Rot 0, Grün 0, Blau 255 = reines Blau
• Rot 255, Grün 255, Blau 255 = Weiß (alle Kanäle voll)
• Rot 0, Grün 0, Blau 0 = Schwarz (alle Kanäle aus)
• Rot 255, Grün 255, Blau 0 = Gelb (Rot + Grün)

Jedes im Web verwendete Farbformat ist einfach eine andere Art, diese Kanalwerte auszudrücken.

HEX-Farben

Wie sie aussehen

#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF

Wie sie funktionieren

Ein HEX-Farbcode ist eine sechsstellige Zeichenkette mit einem vorangestellten Rautezeichen. Die sechs Zeichen sind in drei Paare aufgeteilt, wobei jedes einen Farbkanal im Hexadezimalformat (Basis 16) darstellt:

Hexadezimal verwendet die Ziffern 0-9 und die Buchstaben A-F, wobei A=10, B=11, C=12, D=13, E=14, F=15. Also entspricht FF hexadezimal 255 dezimal (15 × 16 + 15 = 255).

Aufschlüsselung von #FF5733:

• FF = Rot bei 255 (Maximum)
• 57 = Grün bei 87
• 33 = Blau bei 51

Das ergibt ein lebhaftes Rot-Orange.

Kurzschreibweise

Wenn jedes Paar zwei identische Zeichen hat, können Sie eine dreistellige Kurzform verwenden:

• #FF0000 kann als #F00 geschrieben werden
• #3366FF kann als #36F geschrieben werden
• #000000 kann als #000 geschrieben werden

RGB-Farben

Wie sie aussehen

rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)

Wie sie funktionieren

Die RGB-Notation gibt die Rot-, Grün- und Blau-Kanalwerte direkt als Dezimalzahlen von 0 bis 255 an. Es ist das intuitivste Format, da die Zahlen direkt der Intensität jedes Lichtkanals entsprechen.

rgb(255, 87, 51) bedeutet:

• Rot: 255 (Maximum)
• Grün: 87 (etwa ein Drittel)
• Blau: 51 (etwa ein Fünftel)

RGBA: Transparenz hinzufügen

RGBA fügt einen vierten Wert für die Deckkraft (Alpha) hinzu, der von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) reicht:

rgba(255, 87, 51, 0.5)   /* 50% transparent */
rgba(0, 0, 0, 0.8)        /* 80% undurchsichtig schwarz */

Das ist nützlich für Overlays, Schatten und jedes Designelement, das Inhalte dahinter durchscheinen lassen soll.

HSL-Farben

Wie sie aussehen

hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)

Wie sie funktionieren

HSL steht für Hue (Farbton), Saturation (Sättigung), Lightness (Helligkeit). Statt in Rot/Grün/Blau-Kanalmischung zu denken, beschreibt HSL Farbe so, wie Menschen natürlich darüber denken.

Hue (Farbton) ist die Farbe selbst, ausgedrückt als Grad auf dem Farbkreis (0-360):

• 0° / 360° = Rot
• 60° = Gelb
• 120° = Grün
• 180° = Cyan
• 240° = Blau
• 300° = Magenta

Saturation (Sättigung) gibt an, wie lebhaft die Farbe ist, von 0 % (Grau) bis 100 % (voll gesättigt).

Lightness (Helligkeit) gibt an, wie hell oder dunkel die Farbe ist, von 0 % (Schwarz) bis 100 % (Weiß). 50 % ist die „normale" Helligkeit.

hsl(11, 100%, 60%) bedeutet:

• Farbton: 11° (leicht oranges Rot)
• Sättigung: 100 % (voll lebhaft)
• Helligkeit: 60 % (etwas heller als normal)

HSLA: Transparenz hinzufügen

Wie RGBA fügt HSLA einen Alpha-Kanal hinzu:

hsla(11, 100%, 60%, 0.5)   /* 50% transparent */

Wann welches Format verwenden

Für Webentwicklung

HEX ist der De-facto-Standard. Das meiste CSS wird mit HEX-Codes geschrieben, weil sie kompakt sind und jeder Entwickler sie erkennt.

Für Designsysteme

HSL ist ideal für die Erstellung konsistenter Farbpaletten. Um hellere und dunklere Varianten einer Markenfarbe zu erstellen, passen Sie einfach den Helligkeitswert an:

• Primär: hsl(210, 80%, 50%)
• Helle Variante: hsl(210, 80%, 70%)
• Dunkle Variante: hsl(210, 80%, 30%)

Farbton und Sättigung bleiben gleich, was garantiert, dass die Varianten dieselbe „Farbe" in verschiedenen Helligkeiten sind.

Für Transparenz

Verwenden Sie RGBA oder HSLA, wenn Sie halbtransparente Farben für Overlays, Schatten oder Glaseffekte benötigen.

Zwischen Formaten konvertieren

Sie werden häufig zwischen Formaten konvertieren müssen. Ein Designer sendet HSL-Werte, aber Ihre Codebasis verwendet HEX. Ein Marken-Guide gibt RGB an, aber Sie brauchen HSL für die Erstellung von Varianten.

Die Mathematik ist einfach, aber manuell mühsam. Ein Konverter-Tool erledigt das sofort.

Beginnen Sie mit Farben zu arbeiten:

• Farbcodes konvertieren
• Farbkonverter-Tool
• Farbpaletten-Generator

Alle Tools sind kostenlos und funktionieren direkt in Ihrem Browser.