Hex-Farbcodes erklärt: So funktioniert #RRGGBB

So funktioniert ein Hex-Farbcode

Jede Farbe auf einem Bildschirm wird aus rotem, grünem und blauem Licht gemischt. Ein Hex-Code schreibt die Stärke jedes Lichts als zwei Zeichen nach dem #-Zeichen: zuerst Rot, dann Grün, dann Blau. Das ist das Muster #RRGGBB.

Die Zeichen sind hexadezimal, also ein Zahlensystem mit 16 Ziffern: 0 bis 9, dann a (10), b (11), c (12), d (13), e (14) und f (15). Ein Paar deckt 256 Werte ab, von 00 (0) bis ff (255), genau den Bereich von rgb().

Um ein Paar in eine normale Zahl umzurechnen, multiplizierst du die erste Ziffer mit 16 und addierst die zweite. Unten siehst du #1e90ff, die CSS-Farbe dodgerblue, in vier Formaten und danach Paar für Paar ausgerechnet.

#1e90ff ist also rgb(30, 144, 255): wenig Rot, ordentlich Grün und volles Blau, zusammen ein helles Himmelblau. Drei Paare mit je 256 Werten ergeben 16.777.216 mögliche Farben.

3- und 4-stellige Hex-Kurzform

Wenn beide Ziffern jedes Paares gleich sind, kannst du jedes Paar einmal schreiben. Aus #ffcc00 wird #fc0, und der Browser verdoppelt jede Ziffer wieder. #1e90ff hat keine Kurzform, weil 1e und 90 keine doppelten Paare sind.

Die Kurzform deckt nur 4.096 der 16,7 Millionen Farben ab. Eine vierstellige Variante ergänzt auf dieselbe Weise die Deckkraft, #f008 bedeutet also #ff000088.

Hex-Transparenz: 8-stelliges Hex mit Alpha

Ein achtstelliger Code ergänzt ein viertes Paar für Alpha, also die Deckkraft: #RRGGBBAA. 00 ist vollständig transparent, ff vollständig deckend. Alle aktuellen Browser unterstützen das in CSS, ebenso die vierstellige Kurzform #RGBA.

Für das Paar multiplizierst du die Deckkraft mit 255, rundest auf eine ganze Zahl und rechnest sie in Hex um. 50 % ergeben 127,5, gerundet 128, geschrieben als 80. Hier die vollständige Tabelle, angewendet auf #1e90ff.

.overlay {
    background: #00000080;
}

.overlay-same {
    background: rgb(0 0 0 / 50%);
}

Zwei Haken. Erstens ist 80 gleich 128 von 255, also 50,2 % und nicht genau 50 %: Hex-Alpha hat nur 256 Stufen, daher sind die meisten runden Prozentwerte nur Näherungen. Zweitens setzt Android Alpha an den Anfang. In einer Android-Farbressource bedeutet #801e90ff dasselbe wie #1e90ff80 in CSS.

Hex-Codes mit bloßem Auge lesen

Du kannst eine Farbe erraten, ohne etwas umzurechnen. Schau auf die erste Ziffer jedes Paares, denn sie trägt fast die gesamte Information.

• Die größte erste Ziffer zeigt das vorherrschende Licht. #d2691e hat d bei Rot, 6 bei Grün und 1 bei Blau, also ein orangefarbenes Braun.
• Zwei hohe Kanäle mischen sich: Rot und Grün ergeben Gelb, Grün und Blau ergeben Cyan, Rot und Blau ergeben Magenta oder Violett.
• Drei gleiche Paare ergeben ein Grau. #333333 ist Dunkelgrau, #999999 Hellgrau. Fast gleiche Paare wie bei #708090 ergeben eine gedeckte, gräuliche Farbe.
• Hohe Ziffern insgesamt bedeuten eine helle Farbe, niedrige eine dunkle. Liegen alle drei Paare bei c0 oder höher, ist die Farbe blass. Liegen alle drei bei 30 oder darunter, ist sie sehr dunkel.
• Grün wirkt bei gleicher Zahl viel heller als Blau. #00ff00 hat eine OKLCH-Helligkeit von 0,866, #0000ff nur 0,452.

Warum #808080 kein Mittelgrau ist

#808080 liegt zahlenmäßig genau in der Mitte: 128 von 255 in jedem Kanal. Es wirkt aber nicht wie die Hälfte zwischen Schwarz und Weiß. Seine OKLCH-Helligkeit ist 0,600, es wirkt also wie 60 % des Weges zu Weiß.

Hex-Werte sind bereits mit der sRGB-Kurve kodiert, die dem Auge grob folgt, aber nicht exakt. #808080 gibt etwa 21,6 % des Lichts von Weiß ab, und Wahrnehmungsmodelle setzen die visuelle Mitte tiefer an: OKLCH bei #636363, CIELAB bei #777777.

Für Text ist das wichtig. Grau #808080 auf Weiß kommt auf 3,95:1 und fällt bei WCAG AA für Fließtext durch. #767676 ist das hellste Grau, das 4,5:1 schafft, und #777777, nur eine Stufe heller, fällt mit 4,48:1 bereits durch.

Groß oder klein, mit oder ohne #

Bei Hex-Codes spielt Groß- und Kleinschreibung keine Rolle. #1E90FF, #1e90ff und #1E90ff sind in CSS, SVG und Design-Tools dieselbe Farbe. Entscheide dich für eine Schreibweise und bleib überall dabei, damit eine Suche im Code jede Verwendung findet. In CSS ist Kleinschreibung üblich.

Das #-Zeichen gehört zur CSS-Syntax, nicht zur Farbe. Figma und viele Design-Tools zeigen den Code ohne #, und Programmiersprachen schreiben ihn oft als Zahl mit dem Präfix 0x, etwa in Flutter, wo Color(0xFF1E90FF) mit dem Alpha-Paar beginnt.

Den Hex-Code einer Farbe auf dem Bildschirm finden

Nimm eine Pipette: ein Werkzeug, das die Farbe unter dem Mauszeiger ausliest und ihren Code anzeigt. Solche Tools sind kostenlos und meist schon installiert.

• Chrome und Edge: Öffne die DevTools mit F12, klick im Bereich „Stile“ auf ein beliebiges Farbquadrat und nimm mit dem Pipettensymbol eine Farbe von der Seite auf.
• PickShade: Der Farbwähler auf der Startseite hat in Chrome und Edge eine Pipetten-Schaltfläche, die Farben von überall auf dem Bildschirm aufnimmt.
• Windows: Installiere Microsoft PowerToys und drück Win + Umschalt + C, um den Farbwähler (Color Picker) zu öffnen.
• macOS: Öffne „Digital Color Meter“ unter „Programme“ > „Dienstprogramme“. Stell es auf sRGB um und wähle im Menü „Darstellung“ die Anzeige der Werte als Hexadezimalzahlen.
• Figma, Photoshop und die meisten Design-Apps: Drück I für die Pipette.
• In einem Foto oder Screenshot: Öffne es im Bild-Farbwähler und klick auf ein beliebiges Pixel. Das Bild bleibt auf deinem Gerät.

Ein aufgenommener Wert kann ein paar Einheiten vom Original abweichen, weil Bildschirme Farbprofile anwenden und Bilder komprimiert sind. Wenn du den exakten Wert brauchst, kopiere ihn aus der Designdatei oder dem CSS, nicht aus einem Screenshot.

Fragen und Antworten