Hex-Farben: Farbcodes verstehen, umrechnen und richtig einsetzen

Du hast bestimmt schon mal einen Hex-Code gesehen – diesen kryptischen Zeichensalat wie #FF5733, der irgendwie eine Farbe beschreiben soll. Vielleicht hast du ihn aus Figma kopiert, in CSS eingefügt und dich gefragt: Was bedeutet das eigentlich genau?

Keine Sorge, du bist nicht allein. Hex-Farben sind das Rückgrat der digitalen Farbgebung, und trotzdem bleiben bei vielen Kreativen und Entwicklern Fragen offen. Wie funktioniert das System? Warum nicht einfach RGB nehmen? Und was hat es mit diesem OKLCH auf sich, von dem alle reden?

In diesem Guide klären wir alles – von den mathematischen Grundlagen über den Vergleich mit anderen Farbmodellen bis hin zu konkreten Tools, CSS-Code-Beispielen und professionellen Best Practices. Und ja, auch die Frage, warum green in CSS gar nicht das Grün ist, das du erwartest. 😉

Was sind Hex-Farben und wie funktionieren sie?

Ein Hex-Farbcode beginnt immer mit dem Zeichen #, gefolgt von sechs hexadezimalen Ziffern im Format #RRGGBB. Dabei steht RR für den Rotanteil, GG für den Grünanteil und BB für den Blauanteil. Das System basiert auf dem additiven RGB-Farbmodell – Farben entstehen durch die Mischung von rotem, grünem und blauem Licht, genau wie bei deinem Monitor.

Klingt ganz schön technisch? Ist es im Kern aber nicht!

Das Hexadezimalsystem arbeitet mit Basis 16 statt Basis 10. Das bedeutet: Du hast die Ziffern 0–9 und zusätzlich die Buchstaben A–F (wobei A=10, B=11, C=12, D=13, E=14 und F=15). Ein zweistelliger Hex-Wert ergibt 16 × 16 = 256 mögliche Stufen pro Kanal – von 00 (Farbe komplett aus, Dezimalwert 0) bis FF (volle Power, Dezimalwert 255).

Jetzt wird’s spannend: Wenn du drei Kanäle mit je 256 Stufen kombinierst, landest du bei 256 × 256 × 256 = 16.777.216 möglichen Farben. Das sind über 16,7 Millionen Farbtöne! Deswegen spricht man auch von 24-Bit-Farbe oder „True Color“ – und genau deshalb können digitale Geräte so unglaublich viele Farben darstellen.

Aber warum ausgerechnet Hexadezimal und nicht einfach Dezimalzahlen? Ganz einfach: Jede Hex-Ziffer entspricht exakt 4 Bit, zwei Hex-Ziffern bilden 1 Byte (8 Bit). Diese direkte Abbildung auf das Binärsystem machte Hex-Codes zum Standard in der Computertechnik – kompakter als Dezimalwerte und trotzdem eindeutig lesbar.

Damit du dir das besser vorstellen kannst, hier die wichtigsten Beispiele:

Das Prinzip ist eigentlich simpel: Je höher der Farbwert in einem Kanal, desto mehr von dieser Farbe wird beigemischt. Alle auf Null? Schwarz. Alle auf Maximum? Weiß. Alle auf denselben Mittelwert? Eine neutrale Graustufe.

Kurzschreibweise #RGB – wann funktioniert sie?

CSS erlaubt eine verkürzte 3-stellige Notation #RGB, bei der jede Ziffer verdoppelt wird. Das heißt: #F00 wird zu #FF0000 (Rot), #369 wird zu #336699, und #ABC wird zu #AABBCC.

Wichtig: Die Kurzschreibweise funktioniert ausschließlich dann, wenn in jedem Zeichenpaar des vollen Hex Codes beide Ziffern identisch sind. Farben wie #F07A3B oder #1E40AF lassen sich nicht verkürzen, weil die Paare 07, 7A, 3B aus unterschiedlichen Ziffern bestehen. Klingt logisch, oder?

