Hex-Farbcodes verstehen: Der vollständige Leitfaden

Wenn Sie jemals in eine CSS-Datei, ein Design-Tool oder ein Marken-Styleguide geschaut haben, haben Sie Hex-Farbcodes gesehen: sechsstellige Zeichenketten wie #3B82F6 oder #FF5733, die irgendwie jede Farbe kodieren, die ein Bildschirm anzeigen kann. Sie sehen aus wie eine zufällige Folge von Buchstaben und Zahlen, aber es steckt ein präzises System dahinter – und sobald Sie es verstehen, können Sie jeden Hex-Code auf einen Blick lesen.

Dieser Leitfaden behandelt alles von der Grundstruktur eines Hex-Codes bis hin zu Kurzschreibweise, Alpha-Transparenz und praktischen Konvertierungstechniken.

Was bedeutet „Hex"?

Das Wort „Hex" ist kurz für hexadezimal – ein Zahlensystem, das Basis 16 statt der Basis 10 verwendet, die wir im Alltag nutzen. In Basis 10 laufen Ziffern von 0 bis 9. In Basis 16 laufen Ziffern von 0 bis 9 und werden dann mit den Buchstaben A bis F fortgesetzt, was sechzehn mögliche Werte pro Ziffer ergibt.

Warum Basis 16? Weil es sich sauber auf den Computerspeicher abbilden lässt. Ein einzelnes Byte Daten – 8 binäre Bits – kann Werte von 0 bis 255 speichern. Im Hexadezimalsystem passt derselbe Bereich in genau zwei Ziffern: 00 bis FF. Diese Kompaktheit ist der Grund, warum Hex zum Standard für die Angabe von Farben in Web- und Designkontexten wurde.

Die Struktur eines Hex-Farbcodes

Ein Standard-Hex-Farbcode hat diese Struktur:

# R R G G B B

