CSS-Farbnotation · sRGB · Transparenz
So funktionieren HEX-Farbcodes
Lesen Sie sechs Stellen als Rot-, Grün- und Blau-Paare, verstehen Sie dreistellige Kurzformen und achtstellige Alpha-Werte und prüfen Sie die Farbe anschließend im echten Kontext.
HEX-Farbcodes
Was bedeuten HEX-Farbcodes?
HEX-Farbcodes sind kompakte sRGB-Anweisungen. In #RRGGBB legt RR Rot, GG Grün und BB Blau fest; jedes Paar reicht von 00 bis FF, also dezimal von 0 bis 255. CSS akzeptiert außerdem #RGB als Kurzform, #RGBA mit Transparenz und #RRGGBBAA mit einem vollständigen Alpha-Paar. Diese Formen beschreiben numerische Kanäle, nicht einen universellen Farbnamen, eine kalibrierte Darstellung oder ein automatisches Ergebnis zur Barrierefreiheit. Entscheidend ist, HEX-Farbcodes korrekt zu entschlüsseln, unverändert zu bewahren und anschließend auf dem vorgesehenen Hintergrund und im tatsächlichen Zustand zu testen.
Vier Regeln, die Sie sich merken sollten
- HEX-Farbcodes: sechs Stellen bilden drei Paare für Rot, Grün und Blau im sRGB-Farbraum
- HEX-Farbcodes: drei Stellen werden durch Verdoppeln erweitert, daher entspricht #3A7 exakt #33AA77
- HEX-Farbcodes: vier- und achtstellige Formen setzen Alpha ans Ende; 00 ist transparent und FF deckend
- HEX-Farbcodes: derselbe Wert kann auf anderen Displays und Hintergründen anders wirken, die Notation ist nur ein Teil der Entscheidung
Die vier CSS-HEX-Formen im Vergleich
CSS Color Module Level 4 definiert vier gültige Längen. Die Tabelle trennt Kanalreihenfolge, Genauigkeit und Transparenz, damit ähnlich aussehende HEX-Farbcodes nicht als austauschbare Zeichenketten behandelt werden.
| Form | Kanalreihenfolge | Beispiel | Entsprechung | Mögliche Zustände |
|---|---|---|---|---|
| #RGB · HEX-Farbcodes | Rot, Grün, Blau | #3A7 | #33AA77 | 4.096 Farben |
| #RGBA · HEX-Farbcodes | Rot, Grün, Blau, Alpha | #3A7C | #33AA77CC | 4.096 Farben × 16 Alpha-Stufen |
| #RRGGBB · HEX-Farbcodes | Rot, Grün, Blau | #33AA77 | rgb(51 170 119) | 16.777.216 Farben |
| #RRGGBBAA · HEX-Farbcodes | Rot, Grün, Blau, Alpha | #33AA77CC | rgb(51 170 119 / 80%) | 16.777.216 Farben × 256 Alpha-Stufen |
HEX-Farbcodes: Jeden Kanal als Basis-16-Zahl lesen
Das Hexadezimalsystem verwendet sechzehn Zeichen: 0 bis 9 und anschließend A bis F für die Dezimalwerte 10 bis 15. Zwei Zeichen können daher 16 × 16 beziehungsweise 256 Zustände codieren. Bei sechsstelligen HEX-Farbcodes gehört das erste Paar zu Rot, das zweite zu Grün und das dritte zu Blau. 00 ist der minimale, FF der maximale Wert 255. In #2468AC ist Rot 0x24 oder 36, Grün 0x68 oder 104 und Blau 0xAC oder 172. Die Schreibweise rgb(36 104 172) beschreibt dieselben sRGB-Koordinaten.
Sie müssen nicht jedes Paar im Kopf umrechnen, um HEX-Farbcodes sinnvoll zu lesen. Paare nahe 00 sind schwach, Paare nahe FF stark; gleiche Paare wie in #777777 ergeben ein neutrales Grau, weil Rot, Grün und Blau denselben Wert haben. Exakte Umrechnung ist jedoch bei Code, Design-Tokens, Kontrastberechnung und Übergaben wichtig. Kopieren Sie das Doppelkreuz und alle sechs Stellen, vereinheitlichen Sie die Groß- oder Kleinschreibung gemäß Projektkonvention und lassen Sie ein Werkzeug die Dezimalwerte bestätigen, statt aus einem geschätzten Farbnamen auf die Kanäle zu schließen.
HEX-Farbcodes: Kurzformen verstehen, bevor ein Wert gekürzt wird
Dreistellige HEX-Farbcodes sind keine sechsstelligen Werte mit beliebig ausgelassener Genauigkeit. Jedes Zeichen wird verdoppelt: #F09 wird zu #FF0099, #ABC zu #AABBCC und #123 zu #112233. Eine sechsstellige Farbe darf nur dann gekürzt werden, wenn in jedem der drei Paare beide Zeichen gleich sind. #33AA77 kann zu #3A7 werden, #32AA77 dagegen nicht. Daraus folgt die Genauigkeit: Die Kurzform bietet 16 Werte pro Kanal und damit 16³ oder 4.096 Farben; sechs Stellen bieten 256 Werte pro Kanal und damit 256³ oder 16.777.216 Farben.
Kurze HEX-Farbcodes sind nützlich, wenn sie mathematisch exakt bleiben, doch drei gesparte Zeichen rechtfertigen keine Änderung einer Marken- oder UI-Farbe. Bewahren Sie im Token-System die sechsstellige Quelle, sofern die Kurzform nicht ausdrücklich Teil der Teamkonvention ist. Groß- und Kleinschreibung verändern die Farbe nicht: #00ff88 und #00FF88 sind identisch. Eine einheitliche Schreibweise erleichtert trotzdem Suche und Review. Bei einer Übergabe zählen Doppelkreuz, gültige Länge, Reihenfolge der Paare und exakte Zeichen – nicht die typografische Vorliebe für A bis F.
HEX-Farbcodes: Alpha hinter Blau setzen
Achtstellige HEX-Farbcodes folgen #RRGGBBAA. Das letzte Paar ist Alpha: 00 bedeutet vollständig transparent, FF vollständig deckend, Zwischenwerte teilweise deckend. #0000FFCC ist beispielsweise Blau mit Alpha CC; das W3C-Beispiel setzt dies mit 80 % Deckkraft gleich. Vierstelliges #RGBA wird wie die dreistellige Form erweitert, sodass #05AC zu #0055AACC wird. Einige Grafiksysteme und ältere APIs zeigen gepackte Bytes in einer anderen Reihenfolge. In modernem CSS gilt die CSS-Form, und Alpha bleibt am Ende.
Transparenz erzeugt allein keine feste sichtbare Farbe. Teiltransparente HEX-Farbcodes werden über dem jeweiligen Hintergrund zusammengesetzt; #00000080 erscheint deshalb auf Weiß, Gelb oder einem Foto als unterschiedliches Grau. Speichern Sie Vordergrund und Auswertungshintergrund gemeinsam, wenn das Aussehen wichtig ist. Entfernen Sie Alpha nicht, nur weil ein Werkzeug einen sechsstelligen Nachbarn meldet, und hängen Sie nicht 80 an, weil Sie 80 % erwarten: Hexadezimal 80 entspricht dezimal 128 und damit etwa 50,2 % von 255. Rechnen Sie die gewünschte Deckkraft bewusst um.
HEX-Farbcodes: Erkennen, was HEX bewahrt und was nicht
CSS-HEX-Farbcodes spezifizieren sRGB direkt. Sie sind kompakt und verbreitet, beschreiben aber weder eine Display-P3-Farbe mit großem Gamut noch einen geräteunabhängigen Lab-Wert, ein CMYK-Druckrezept oder eine gemessene Materialprobe. Wird eine Wide-Gamut-Quelle in sechsstellige HEX-Farbcodes umgewandelt, können Farben in sRGB abgebildet oder beschnitten werden. Screenshot, Browser-Pipette und Designdatei können durch Profile, Displayfähigkeiten und Exportbehandlung ebenfalls abweichen. Bewahren Sie den Quellfarbraum, wenn er relevant ist, und verwenden Sie HEX als Lieferformat, wenn sRGB wirklich das Ziel ist.
Eine numerische Übereinstimmung entscheidet auch nicht über Name oder Barrierefreiheit. Mehrere Namen können benachbarte HEX-Farbcodes beschreiben; CSS-Farbnamen sind eine ungleichmäßige historische Liste, kein vollständiger menschlicher Wortschatz. Ebenso besitzt ein einzelner Wert kein Kontrastverhältnis, bis er mit einer anderen gerenderten Farbe kombiniert wird. WCAG 2.2 vergleicht die relative Leuchtdichte von Vorder- und Hintergrund und berücksichtigt erforderliche Alpha-Komposition. Nutzen Sie den Farbnamen-Finder für beschreibende Nachbarn, die Bild-Pipette für lokale Pixel und den Kontrast-Checker für ein echtes Paar.
Checkliste für eine zuverlässige HEX-Übergabe
Prüfen Sie vor dem Eintrag in CSS, Palette oder Design-Token sowohl die Notation als auch die Entscheidung dahinter.
- HEX-Farbcodes: bestätigen Sie nach dem Doppelkreuz exakt 3, 4, 6 oder 8 hexadezimale Zeichen
- HEX-Farbcodes: erweitern Sie Kurzformen in einer präzisen Review, damit alle Kanäle sichtbar sind
- HEX-Farbcodes: dokumentieren Sie, ob Alpha beabsichtigt ist, und nennen Sie den geprüften Hintergrund
- HEX-Farbcodes: bewahren Sie sRGB als angenommenen Farbraum, statt den Wert als universell darzustellen
- HEX-Farbcodes: prüfen Sie Kontrast, Benennung und Aussehen jeweils mit dem passenden eigenen Werkzeug
Einen HEX-Wert in drei Schritten verwenden
Ein kurzer Ablauf hält den kopierten Code nachvollziehbar und trennt Entschlüsselung, Beschreibung und Prüfung.
HEX-Farbcodes: 1. Entschlüsseln und vereinheitlichen
HEX-Farbcodes: fügen Sie den vollständigen Wert ein, prüfen Sie die Länge, erweitern Sie bei Bedarf die Kurzform und behalten Sie Alpha. Bestätigen Sie die RGB-Zahlen, bevor Sie einen Kanal ändern.
HEX-Farbcodes: 2. Beschreiben oder aufnehmen
HEX-Farbcodes: verwenden Sie den Farbnamen-Finder für ein lesbares Kommunikationslabel oder die Bild-Pipette für ein Pixel aus einer lokalen Datei. Ein Name ist ein beschreibender Nachbar, keine offizielle Identität.
HEX-Farbcodes: 3. Das echte Paar testen
HEX-Farbcodes: setzen Sie den Vordergrund auf den vorgesehenen Hintergrund, berücksichtigen Sie Transparenz und prüfen Sie den Kontrast. Speichern Sie beide Werte, Zustand und Begründung im Token oder in der Implementierungsnotiz.
Was die offiziellen Quellen festhalten
Die öffentlichen Spezifikationen wurden am 31. Juli 2026 geprüft. Die Zahlen beschreiben Syntax und Prüfregeln, nicht Suchrang oder identisches Aussehen.
- HEX-Farbcodes: CSS Color Module Level 4 definiert 3, 4, 6 und 8 Stellen, dokumentiert die Kanalreihenfolge und nennt 4.096 Farben bei drei gegenüber ungefähr 17 Millionen bei sechs Stellen. W3C-Abschnitt zur HEX-Notation lesen
- HEX-Farbcodes: MDN dokumentiert dieselben vier Syntaxformen, den Bereich 0 bis FF, Zeichenverdopplung, Groß-/Kleinschreibungsunabhängigkeit und die Alpha-Endpunkte. MDN-Referenz zu <hex-color> lesen
- HEX-Farbcodes: Die WCAG-2.2-Erläuterung nennt unter anderem 4,5:1 für normalen und 3:1 für großen Text; ein isolierter Farbwert kann keines dieser Verhältnisse liefern. WCAG-Kontrasthinweise lesen
“The number of hex digits given determines how to decode the hex notation into an RGB color.”
Fragen zu HEX-Farbcodes
Sind HEX und RGB verschiedene Farben?
HEX-Farbcodes: Nicht, wenn Koordinaten und Farbraum übereinstimmen. Sechsstellige HEX-Farbcodes und rgb() können dieselben sRGB-Kanäle ausdrücken: #33AA77 entspricht rgb(51 170 119). Die Notation ändert sich, nicht die Zielfarbe. Neuere CSS-Funktionen können weitere Farbräume darstellen; prüfen Sie deshalb den Raum, bevor Sie immer eine direkte sechsstellige Entsprechung erwarten.
Steht Transparenz in #RGBA vorn oder hinten?
HEX-Farbcodes: Hinten. Vier- und achtstellige HEX-Farbcodes in CSS verwenden #RGBA und #RRGGBBAA, also folgt A auf Blau. #3A7C wird zu #33AA77CC. Andere Software kann gepackte Ganzzahlen in einer anderen Byte-Reihenfolge zeigen. Prüfen Sie jeden Wert aus einer Nicht-CSS-API, bevor er in ein Stylesheet übernommen wird.
Warum sehen identische HEX-Werte verschieden aus?
HEX-Farbcodes: Identische HEX-Farbcodes können von anderen Farben umgeben, auf verschiedenen Hintergründen komponiert oder auf Displays mit unterschiedlichen Profilen dargestellt werden. Der Code fixiert sRGB-Koordinaten und optional Alpha, nicht das gesamte Betrachtungssystem. Vergleichen Sie im vorgesehenen Interface und speichern Sie den Kontext.
Beweist ein HEX-Wert den WCAG-Kontrast?
HEX-Farbcodes: Nein. Ein Verhältnis benötigt mindestens Vorder- und Hintergrund sowie korrekte Behandlung von Transparenz und Zustand. HEX-Farbcodes liefern Eingaben; das Ergebnis entsteht aus dem Vergleich relativer Leuchtdichten. Testen Sie bei Bedarf normale, Hover-, deaktivierte und Fokus-Zustände als reale Paare.