Transparenz mit 8-stelligem Hex: #RRGGBBAA

Seit dem CSS Color Module Level 4 gibt es die 8-stellige Notation #RRGGBBAA. Die letzten zwei Zeichen kodieren den Alpha-Kanal (also die Deckkraft): 00 bedeutet vollständig transparent, FF bedeutet vollständig deckend.

Ein Beispiel: #FF000080 ergibt ein halbdeckendes Rot – denn hex 80 entspricht dem Dezimalwert 128, also ungefähr 50 % Deckkraft.

Hier die wichtigsten Alpha-Werte auf einen Blick:

Auch hier gibt es eine Kurzform: #RGBA. So wird #F098 zu #FF009988.

Die gute Nachricht: Laut Can I Use liegt die Browser-Unterstützung für 8-stellige Hex-Codes bei über 96 % weltweit. Chrome ab Version 62, Firefox ab 49, Safari ab 10, Edge ab 79 – nur der längst eingestellte Internet Explorer macht nicht mit. Und das ist heute wirklich kein Problem mehr.

Hex im Vergleich: RGB, HSL, OKLCH und CMYK

Jetzt wird’s richtig interessant. Denn Hex ist nicht das einzige Farbformat da draußen – und je nach Einsatzzweck gibt es bessere Alternativen. Lass uns die wichtigsten Farbmodelle Seite an Seite vergleichen.

Hex und RGB – im Kern dasselbe

Hex-Codes und die CSS-Funktion rgb() bilden identische Farben ab. Beide basieren auf dem RGB-Farbmodell. Der Unterschied ist rein notational: Hex nutzt Basis 16, rgb() nutzt Basis 10. Die Farbe #FF5733 entspricht exakt rgb(255, 87, 51).

Hex-Codes sind kompakter (sechs Zeichen statt bis zu 15 bei RGB), dafür sind RGB-Werte etwas lesbarer, wenn du die Kanalwerte auf einen Blick erfassen möchtest. In der Praxis ist es oft Geschmackssache, welches Format du nutzt – die meisten Design-Tools wie Figma, Adobe XD oder Canva geben Farben standardmäßig als Hex aus.

Wie Josh W Comeau in seinem ausführlichen Artikel über CSS-Farbformate erklärt, enthalten Hex und rgb() identische Informationen – die Hexpaare sind lediglich die in Basis 16 geschriebene Form der Dezimalwerte.

HSL glänzt bei dynamischen Farbanpassungen

HSL steht für Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit). Und genau hier wird’s spannend: HSL beschreibt Farben so, wie wir Menschen sie intuitiv wahrnehmen.

Der Farbton wird als Winkel auf dem Farbkreis angegeben (0°–360°), die Sättigung reicht von 0 % (komplett grau) bis 100 % (volle Farbe), und die Helligkeit von 0 % (schwarz) über 50 % (reine Farbe) bis 100 % (weiß).

Warum ist das so praktisch? Stell dir vor, du willst eine Farbe aufhellen. In HSL änderst du einfach den L-Wert: hsl(220, 80%, 50%) wird mit hsl(220, 80%, 70%) heller und mit hsl(220, 80%, 30%) dunkler – der Farbton bleibt exakt gleich. In Hex müsstest du dagegen alle drei Kanalwerte neu berechnen. Das ist ungefähr so, als würdest du mit Kanonen auf Spatzen schießen.

HSL ist damit die bessere Wahl für Theming und Design-Systeme, wo du z.B. einen Basis-Farbton als CSS-Variable definierst (--brand-hue: 220) und daraus eine komplette Farbpalette durch Variation von Sättigung und Helligkeit generierst. Auch für Hover-Effekte, Dark Mode oder animierte Farbübergänge ist HSL deutlich handlicher.

Für feste, statische Farbangaben reicht Hex aber völlig aus – und ist dank seiner Kompaktheit oft die pragmatischere Wahl.

OKLCH – die Zukunft der CSS-Farben

