Was ist ein Hex-Code? Die Sprache der digitalen Farbe

Jede Farbe auf jeder Website, App und jedem digitalen Interface hat eine präzise numerische Adresse. Für einen Großteil der Webgeschichte hat diese Adresse eine bestimmte Form angenommen: ein Rautensymbol gefolgt von sechs Zeichen, wie #3B82F6 oder #FF5733. Das sind Hex-Codes – die Lingua franca der digitalen Farbe.

Wenn man für Bildschirme designt, Web-Anwendungen entwickelt oder mit einem Designwerkzeug arbeitet, begegnet man Hex-Codes ständig. Dieser Artikel erklärt genau, was sie sind, wie das hexadezimale Zahlensystem sie zum Funktionieren bringt, und alles Wissenswerte über Kurzschreibweise, Alpha-Transparenz und das Finden von Hex-Codes für jede Farbe.

Das hexadezimale Zahlensystem

Das Wort „Hex" kommt vom griechischen hexas, was sechs bedeutet, und „dezimal" vom Lateinischen für zehn. Hexadezimal ist ein Basis-16-Zahlensystem – im Vergleich zum Basis-10-Dezimalsystem, das im Alltag verwendet wird.

Im Basis-10-System zählt man: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 – und fügt dann eine Stelle hinzu: 10, 11, 12 ...

Im Basis-16-System zählt man: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 – und verwendet dann Buchstaben, um fortzufahren: A, B, C, D, E, F – bevor eine Stelle hinzugefügt wird: 10 (was 16 im Dezimalsystem entspricht), 11 (17), ... FF (255).

Warum Basis-16 für Farben?

Der Grund ist elegant praktisch. Ein Computerbyte enthält 8 binäre Bits und kann Werte von 0 bis 255 halten. Im Hexadezimalsystem passt dieser gesamte Bereich in genau zwei Stellen: 00 (0) bis FF (255). Das macht Hex zu einer kompakten und lesbaren Kodierung für bytegroße Werte – genau das, was jeder Farbkanal ist.

Im RGB-Farbmodell ist jeder der drei Kanäle – Rot, Grün, Blau – ein Wert von 0 bis 255. Im Hexadezimalsystem ist das 00 bis FF. Drei Kanäle, zwei Hex-Stellen pro Kanal, ergibt sechs Zeichen insgesamt. Das #-Präfix zum Signalisieren von „dies ist eine Farbe" hinzufügen, und man hat den Standard-Hex-Farbcode.

