Die 140 CSS-Farbnamen und ihre HEX-/RGB-Werte

Woher die CSS-Farbnamen stammen

Die benannten Farben in CSS haben zwei Wurzeln. Die ersten 16 Namen, darunter black, white, red und blue, stammen aus HTML 3.2 und der VGA-Farbpalette der fruehen 1990er Jahre. Sie wurden in CSS 2.1 als Standard festgeschrieben.

Der weitaus groessere Rest geht auf das X Window System (X11) zurueck, ein grafisches Fenstersystem fuer Unix. Dessen Datei rgb.txt enthielt hunderte handbenannter Farben wie cornflowerblue oder peachpuff. Das W3C uebernahm diese Palette und harmonisierte sie im CSS Color Module Level 3. Seit Level 4 ist die Liste bei 148 Schluesselwoertern stabil, ergaenzt um das Sonderwort transparent und das aus der UI-Welt stammende rebeccapurple (#663399), das 2014 zu Ehren der verstorbenen Tochter eines Webstandards-Pioniers aufgenommen wurde.

Die vollstaendige Farbnamen-Tabelle

Die folgende Tabelle ist nach Farbgruppen geordnet und enthaelt zu jedem Namen den offiziellen HEX-Code, das RGB-Tripel und eine Live-Farbprobe. Mit einem Klick auf eine Zeile kopieren Sie den HEX-Wert direkt in die Zwischenablage. Die Suche filtert in Echtzeit nach Name oder HEX-Code.

Auswahl von 69 der 140 benannten CSS-Farben, gruppiert nach Farbton. Werte gemaess CSS Color Module Level 4 (W3C).

Vom Namen zu HEX und RGB: Die Syntax

Ein Farbname ist nichts anderes als eine lesbare Abkuerzung fuer einen festen RGB-Wert. Die drei folgenden Deklarationen erzeugen exakt dieselbe Farbe und sind fuer den Browser gleichwertig:

.button {
  /* 1. Benannte Farbe, am lesbarsten */
  background: tomato;

  /* 2. HEX, kompakt und ueberall ueblich */
  background: #FF6347;

  /* 3. RGB, moderne CSS Color Level 4 Syntax */
  background: rgb(255 99 71);

  /* 4. RGB mit Alpha fuer 80% Deckkraft */
  background: rgb(255 99 71 / 0.8);
}

Auffaellig ist die vierte Variante: Benannte Farben kennen keine Transparenz. Sobald Sie einen Alpha-Kanal brauchen, muessen Sie auf RGB beziehungsweise RGBA oder einen 8-stelligen HEX-Code ausweichen. Das ist einer der wichtigsten praktischen Gruende, einen Farbnamen in seinen RGB-Wert aufzuloesen.

Synonyme: gray/grey, aqua/cyan und Co.

Beim Zaehlen der Farbnamen entsteht oft Verwirrung, weil zwischen 140 und 148 unterschiedliche Zahlen kursieren. Der Grund sind Synonyme: Mehrere Namen verweisen auf denselben Farbwert. Die wichtigsten Doppelungen:

Rechnet man die fuenf grey-Varianten sowie aqua/cyan und fuchsia/magenta heraus, bleiben aus den 147 Farbnamen genau 140 eindeutige Farbwerte. Genau diese Zahl meinen die meisten Referenzen, wenn von den 140 CSS-Farben die Rede ist.

Farbnamen in CSS-Variablen und Designtokens

In modernen Projekten landen Farben selten direkt als Name im Stylesheet, sondern als zentrale Variable oder Designtoken. Der Trick: Sie koennen einen benannten Wert in eine Custom Property schreiben, sollten ihn aber fuer Wiederverwendbarkeit als HEX oder RGB-Tripel hinterlegen, damit sich daraus auch Alpha-Varianten ableiten lassen.

:root {
  /* RGB-Tripel als Token, nicht der Name */
  --akzent-rgb: 70 130 180;          /* steelblue */
  --akzent: rgb(var(--akzent-rgb));
}

.card {
  border-color: var(--akzent);
  /* Alpha aus demselben Token ableiten */
  background: rgb(var(--akzent-rgb) / 0.08);
}

So definieren Sie die Farbe nur einmal als Zahlentripel und erzeugen daraus beliebige Deckkraftstufen. Mit einem reinen Farbnamen waere das nicht moeglich. Wer den Workflow vertiefen will, findet im Ratgeber zum bidirektionalen HEX/RGB-Workflow Beispiele fuer Tailwind- und SCSS-Tokens.

Wann Namen, wann HEX oder RGB?

Benannte Farben sind kein schlechter Stil, aber sie haben einen klaren Einsatzbereich. Die folgende Faustregel hilft bei der Entscheidung:

• Farbnamen eignen sich fuer Prototypen, schnelle Demos, Lehrbeispiele und Debugging, etwa ein temporaeres outline: 2px solid hotpink, um ein Layout-Problem sichtbar zu machen.
• HEX ist der Standard fuer feste Markenfarben und wird von praktisch jedem Design-Werkzeug ausgegeben. Kompakt, eindeutig, gut versionierbar.
• RGB und RGBA sind erste Wahl, wenn Sie mit Alpha-Transparenz arbeiten, Farben programmatisch berechnen oder einzelne Kanaele ansprechen.

Da nur 140 Werte einen Namen tragen, deckt das Vokabular ohnehin nur einen winzigen Teil der rund 16,7 Millionen darstellbaren 24-Bit-Farben ab. Sobald eine Marke einen spezifischen Ton braucht, fuehrt kein Weg an HEX oder RGB vorbei.

Haeufige Fragen

Quellen

• W3C, CSS Color Module Level 4, Named Colors
• MDN Web Docs, named-color (CSS-Datentyp)
• MDN Web Docs, color (CSS-Wert und Syntax)
• W3C, CSS Color Module Level 3, SVG/X11-Farbnamen