Jetzt wird’s richtig nerdig (auf die gute Art!). HSL hat nämlich trotz aller Vorteile einen systematischen Fehler: Es ist nicht perzeptuell gleichmäßig. Was heißt das? Ein Gelb bei 50 % Lightness wirkt für dein Auge deutlich heller als ein Blau bei 50 % Lightness – obwohl die mathematischen Werte identisch sind.

Genau hier kommt OKLCH ins Spiel. Dieser neue Farbraum aus dem CSS Color Module Level 4 löst dieses Problem elegant. OKLCH steht für Lightness, Chroma und Hue – aber im Gegensatz zu HSL ist die Helligkeit perzeptuell gleichmäßig. Das bedeutet: Gleiche numerische Änderungen in der Helligkeit erzeugen auch gleiche wahrgenommene Helligkeitsunterschiede. Wie Evil Martians in ihrem vielbeachteten Artikel erklären, löst OKLCH damit ein Problem, das RGB und HSL seit Jahrzehnten haben.

Noch ein Pluspunkt: OKLCH unterstützt den Display-P3-Farbraum, der rund 30 % mehr Farben als sRGB umfasst. Wenn du also auf einem modernen Apple- oder Samsung-Display arbeitest, kannst du mit OKLCH Farben darstellen, die mit Hex schlicht nicht möglich sind.

Der Browser-Support für OKLCH ist seit 2023 in allen modernen Browsern gegeben (Chrome 111+, Firefox 113+, Safari 15.4+). Für neue Projekte mit anspruchsvollen Farbsystemen lohnt sich der Blick auf OKLCH definitiv. Hex bleibt aber der universellste Standard für einfache sRGB-Farbangaben.

CMYK gehört zum Druck, Hex zum Bildschirm

Hex/RGB nutzt additive Farbmischung – du startest mit Schwarz (kein Licht) und fügst Rot, Grün und Blau hinzu, bis du bei Weiß landest. Im Druck ist es genau umgekehrt: CMYK (Cyan, Magenta, Yellow, Key/Black) arbeitet subtraktiv. Du startest mit weißem Papier und trägst Tinte auf, die Licht absorbiert.

Das Problem dabei: Die Farbräume überlappen sich nur teilweise. Leuchtende Neonfarben oder gesättigte Blautöne, die am Bildschirm problemlos darstellbar sind, liegen außerhalb des CMYK-Gamuts und werden beim Druck deutlich matter. Wie das Webdesign Journal erklärt, führt eine automatische, unkalibrierte Konvertierung von leuchtenden Hex-Farben in CMYK fast immer zu matten, schlammigen Resultaten.

Wann welches Farbmodell? Die Übersicht

Referenz: Die wichtigsten Hex-Farbcodes auf einen Blick

Grundfarben und Sekundärfarben

Beliebte Webfarben nach Kategorie

Pastelltöne – sanft, modern und extrem beliebt im UI-Design. Wenn du ein weiches, einladendes Interface bauen willst, bist du hier richtig: Lavender #E6E6FA, Misty Rose #FFE4E1, Powder Blue #B0E0E6, Pastelgelb #FDFD96, Rose Quartz #F7CAC9, Serenity Blue #92A8D1, Baby Blue #89CFF0, Mint Green #80EF80.

Neon- und Leuchtfarben – intensiv und aufmerksamkeitsstark. Perfekt für Gaming-Interfaces, Web3-Branding oder wenn du einfach auffallen willst: Neon Pink #FF1493, Electric Green #39FF14, Neon Orange #FF6600, Hot Magenta #FF00FF, Chartreuse #7FFF00, Electric Purple #BF00FF, Neon Red #FF004D.

Erdtöne – natürlich und zeitlos. Die Renaissance der warmen Erdtöne ist einer der stärksten Designtrends der letzten Jahre und löst die jahrelange Dominanz von kühlen Grautönen und sterilem Weiß ab: Terracotta #E2725B, Burnt Sienna #E97451, Sage Green #9BA187, Sand #F4A460, Khaki #C3B091, Sienna #A0522D, Olive #808000, Chocolate #D2691E, Taupe #483C32.

