HTML-Farben

So verwenden Sie einen Farbnamen in CSS

Jede CSS-Eigenschaft, die eine Farbe annimmt, akzeptiert auch einen dieser 148 Namen, in Groß- oder Kleinschreibung. Die drei Zeilen unten erzeugen dasselbe Rot.

Ein Name lässt sich gut lesen, ist aber nicht immer zu erraten: gainsboro, peru und moccasin sind echte Farben. Für die Farbe Ihrer Marke nehmen Sie HEX oder rgb().

color: tomato;
color: #ff6347;
color: rgb(255 99 71);

HEX, RGB, HSL und OKLCH

Die Tabelle zeigt jede Farbe in vier CSS-Schreibweisen. HEX ist die kürzeste und häufigste. RGB gibt den Anteil von Rot, Grün und Blau an, von 0 bis 255. HSL beschreibt Farbton, Sättigung und Helligkeit und hilft, eine hellere oder dunklere Variante derselben Farbe zu bauen.

OKLCH nutzt ebenfalls einen Farbton, aber die Helligkeit (die erste Zahl) folgt dem, was das Auge wahrnimmt: Zwei Farben mit demselben Wert wirken gleich hell. In HSL ist das nicht so, und yellow wirkt deutlich heller als blue, obwohl beide dieselbe nominelle Helligkeit haben. Weiß, Schwarz und die Grautöne haben keine Chroma, ihr Farbton steht deshalb bei 0.

Um eine Farbe umzurechnen, die nicht in der Liste steht, nutzen Sie einen der Rechner unten.

• HEX in RGB umrechnen
• RGB in HEX umrechnen
• Farbe mit dem Color Picker wählen

Verschiedene Namen, dieselbe Farbe

Neun Namenspaare stehen für denselben Wert: aqua und cyan, fuchsia und magenta sowie die Schreibweisen gray und grey bei gray, darkgray, darkslategray, dimgray, lightgray, lightslategray und slategray. Deshalb hat die Liste 148 Namen und 139 verschiedene Farben. In der Tabelle steht der andere Name unter dem Namen der Zeile.

Ältere Listen sprechen von 140 Namen. Sie zählen nur eine Schreibweise je Grauton und lassen rebeccapurple (#663399) aus, das mit CSS Color Level 4 kam.

transparent, currentColor und Systemfarben

Zwei Schlüsselwörter gelten als Farbe, stehen aber nicht in der Tabelle, weil sie keinen festen Wert haben. transparent ist Schwarz mit Alpha null. currentColor übernimmt den color-Wert des Elements, praktisch für einen Rahmen oder ein SVG-Icon, das der Textfarbe folgen soll.

CSS definiert außerdem 19 Systemfarben, etwa Canvas, CanvasText, LinkText, Highlight und AccentColor. Ihr Wert hängt vom Browser, vom Betriebssystem und vom hellen oder dunklen Design ab, daher gibt es dafür kein HEX. Sie lassen eine Komponente dem Design der lesenden Person folgen.

Textkontrast

Die letzte Spalte zeigt, ob weißer oder schwarzer Text auf der jeweiligen Farbe besser lesbar ist, berechnet mit dem Kontrastverhältnis nach WCAG 2. WCAG verlangt mindestens 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text. Weißer Text auf yellow kommt nur auf 1,07 zu 1, schwarzer Text auf 19,56 zu 1.

Den Kontrast beliebiger Farbpaare prüfen

Quellen

Geprüft am 5. November 2026:

• W3C, CSS Color Module Level 4: named colors
• MDN: der Datentyp named-color
• W3C, WCAG 2.1: Definition des Kontrastverhältnisses