CSS-Farbnamen

Ein Farbname ist ein menschenlesbares Schlüsselwort — wie red, tomato oder rebeccapurple — das überall dort verwendet werden kann, wo CSS einen Farbwert erwartet, anstatt einer numerischen Notation wie #FF0000 oder rgb(255 0 0). Namen sind die einfachste Art, eine Farbe zu schreiben: Sie sind selbsterklärend und können — anders als Hex-Codes — nicht versehentlich in eine andere gültige Farbe vertippt werden.

Dieses Kapitel listet alle benannten Farben auf, erklärt, wann ein Name gegenüber einem Hex- oder rgb()-Wert vorzuziehen ist, und behandelt die wenigen speziellen Schlüsselwörter (transparent, currentColor), die nicht in der Tabelle enthalten sind.

Einen Farbnamen verwenden

Das Schlüsselwort wird direkt in jede Farb-Eigenschaft eingetragen. Namen sind nicht case-sensitiv, Tomato, tomato und TOMATO sind also identisch:

h1 {
  color: tomato;
}

button {
  background-color: SeaGreen;
  border: 2px solid darkslategray;
}

Diese sind austauschbar mit den Hex- und rgb()-Formen — color: tomato erzeugt exakt dieselben Pixel wie color: #FF6347 oder color: rgb(255 99 71). Verwenden Sie Namen zur Lesbarkeit während der Entwicklung; greifen Sie auf Hex zurück, wenn Sie eine genaue Markenfarbe benötigen, für die es kein Schlüsselwort gibt.

Die benannten Farben

Alle 147 Farbnamen unten werden von jedem modernen Browser unterstützt. Jede Zeile zeigt das Schlüsselwort und den entsprechenden HEX-Wert:

Wie HEX-Werte mit Namen zusammenhängen

Jeder Name in der Tabelle ist nur eine Abkürzung für eine RGB-Farbe — eine Mischung aus Rot-, Grün- und Blaulicht. CSS schreibt diese Mischung als Hexadezimalwert (HEX): ein # gefolgt von sechs Ziffern, zwei pro Kanal. Der kleinste Wert, den ein Kanal annehmen kann, ist 0 (hex 00) und der höchste ist 255 (hex FF).

#FF6347   →   FF = red 255   63 = green 99   47 = blue 71   →   "tomato"

HEX ist nicht case-sensitiv, also sind #FFFFFF und #ffffff dieselbe Farbe (Weiß). Wenn alle drei Kanäle beide Ziffern teilen, kann auch die 3-stellige Kurzform verwendet werden — #FFF wird zu #FFFFFF und #F00 zu #FF0000 erweitert.

Diese Zuordnung zu kennen ist nützlich, wenn ein Design-Tool einen Hex-Code liefert, der fast einem Schlüsselwort entspricht: Sie können den lesbaren Namen nur dann einsetzen, wenn die Werte exakt übereinstimmen.

Spezielle Farb-Schlüsselwörter

Zwei Schlüsselwörter verhalten sich wie Farbnamen, sind aber nicht in der Tabelle enthalten:

• transparent — eine vollständig durchsichtige Farbe, entspricht rgba(0, 0, 0, 0). Verwenden Sie es, um einen Rahmen oder Hintergrund auszublenden, ohne die Eigenschaft zu entfernen.
• currentColor — löst sich zum aktuellen color-Wert des Elements auf. Es ist praktisch, um einen Rahmen oder SVG-Füllbereich automatisch mit der Textfarbe synchron zu halten.

.ghost-button {
  color: royalblue;
  background-color: transparent;
  border: 2px solid currentColor; /* follows the royalblue text color */
}

Verwandte Kapitel

• CSS-Eigenschaft color — legt die Textfarbe eines Elements fest.
• CSS-Eigenschaft background-color — füllt den Hintergrund eines Elements.
• HTML-Farben — die RGB-, HEX- und HSL-Farbmodelle erklärt.

Übung