CSS-benannte Farben: 148 Keywords für den schnellen Einsatz

Die CSS Color Module Level 4 Spezifikation definiert 148 benannte Farb-Keywords, die 142 einzigartige Farbwerte repräsentieren (einige sind Aliase: aqua = cyan, fuchsia = magenta, gray = grey). Zu den populärsten gehören neben den Grundfarben: coral (#FF7F50), tomato (#FF6347), gold (#FFD700), dodgerblue (#1E90FF), crimson (#DC143C), salmon (#FA8072), turquoise (#40E0D0) und steelblue (#4682B4).

Die ungewöhnlichsten CSS-Farbnamen lesen sich übrigens wie ein Kochrezept: papayawhip (#FFEFD5), blanchedalmond (#FFEBCD), lemonchiffon (#FFFACD), peachpuff (#FFDAB9) und mintcream (#F5FFFA). Der längste Name? lightgoldenrodyellow (#FAFAD2) – viel Spaß beim Tippen!

Eine vollständige Übersicht aller benannten CSS-Farben findest du bei MDN Web Docs oder auf htmlcolorcodes.com.

Die Geschichte von rebeccapurple (#663399)

Websichere Farben: Ein Stück Internet-Geschichte

In den 1990er-Jahren konnten 8-Bit-Grafikkarten nur 256 Farben gleichzeitig darstellen. Da Windows und macOS jeweils 40 Systemfarben reservierten, die sich zwischen den Plattformen unterschieden, blieben genau 216 websichere Farben übrig, die auf beiden Systemen identisch aussahen. Wie Heise in einem Rückblick berichtet, entstanden diese websicheren Farben durch Kombination von sechs gleichmäßig verteilten Werten pro Kanal: 00, 33, 66, 99, CC, FF – also 6³ = 216 Kombinationen.

Wenn eine Webseite eine Farbe zeigte, die außerhalb dieser Palette lag, kam sogenanntes Dithering zum Einsatz: Der Computer versuchte, die fehlende Farbe durch ein unruhiges, schachbrettartiges Pixelmuster aus verfügbaren Farben anzunähern. Das sah, nun ja… nicht gerade schön aus.

Heutige Relevanz? Praktisch null. Moderne Displays unterstützen mindestens 16,7 Millionen Farben, viele sogar den erweiterten P3-Farbraum. Die websichere Farbpalette hat allenfalls nostalgischen Wert – oder dient als schnelle, überschaubare Farbauswahl beim Prototyping.

Von 16 auf 148: Die Evolution der HTML/CSS-Farbnamen

Falls dich die Geschichte interessiert – die Entwicklung der benannten Farben ist ein faszinierender Spiegel der Webgeschichte:

HTML 3.2 (1997) definierte lediglich 16 Grundfarben aus der Windows-VGA-Palette (black, white, red, blue, green, lime, yellow, cyan/aqua, magenta/fuchsia, maroon, navy, purple, olive, teal, gray, silver). CSS 2.1 (2011) ergänzte orange als 17. Farbe. CSS3 Color Module Level 3 (2011) standardisierte dann die erweiterte Liste von rund 140 Farbnamen, die ursprünglich aus dem X11-Farbsystem des Unix-Betriebssystems stammten und von Netscape Navigator und Internet Explorer schon seit 1996 inoffiziell unterstützt wurden. Und CSS Color Module Level 4 fügte 2014 rebeccapurple hinzu und konsolidierte die Liste auf die heutigen 148 Keywords.

Hex-Farben in der Praxis einsetzen

Genug Theorie – jetzt wird’s praktisch! Hier zeige ich dir, wie du Hex-Farben im Alltag einsetzt: in CSS, in Design-Tools und bei der Farbextraktion.

CSS: Von color bis color-mix()

Hex-Codes funktionieren in jeder CSS-Eigenschaft, die einen Farbwert akzeptiert. Hier ein paar Beispiele, wie ich sie täglich verwende:

/* Textfarbe */
h1 { color: #1a1a2e; }           /* Dunkles Navy */
p  { color: #333333; }           /* Dunkelgrau, gut lesbar */
a  { color: #e94560; }           /* Akzent-Rot für Links */

/* Hintergrundfarbe */
body { background-color: #f5f5f5; }  /* Helles Grau */
.hero { background-color: #16213e; } /* Tiefes Blau */

/* Rahmen */
.card { border: 2px solid #e0e0e0; } /* Dezenter hellgrauer Rand */

/* Schatten mit 8-stelligem Hex (Transparenz) */
.card {
  box-shadow: 0 4px 6px #00000026;   /* Schwarzer Schatten, ~15 % Deckkraft */
}

/* Farbverläufe */
.gradient-bg {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

CSS Custom Properties (Variablen) sind der professionelle Weg, Hex-Farben in Projekten zu organisieren. Ich selbst arbeite mittlerweile ausschließlich mit Variablen – das spart dir bei einem Rebranding Stunden an Arbeit:

:root {
  --color-blue-500: #2563eb;
  --color-gray-100: #f3f4f6;
  --color-gray-900: #111827;

  --color-primary: var(--color-blue-500);
  --color-text: var(--color-gray-900);
  --color-bg-surface: var(--color-gray-100);
}

.button {
  background-color: var(--color-primary);
  color: #ffffff;
}

Seit 2023 gibt es außerdem die CSS-Funktion color-mix(), mit der du Hex-Farben direkt im Stylesheet mischen kannst – ganz ohne Präprozessoren:

.btn:hover {
  background: color-mix(in oklch, #2563eb, black 15%); /* 15 % dunkler */
}
:root {
  --brand: #2563eb;
  --brand-light: color-mix(in srgb, var(--brand), white 80%);
}

Und die Relative Color Syntax (CSS Color Level 5) geht noch einen Schritt weiter – damit kannst du von einem Hex-Wert ausgehend neue Farben ableiten:

.overlay {
  border-color: rgb(from #000000 r g b / 0.1); /* Schwarz bei 10 % Deckkraft */
}
.lighter {
  color: hsl(from #2563eb h s calc(l + 20));    /* Aufgehellte Variante */
}

Das ist echt mächtig – und macht viele Sass-Mixins überflüssig, die früher für solche Farbmanipulationen nötig waren.

Hex-Codes in Design-Tools finden und eingeben

Figma: Den Hex-Code findest du im rechten Seitenbereich unter „Fill“ (Füllung) oder „Stroke“ (Kontur). Klick auf das Farbfeld, und es öffnet sich der Color Picker mit einem Dropdown-Menü für HEX, CSS, HSL und HSB. Im Dev Mode (Shift+D) werden Hex-Codes direkt angezeigt und sind per Hover über einen Copy-Button kopierbar. Tipp: Die Taste I aktiviert die Pipette, mit der du den Farbwert als Hex aus jedem beliebigen Element kopieren kannst.

Adobe Illustrator/Photoshop: Doppelklick auf das Füll- oder Konturfarbenfeld in der Werkzeugleiste öffnet den Color Picker. Der Hex-Code steht im #-Feld unterhalb der RGB-Werte. Wichtig: Im Farbpanel (Fenster → Farbe) muss der Modus auf RGB stehen, damit der Hex-Wert angezeigt wird – im CMYK-Modus verschwindet er.

Canva: Klick auf ein Element → Farbfeld in der oberen Toolbar → „+“ oder „Neue Farbe“ → der Color Picker zeigt dir den Hex-Code an. Canva Pro-Nutzer können Hex-Farben im Brand Kit speichern. Außerdem gibt es unter canva.com/color-palette/ einen Color Palette Generator, der aus hochgeladenen Bildern fünf dominante Farben mit Hex-Codes extrahiert.

Farben aus Bildern und Websites extrahieren

Manchmal siehst du eine Farbe auf einer Website oder in einem Foto und denkst: Die will ich haben! Dafür gibt es ganz easy passende Tools.

Die populärste Browser-Extension ist ColorZilla mit über 10 Millionen Downloads. Sie bietet eine Pipette für jeden Pixel auf einer Webseite, einen fortgeschrittenen Color Picker, einen CSS-Gradient-Generator und einen Website-Farbanalysator, der die komplette Farbpalette einer Seite in zwei Klicks extrahiert – alles als Hex, RGB oder HSL.

Und vergiss nicht die Browser-DevTools: Rechtsklick → Untersuchen → farbiges Quadrat neben einem CSS-Wert anklicken → visueller Color Picker mit Pipette, Farbformat-Umschaltung (Shift+Klick wechselt zwischen Hex, RGB, HSL) und eingebautem Kontrastprüfer. Ich nutze die DevTools ehrlich gesagt am häufigsten – die hat man einfach immer dabei.

RGB zu Hex umrechnen – Schritt für Schritt

Falls du mal ohne Tool auskommen musst (oder es einfach verstehen willst), hier die Formel: Jeden RGB-Dezimalwert (0–255) in eine zweistellige Hexadezimalzahl umwandeln.

Beispiel: RGB(255, 128, 0) → Hex

Rot = 255: 255 ÷ 16 = 15 Rest 15 → F und F → FF. Grün = 128: 128 ÷ 16 = 8 Rest 0 → 8 und 0 → 80. Blau = 0: 0 ÷ 16 = 0 Rest 0 → 0 und 0 → 00. Ergebnis: #FF8000 (ein leuchtendes Orange).

Hex zu RGB funktioniert umgekehrt: #FF8000 → FF = 15×16+15 = 255, 80 = 8×16+0 = 128, 00 = 0×16+0 = 0 → RGB(255, 128, 0).

In JavaScript geht’s noch eleganter:

// RGB → Hex
const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
// rgbToHex(255, 128, 0) → "#ff8000"

// Hex → RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
// hexToRgb("#ff8000") → { r: 255, g: 128, b: 0 }

Online-Konverter wie der W3Schools Color Converter und RapidTables bieten sofortige Umrechnung zwischen allen gängigen Farbformaten – falls du keine Lust auf Kopfrechnen hast.

Die besten Tools und Ressourcen für die Arbeit mit Hex-Farben

Tools gibt es wie Sand am Meer – aber welche lohnen sich wirklich? Hier meine persönliche Auswahl, mit der ich selbst die besten Erfahrungen gemacht habe.

Color Picker und Farbcode-Tools

Paletten-Generatoren

Coolors.co ist für mich der absolute Favorit – Leertaste drücken für neue Kombinationen, gewünschte Farben sperren, Rest generieren lassen. Damit habe ich die besten Erfahrungen gemacht.

Adobe Color arbeitet mit dem interaktiven Farbrad und Harmonieregeln (analog, komplementär, triadisch) und ist perfekt, wenn du Farbtheorie direkt anwenden willst.

Color Hunt bietet kuratierte, handverlesene 4-Farben-Paletten, filterbar nach Tags wie Pastell, Vintage, Neon oder Jahreszeiten – super zur Inspiration!

Paletton nutzt das künstlerische RYB-Farbrad statt RGB und eignet sich besonders für klassische Farbkombinationen.

ColorMagic setzt auf KI-gestützte Palettengenerierung aus Textbeschreibungen. Einfach „skandinavisches Wohnzimmer im Herbst“ eingeben – und du bekommst eine passende Palette. Ziemlich cool, oder?

Barrierefreiheit: Kontrast-Checker und WCAG-Anforderungen

Das hier ist richtig wichtig – und wird leider viel zu oft vergessen. Die WCAG 2.1 (Web Content Accessibility Guidelines) definieren klare Mindestkontrastverhältnisse für barrierefreie Webinhalte:

4,5:1 für normalen Text (AA-Level), 3:1 für großen Text und UI-Komponenten (AA), und 7:1 für normalen Text auf höchstem Level (AAA). Das maximale Kontrastverhältnis beträgt 21:1 (Schwarz auf Weiß).

Die wichtigsten Prüfwerkzeuge:

Profitipps: Hex-Farben professionell organisieren

Jetzt kommen die Tipps, die dich von „ich verwende Hex-Codes“ zu „ich beherrsche professionelle Farbsysteme“ bringen. Vertrau mir, das lohnt sich!

Design Tokens und die Drei-Schichten-Architektur

Der moderne Ansatz zur Farborganisation in Projekten folgt einer Drei-Schichten-Architektur aus Design Tokens. Klingt kompliziert? Ist es nicht:

Schicht 1 – Primitive Tokens sind die nackten Farbwerte. Hier lebt der eigentliche Hex-Code, benannt nach Farbfamilie und Intensität: color.blue.500: "#2563eb".

Schicht 2 – Semantische Tokens sind zweckgebundene Referenzen. Statt den Hex-Code direkt zu verwenden, verweist du auf das Primitive Token: color.primary: "{color.blue.500}". Warum? Weil du bei einem Rebranding nur den Verweis ändern musst, nicht hunderte Stellen im Code.

Schicht 3 – Komponenten-Tokens sind kontextspezifisch und verbinden die Semantik mit konkreten UI-Elementen: button.primary.bg: "{color.primary}".

Wie Nathan Curtis von EightShapes erklärt, ist dieses Token-Aliasing-System der Industriestandard für skalierbare Design-Systeme. Tools wie Style Dictionary (Amazon) transformieren JSON-Token-Dateien automatisch in CSS-Variablen, iOS UIColor, Android XML und andere plattformspezifische Formate.

Die häufigsten Fehler mit Hex-Farben

Selbst erfahrene Entwickler stolpern regelmäßig über diese Probleme. Damit dir das nicht passiert:

Übrigens: Hex-Codes sind case-insensitive in CSS (#ff0000 = #FF0000). CSS-Custom-Property-Namen dagegen sind case-sensitive (--my-color ≠ --My-Color). Ein subtiler, aber wichtiger Unterschied!

Wann Hex nicht die beste Wahl ist

Hex-Farben sind der Standard – aber nicht immer die optimale Lösung. Es gibt vier klare Fälle, in denen du zu einem anderen Format greifen solltest:

Bei dynamischen Farbanpassungen wie Hover-Effekten oder Theming ist HSL intuitiver: hsl(220, 90%, 50%) lässt sich mit einer einzigen Zahlenänderung aufhellen. Hex erfordert die Neuberechnung aller drei Kanäle.

Für CSS-Farbmanipulation mit color-mix() oder der relativen Farbsyntax eignen sich HSL oder OKLCH besser, da Hex-Werte nicht direkt mathematisch verarbeitet werden können.

Für Wide-Gamut-Displays (P3) reicht Hex nicht aus – hier ist OKLCH oder color(display-p3) erforderlich, wenn du das volle Farbspektrum moderner Bildschirme nutzen willst.

Und für Druckdesign gilt ohnehin: CMYK statt Hex, idealerweise mit einer Pantone-Referenz für kritische Markenfarben.

Fazit

Hex-Farben bleiben der kompakteste und universellste Standard für Farbangaben im Web. Ihre Stärke liegt in der Einfachheit: sechs Zeichen, die jeder Browser, jedes Design-Tool und jede Programmiersprache versteht.

Gleichzeitig lohnt es sich, über den Hex-Tellerrand zu blicken: HSL für dynamische Farbsysteme, OKLCH für perzeptuell gleichmäßige Paletten und Wide-Gamut-Farben, und color-mix() für CSS-native Farbmanipulation.

Der Schlüssel zu professioneller Farbarbeit liegt aber nicht im Format selbst, sondern in der systematischen Organisation – primitive, semantische und Komponenten-Tokens statt hartcodierter Werte. Wer dieses Prinzip verinnerlicht, ist für jedes Rebranding, jeden Dark Mode und jede Barrierefreiheits-Prüfung gewappnet.

Häufig gestellte Fragen