Was ist ein Hex-Code?
Hex steht für "hexadezimal" — ein Zahlensystem mit 16 Zeichen statt der üblichen 10. Die Ziffern gehen von 0 bis 9, und dann folgen die Buchstaben A bis F. Mit zwei hexadezimalen Stellen lassen sich 256 Werte darstellen — genau die Anzahl Helligkeitsstufen, die ein Farbkanal in einem typischen Bildschirm hat.
Ein Hex-Code besteht immer aus einem Hash-Symbol (#) gefolgt von sechs Zeichen. Diese sechs Zeichen sind drei Paare:
- Die ersten zwei stehen für den Rot-Anteil
- Die mittleren zwei für den Grün-Anteil
- Die letzten zwei für den Blau-Anteil
Beispiel: #FF5722. FF = maximaler Rotanteil (255 dezimal), 57 = etwas Grün (87), 22 = noch weniger Blau (34). Zusammen ergibt das ein kräftiges Orange — exakt das Material-Design-Orange von Google.
Hex-Codes sind Standard im CSS, in UI-Design-Tools wie Figma und in praktisch jedem Branding-Guide — also dem zentralen Dokument, das alle visuellen Regeln einer Marke festhält. Wenn dir ein Designer "Verwende #1A1A1A für Headlines" sagt, meint er: ein bestimmtes, dunkles Anthrazit — und nichts anderes.
RGB, Hex, HSL — das gleiche Spiel in drei Sprachen
Im Web gibt es mehrere Arten, Farben zu beschreiben. Hex ist die populärste, aber nicht die einzige.
| Format | Beispiel für reines Rot | Wann verwenden |
|---|---|---|
| Hex | #FF0000 | Standard im Branding und CSS |
| RGB | rgb(255, 0, 0) | Wenn man mit Zahlen rechnen will |
| RGBA | rgba(255, 0, 0, 0.5) | Wenn Transparenz dazu kommt |
| HSL | hsl(0, 100%, 50%) | Wenn man Helligkeit oder Sättigung gezielt anpasst |
| HSLA | hsla(0, 100%, 50%, 0.5) | HSL mit Transparenz |
Alle vier beschreiben theoretisch dieselbe Farbe, nur in unterschiedlicher Notation. Hex ist am kompaktesten und am verbreitetsten — deshalb stehen Hex-Codes in fast jedem Style-Guide. RGB-A und HSL-A sind nützlich, wenn du transparente Layer brauchst (z.B. einen halbtransparenten Schwarzfilter über einem Hero-Bild).
### 8-stelliges Hex mit Alpha-Kanal
Moderne Browser verstehen auch eine erweiterte Notation mit acht Stellen: #RRGGBBAA. Die letzten zwei Stellen sind der Alpha-Kanal, also die Deckkraft. 00 heißt durchsichtig, FF deckend. Beispiel: #FF000080 ist Rot mit 50 Prozent Transparenz. Praktisch für Overlays direkt im CSS, ohne auf rgba() umzusteigen.
Wie liest man einen Hex-Code?
Ein paar Faustregeln, mit denen du Hex-Codes auf einen Blick einordnen kannst:
- Drei gleiche Doppelpaare wie
#222222oder#EEEEEEsind immer Grautöne. Je höher der Wert, desto heller. #000000ist reines Schwarz,#FFFFFFreines Weiß.- Ein dominantes Paar zeigt den dominanten Kanal:
#FF0000reines Rot,#00FF00reines Grün,#0000FFreines Blau. - Mischungen sind die Regel.
#3498DBist ein freundliches Mittelblau (wenig Rot, mittel Grün, viel Blau). - Kurzform mit drei Stellen.
#F00ist die Kurzform von#FF0000— funktioniert bei identischen Doppelzeichen.
Wer das ein paarmal übt, kann Hex-Codes überfliegen und ungefähr sagen, welche Farbe gemeint ist — ohne Tool.
Beispiel-Tabelle: Häufige Markenfarben
Damit das nicht zu abstrakt bleibt, hier ein paar bekannte Hex-Codes aus der echten Welt:
| Marke | Hauptfarbe | Hex-Code |
|---|---|---|
| Coca-Cola | Rot | #F40009 |
| Blau | #1877F2 | |
| Spotify | Grün | #1DB954 |
| Slack | Aubergine | #4A154B |
| Grün | #25D366 | |
| Apple Schwarz | Anthrazit | #1D1D1F |
| Stripe Lila | Violett | #635BFF |
Jede dieser Farben ist exakt definiert — und in jedem Design-Material weltweit identisch. Genau das ist der Sinn von Hex: Eindeutigkeit, kein Spielraum für Missverständnisse.
Warum sind Hex-Codes für deine Website wichtig?
Hex-Codes sind die Sprache, in der dein Branding lebt. Wenn deine Marke ein bestimmtes Grün hat, muss dieses Grün auf jeder Seite, in jeder Grafik, in jedem Button exakt gleich aussehen. Ohne Hex-Codes wäre das Chaos. Mit Hex-Codes ist es ein Einzeiler: #1DB954, fertig.
Praktische Konsequenzen für dich als Website-Betreiber:
- Konsistenz. Dein Logo, deine Buttons, deine Akzente sehen überall gleich aus.
- Übergabe. Wenn du den Designer wechselst, gibt es keine Diskussion über "welches Grün". Hex-Code da, fertig.
- Print und Web. Hex-Codes gelten fürs Web. Für Druck brauchst du CMYK-Werte. Ein gutes Branding-Dokument hat beide.
- Barrierefreiheit. Mit Hex-Codes kannst du Kontrastverhältnisse berechnen — wichtig, damit deine Schrift lesbar bleibt.
Häufige Fehler beim Umgang mit Hex-Codes
Zu viele Farben im System. Wer zwölf Hex-Codes im Branding hat, baut keine Marke, sondern eine Tapete. Drei bis fünf reichen — eine Hauptfarbe, eine Akzentfarbe, ein Schwarz, ein Weiß, ein Grau.
Hex-Codes ohne Kontext speichern. Ein Branding-Doc, das nur eine Liste mit fünf Hex-Codes enthält, ist nutzlos. Es muss klar sein, welche Farbe wofür ist — Hauptfarbe, Akzent, Hintergrund, Fehlermeldung.
Schlechter Kontrast. Hellgrauer Text (#CCCCCC) auf weißem Hintergrund (#FFFFFF) sieht "edel" aus, ist aber unlesbar. Tools wie der WebAIM Contrast Checker zeigen dir in zwei Sekunden, ob ein Hex-Paar funktioniert.
Print und Web verwechseln. Ein Hex-Code beschreibt Bildschirmlicht, kein gedrucktes Pigment. Wer Hex-Codes an die Druckerei schickt, bekommt fast immer eine andere Farbe zurück, als er erwartet hat.