6-stellige Hex-Codes lesen (#RRGGBB)

Ein Standard-Hex-Farbcode hat die Struktur #RRGGBB:

• # — Präfix, das einen Hex-Farbwert signalisiert
• RR — zwei Hex-Stellen kodieren den Rotkanal (00–FF)
• GG — zwei Hex-Stellen kodieren den Grünkanal (00–FF)
• BB — zwei Hex-Stellen kodieren den Blaukanal (00–FF)

Ein Beispiel dekodieren

Nehmen wir #FF5733 – ein warmes Korallrot:

Der maximale Rotkanal mit moderatem Grün und niedrigem Blau erzeugt ein lebhaftes Orangerot. Das niedrige Blau verhindert, dass die Farbe ins Neutrale kippt.

Nun nehmen wir #3B82F6 – ein Himmelblau:

Das dominante Blau mit moderatem Grün erzeugt ein lebhaftes Mittelblau mit leichter Cyan-Qualität. Das niedrige Rot hält es kühl.

Schnelle Lese-Heuristiken

Sobald die Struktur verstanden ist, lassen sich Hex-Codes annähernd auf einen Blick lesen:

• 00 in einem Kanal = keines dieses Primärfarbstoffs (vollständig dunkel in diesem Kanal)
• FF in einem Kanal = volle Intensität dieses Primärfarbstoffs
• 80 ≈ halbe Intensität (128 von 255)

Das ermöglicht, gängige Codes schnell zu dekodieren:

Gleiche Werte in allen drei Kanälen erzeugen immer ein Neutral – Grau, Schwarz oder Weiß, je nach Wert. Ungleiche Werte erzeugen immer eine Farbe. Die höheren Werte zeigen an, welche Primärfarbe dominiert.

Helle vs. dunkle Hex-Codes erkennen

Wenn alle sechs Zeichen hohe Hex-Werte haben (C, D, E, F), wird die Farbe hell sein. Sind alle niedrig (0, 1, 2, 3), wird sie dunkel sein. Das ermöglicht ein sofortiges Helligkeitslesen:

• #F0E6D3 — alle hohen Werte → helles Warmbeige
• #1A1A2E — alle niedrigen Werte → sehr dunkles Navy
• #7C3AED — gemischte Werte, hohes Blau → mittleres Lila

3-stellige Kurzschreibweise

CSS erlaubt eine dreizeichige Hex-Kurzschreibweise, wenn jedes Paar der vollen sechsstelligen Codes aus zwei identischen Zeichen besteht. #AABBCC wird zu #ABC. Jede Kurzschreibstelle wird einfach verdoppelt, um die Vollversion zu erzeugen.

Wann Kurzschreibweise gültig ist

Kurzschreibweise funktioniert nur, wenn jedes Paar eine wiederholte Stelle ist. #3B82F6 kann nicht verkürzt werden, weil 3B, 82 und F6 keine verdoppelten Paare sind. Aber #336699 qualifiziert sich als #369, weil 33, 66 und 99 jeweils eine einzelne Stelle wiederholen.

In der Praxis ist die Kurzschreibweise eine gültige CSS-Funktion, aber viele Teams standardisieren auf die vollständige sechsstellige Form für Klarheit. Die sechsstellige Version macht sofort deutlich, was jeder Kanalwert ist. Viele Linter und Styleguides erzwingen vollständiges Hex für Konsistenz.

8-stelliges Hex mit Alpha-Transparenz

Der Standard-Sechszeichen-Hex-Code kodiert nur RGB – es gibt keine Deckkraftinformation. Um Alpha-Transparenz hinzuzufügen (die Kontrolle darüber, wie opak oder transparent eine Farbe ist), unterstützt CSS ein achtstelliges Hex-Format:

#RRGGBBAA

Das abschließende AA-Paar kodiert den Alphakanal, wobei derselbe 0–255-Bereich wie die Farbkanäle verwendet wird, auf Deckkraft abgebildet:

Praktische 8-stellige Hex-Beispiele

Ein dunkles Overlay für Modal-Hintergründe: #000000 bei 70 % Deckkraft → #000000B3

Ein Markenblau #3B82F6 bei 50 % Deckkraft → #3B82F680

Reines Weiß #FFFFFF bei 10 % Deckkraft (subtile Hervorhebung) → #FFFFFF1A

/* Modal-Überlagerung */
.modal-overlay {
  background-color: #000000B3;
}

/* Mattiertes Glaspanel */
.glass-card {
  background-color: #FFFFFF1A;
  backdrop-filter: blur(12px);
}

4-stellige Alpha-Kurzschreibweise

So wie die #RGB-Kurzschreibweise für #RRGGBB existiert, gibt es eine #RGBA-Kurzschreibweise für #RRGGBBAA:

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

Hex-Alpha vs. rgba()

Bevor das achtstellige Hex breit unterstützt wurde, war der Standardweg zur Transparenz CSS rgba():

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

Beide werden in allen modernen Browsern gut unterstützt. Die rgba()-Form ist in CSS oft lesbarer, weil die Deckkraft als Dezimalzahl von 0 bis 1 ausgedrückt wird, was sofort verständlich ist. Die achtstellige Hex-Form ist kompakter, erfordert aber mentale Konvertierung von Hex in Deckkraft-Prozentwerte.

Hex-Codes finden und konvertieren

In Designwerkzeugen

Jedes wichtige Designwerkzeug zeigt Hex-Werte an:

• Figma — Auf eine Farbfüllung oder -kontur klicken; der Hex-Code erscheint im Füllung-Panel rechts. „HEX" klicken zum Kopieren.
• Adobe Illustrator / Photoshop — Der Farbwähler und das Farbfeldpanel zeigen Hex-Codes an. Fenster > Farbe, wenn das Panel nicht sichtbar ist.
• Sketch — Das Füllungsfeld zeigt Hex-Codes mit einem Kopieren-Button.
• Canva — Auf ein Element und dann auf den Füllungsfarb-Chip klicken, um den Hex-Code zu sehen und zu kopieren.

In Webbrowsern

Rechtsklick auf ein Element einer Webseite und „Untersuchen" oder „Element untersuchen" wählen. In den Browser-DevTools das Element im CSS-Panel finden. Auf einen Farbwert klicken – er durchläuft oft Formatoptionen (Hex, RGB, HSL, OKLCH) mit jedem Klick. Chrome DevTools zeigt auch einen Farbwähler an.

Für schnelles Farbaufnehmen ohne DevTools ermöglichen Browser-Extensions wie ColorZilla (Chrome/Firefox) das Abgreifen eines beliebigen Bildschirmpixels und das Kopieren seines Hex-Codes.

Auf ColorFYI

Jede Farbdetailseite auf ColorFYI – wie /color/FF5733/ oder /color/3B82F6/ – zeigt den vollständigen Hex-Code zusammen mit RGB-, HSL-, CMYK- und OKLCH-Werten an. Wenn eine Farbe in einem anderen Format vorliegt, kann der Farbkonverter sie sofort in Hex konvertieren:

• RGB zu Hex: rgb(255, 87, 51) eingeben → #FF5733 erhalten
• HSL zu Hex: hsl(11, 100%, 60%) eingeben → das Hex-Äquivalent erhalten
• CMYK zu Hex: CMYK-Prozentwerte eingeben → den ungefähren sRGB-Hex erhalten

Häufige Hex-Konvertierungstabelle

Hex in CSS: Praktische Verwendung

Hex-Codes funktionieren in jeder CSS-Eigenschaft, die einen Farbwert akzeptiert:

/* Text */
color: #1E293B;

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

/* Rahmen */
border: 1px solid #E2E8F0;

/* Box-Shadow mit Alpha */
box-shadow: 0 4px 16px #0000001A;

/* CSS Custom Properties */
:root {
  --color-primary: #3B82F6;
  --color-primary-dark: #1D4ED8;
  --color-surface: #F8FAFC;
}

Groß-/Kleinschreibung

Hex-Codes sind in CSS nicht Groß-/Kleinschreibungs-sensitiv. #3B82F6, #3b82f6 und #3B82f6 sind identisch. Die meisten Teams standardisieren entweder auf alles Großbuchstaben oder alles Kleinbuchstaben für Konsistenz. Großbuchstaben sind in Designwerkzeugen traditionell; Kleinbuchstaben sind in modernen Codebasen beliebt und werden von vielen Lintern bevorzugt.

Wichtige Erkenntnisse

• Ein Hex-Code ist eine sechsstellige hexadezimale Zahl, die RGB-Farbwerte kodiert. Die Struktur ist #RRGGBB – je zwei Hex-Stellen für Rot, Grün und Blau.
• Hexadezimal ist Basis-16 und verwendet Stellen 0–9 und Buchstaben A–F. Jedes zweistellige Hex-Paar kodiert einen Wert von 0 (00) bis 255 (FF), was dem vollständigen Bereich eines RGB-Kanals entspricht.
• Einen Hex-Code lesen: Hohe Werte in einem Paar bedeuten hohe Kanalintensität. Gleiche Werte in allen drei Paaren erzeugen ein Neutral (Grau, Schwarz oder Weiß). Ungleiche Werte erzeugen eine Farbe, die zum höchsten Kanal neigt.
• 3-stellige Kurzschreibweise (#RGB) ist gültig, wenn jedes Paar eine einzelne Stelle wiederholt – #336699 verkürzt sich zu #369.
• 8-stelliges Hex (#RRGGBBAA) fügt einen Alphatransparenzkanal hinzu. Die letzten zwei Stellen reichen von 00 (transparent) bis FF (opak).
• Hex-Codes lassen sich im Farbwähler jedes Designwerkzeugs, in Browser-DevTools durch Untersuchen von Elementen oder auf jeder ColorFYI-Farbseite finden.
• Den Farbkonverter verwenden, um sofort zwischen Hex, RGB, HSL, CMYK und OKLCH zu konvertieren.