Das Rautezeichen (#) ist ein Präfix, das signalisiert: „Dies ist eine Farbe." Danach folgen drei Paare hexadezimaler Ziffern – je ein Paar für die Rot-, Grün- und Blau-Kanäle des RGB-Farbmodells. Jedes Paar kodiert einen Wert von 0 (00) bis 255 (FF) und steuert die Intensität dieses Kanals.

Nehmen wir zum Beispiel #3B82F6 – ein lebhaftes Mittelblau:

Der hohe Blaukanal ist es, was diese Farbe blau erscheinen lässt. Das moderate Grün verschiebt sie leicht in Richtung Cyan statt reinem Marineblau. Das niedrige Rot hält sie kühl.

Vergleichen Sie das mit #FF5733, einem Korallenrot:

Das maximale Rot mit moderatem Grün erzeugt Orange-Rot. Niedriges Blau hält den Ton warm.

Einen Hex-Code auf einen Blick lesen

Sie müssen nicht in Dezimal konvertieren, um einen schnellen Überblick über eine Hex-Farbe zu bekommen. Einige Faustregeln:

00 = null Intensität (keiner dieser Kanal) FF = volle Intensität (Maximum dieses Kanals) 80 ≈ halbe Intensität (128 von 255)

Damit können Sie Hex-Codes grob auf einen Blick dekodieren:

• #FF0000 – volles Rot, kein Grün, kein Blau → reines Rot
• #00FF00 – kein Rot, volles Grün, kein Blau → reines Grün
• #0000FF – kein Rot, kein Grün, volles Blau → reines Blau
• #FFFF00 – volles Rot und Grün, kein Blau → Gelb (Rot + Grün = Gelb im Licht)
• #FF00FF – volles Rot und Blau, kein Grün → Magenta
• #00FFFF – volles Grün und Blau, kein Rot → Cyan
• #FFFFFF – alle Kanäle auf Maximum → Weiß
• #000000 – alle Kanäle auf null → Schwarz
• #808080 – alle Kanäle auf halb → Mittelgrau

Wenn die ersten zwei Ziffern hoch und die anderen niedriger sind, tendiert die Farbe zu Rot. Hohe mittlere zwei Ziffern drücken in Richtung Grün. Hohe letzte zwei Ziffern drücken in Richtung Blau oder Lila.

Hell vs. Dunkel erkennen

Wenn alle drei Paare hohe Hexadezimalwerte haben (C, D, E, F), ist die Farbe hell. Wenn alle drei niedrig sind (0, 1, 2, 3), ist sie dunkel. Gleiche Werte über alle drei Kanäle erzeugen immer ein neutrales Grau (oder Schwarz oder Weiß an den Extremen).

• #F0E6D3 – alle Werte hoch → helles warmes Beige
• #1A1A2E – alle Werte niedrig → sehr dunkles Marineblau
• #A0A0A0 – gleiche Mittelwerte → Mittelgrau

Hex-Kurzschreibweise

CSS erlaubt eine dreistellige Kurzschreibweise, wenn jedes Paar hexadezimaler Ziffern aus einem wiederholten Zeichen besteht. Zum Beispiel kann #AABBCC als #ABC geschrieben werden. Jede Ziffer in der Kurzschreibweise wird einfach verdoppelt, um die vollständige sechsstellige Version zu erzeugen.

Diese Kurzschreibweise funktioniert nur, wenn jedes Paar ein wiederholtes Zeichen ist. #3B82F6 kann nicht verkürzt werden, weil 3B, 82 und F6 keine wiederholten Paare sind. Aber #336699 kann zu #369 verkürzt werden.

Wann Kurzschreibweise verwenden

Hex-Kurzschreibweise ist eine gültige CSS-Funktion und wird identisch zur vollständigen Version gerendert. Verwenden Sie sie frei, wenn der Code es unterstützt. Viele Design-Tools und Marken-Styleguides verwenden jedoch das vollständige sechsstellige Format für Klarheit und Konsistenz – es ist sofort ersichtlich, was jeder Kanalwert ist, ohne mentale Expansion.

Hex mit Alpha: Achtstellige Hex-Codes

Der Standard-Sechsstellige Hex-Code enthält keine Transparenzinformation. Um einen Alpha-Kanal (Deckkraft) hinzuzufügen, unterstützt CSS ein achtstelliges Hex-Format, bei dem die letzten zwei Zeichen die Transparenz angeben.

Der Alpha-Kanal folgt demselben Bereich von 0 bis 255, kodiert als Hex-Paar:

Um zum Beispiel das Blau #3B82F6 mit 50 % Deckkraft zu verwenden: #3B82F680.

Um ein dunkles Overlay #000000 mit 70 % Deckkraft zu verwenden: #000000B3.

Vierstellige Kurzschreibweise mit Alpha

Genau wie #RGB eine Kurzschreibweise für #RRGGBB ist, gibt es eine #RGBA-Kurzschreibweise für #RRGGBBAA. Jede Ziffer wird verdoppelt:

• #F00F = #FF0000FF (reines Rot, vollständig opak)
• #0008 = #00000088 (Schwarz bei ~53 % Deckkraft)
• #FFF0 = #FFFFFF00 (vollständig transparentes Weiß)

Alternativen zu Hex-Alpha

Bevor achtstelliges Hex weitgehend unterstützt wurde, war der Standardweg zum Hinzufügen von Transparenz rgba():

/* Diese sind äquivalent */
background-color: #3B82F680;
background-color: rgba(59, 130, 246, 0.5);

Beide werden jetzt in modernen Browsern gut unterstützt. Die rgba()-Form ist oft lesbarer, weil die Deckkraft als menschenlesbare Dezimalzahl (0 bis 1) ausgedrückt wird statt als Hex-Paar, das mentale Konvertierung erfordert.

Hex in andere Formate konvertieren

Hex-Codes beschreiben dieselben RGB-Farben wie rgb()-Notation – sie sind nur eine kompaktere Darstellung. Die Konvertierung zwischen beiden ist unkompliziert.

Hex zu RGB

Konvertieren Sie für jedes Paar hexadezimaler Ziffern von hexadezimal zu dezimal:

• #FF5733 → Rot: FF = 255, Grün: 57 = 87, Blau: 33 = 51
• CSS: rgb(255, 87, 51)

Hex zu HSL

Diese Konvertierung ist aufwendiger. HSL (Farbton, Sättigung, Helligkeit) ist ein perzeptuell intuitives Format, bei dem der Farbton als Winkelgrad auf dem Farbrad und Sättigung und Helligkeit als Prozentwerte ausgedrückt werden. Der Farbkonverter erledigt dies sofort – geben Sie einen beliebigen Hex-Code ein und er gibt gleichzeitig die RGB-, HSL-, CMYK- und OKLCH-Äquivalente aus.

Hex zu OKLCH

OKLCH ist das modernste CSS-Farbformat, das auf perzeptuelle Gleichmäßigkeit ausgelegt ist. Es eignet sich hervorragend für die programmatische Farbmanipulation – gleiche numerische Schritte in OKLCH entsprechen gleich wahrgenommenen Unterschieden. Der Farbkonverter enthält OKLCH-Ausgabe für jeden eingegebenen Hex-Code.

Häufige Konvertierungsbeispiele

Hex in CSS: Praktische Verwendung

Hex-Codes funktionieren überall in CSS, wo ein Farbwert akzeptiert wird:

/* Textfarbe */
color: #1A1A2E;

/* Hintergrund */
background-color: #F0E6D3;

/* Rahmen */
border: 2px solid #3B82F6;

/* Box-Schatten */
box-shadow: 0 4px 12px #0000001A; /* Schwarz bei ~10 % Deckkraft */

/* Mit CSS-Benutzereigenschaften */
:root {
  --brand-primary: #3B82F6;
  --brand-dark: #1D4ED8;
}

Groß-/Kleinschreibung

Hex-Farbcodes sind in CSS nicht von der Groß-/Kleinschreibung abhängig. #3B82F6, #3b82f6 und #3B82f6 beziehen sich alle auf dieselbe Farbe. Die meisten Styleguides standardisieren auf entweder ausschließlich Großbuchstaben oder ausschließlich Kleinbuchstaben für Konsistenz. Großbuchstaben sind traditionell; Kleinbuchstaben sind in modernen Codebasen beliebt, und viele Linter bevorzugen sie.

Hex-Codes finden

Design-Tools. Figma, Sketch und Adobe XD zeigen alle Hex-Codes in ihren Farbauswahl-Panels an. Jede Farbprobe in diesen Tools kann als Hex kopiert werden.

Browser-DevTools. Klicken Sie mit der rechten Maustaste auf ein beliebiges Element auf einer Webseite und prüfen Sie es. Das CSS-Panel zeigt berechnete Farbwerte, die Sie anklicken können, um zwischen Formaten einschließlich Hex zu wechseln.

ColorFYI-Farbseiten. Jede Farbdetailseite auf ColorFYI – wie /color/3B82F6/ – zeigt den vollständigen Hex-Code neben RGB-, HSL-, CMYK- und OKLCH-Werten sowie den Farbnamen, falls vorhanden.

Der Farbkonverter. Wenn Sie eine Farbe in RGB oder HSL haben und das Hex-Äquivalent benötigen, fügen Sie sie in den Farbkonverter ein für eine sofortige Übersetzung.

Wichtigste Erkenntnisse

• Ein Hex-Farbcode ist eine sechsstellige hexadezimale Zahl, bei der die ersten zwei Zeichen den Rotkanal, die mittleren zwei Grün und die letzten zwei Blau kodieren.
• Jedes Kanalpaar reicht von 00 (0 Intensität) bis FF (255 Intensität), was dem vollen 0–255-Bereich des RGB-Modells entspricht.
• Hohe hexadezimale Ziffern zeigen hohe Kanalintensität an; niedrige Ziffern zeigen niedrige Intensität an. Gleiche Werte über alle drei Kanäle erzeugen Neutraltöne (Schwarz, Grau, Weiß).
• Dreistellige Kurzschreibweise (#RGB) ist gültig, wenn jedes Paar dieselbe Ziffer wiederholt – #336699 wird zu #369.
• Achtstelliges Hex (#RRGGBBAA) fügt einen Alpha-Transparenzkanal hinzu; die letzten zwei Ziffern reichen von 00 (transparent) bis FF (opak).
• Verwenden Sie den Farbkonverter, um jeden Hex-Code sofort in RGB, HSL, CMYK oder OKLCH zu übersetzen.
• Hex-Codes sind in CSS nicht von der Groß-/Kleinschreibung abhängig. Standardisieren Sie auf eine Konvention (ausschließlich Großbuchstaben oder ausschließlich Kleinbuchstaben) für Konsistenz.