Benannte CSS-Farben — Vollständige Liste

Was sind benannte CSS-Farben?

Benannte CSS-Farben sind ein fester Satz aus 147 Schlüsselwörtern – etwa tomato, aliceblue, rebeccapurple –, die du überall dort einsetzen kannst, wo eine CSS-Farbe erwartet wird, statt einen Hex-Code oder die rgb()-Funktion zu schreiben. Sie sind in jedem Browser fest verdrahtet, werden plattformübergreifend identisch dargestellt und benötigen keine Vorverarbeitung. Die Liste ist im Lauf der CSS-Geschichte gewachsen: Die ursprünglichen 16 stammten aus VGA, ein weiterer Schwung aus X11, und rebeccapurple wurde 2014 zu Ehren von Rebecca, der Tochter des CSS-Pioniers Eric Meyer, aufgenommen.

So nutzt du diese Referenz

Tippe in das Suchfeld, um nach Name (versuche blue, dark oder red) oder nach Hex (versuche ff) zu filtern. Wechsle das Sortier-Dropdown auf Farbton, wenn du eine Farbe suchst, die du nur visuell beschreiben kannst, oder auf Helligkeit, um Abstufungen für Hover-States zu wählen. Klicke auf eine Farbfläche, um das Schlüsselwort in die Zwischenablage zu kopieren – füge es direkt in eine CSS-Regel ein wie color: tomato;.

Wann sich benannte Farben lohnen

Benannte Farben sind ideal für schnelle Prototypen, README-Badges, Demo-Code und alle Situationen, in denen exakte Markentreue keine Rolle spielt. Für Produktiv-Designsysteme sind sie weniger geeignet – die historische Palette ist unausgewogen (viele Pinks und Orangetöne, wenige dunkle Petrol-Töne) und die Namen sind kurios (papayawhip, peachpuff). Für produktiven Einsatz leitest du Hex-Äquivalente der benannten Farben ab und baust die Palette anhand deiner Marke neu auf, etwa mit unserem Color Harmony Generator.

Woher die Namen stammen

Die 147 Namen gehen auf die Datei rgb.txt des X Window Systems aus den späten 1980ern zurück, die ihrerseits Namen aus einem Sinclair-Paints-Katalog und diversen anderen Quellen übernommen hat. Die ursprünglichen 16 – aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow – stammen aus VGA-Hardware. Modernes CSS spezifiziert die vollständige Liste als exakte sRGB-Hexcodes; Browser nähern nichts an.

Farbgruppen in der Palette der benannten Farben

Rot- & Pinktöne: red, crimson, salmon, lightcoral, hotpink, deeppink, pink und Verwandte. Orange- & Brauntöne: orange, darkorange, coral, tomato, chocolate, sienna, peru. Gelb- & Goldtöne: yellow, gold, khaki, palegoldenrod. Grüntöne: green, lime, forestgreen, seagreen, olive, olivedrab – mit Abstand die größte Farbgruppe. Blautöne: blue, navy, royalblue, dodgerblue, steelblue, lightblue. Lilatöne: purple, violet, indigo, orchid, plum, rebeccapurple. Neutraltöne: ein Dutzend gray/grey-Aliasnamen plus silver, white und black.

Häufig gestellte Fragen