CSS-Farbnamen
Alle 148 benannten CSS-Farben mit Vorschau und Hex-Code. Suche nach Namen, sortiere nach Farbton und klicke auf eine Karte, um den Hex-Code zu kopieren.
Woher die 148 CSS-Farbnamen kommen
Die meisten Namen gehen auf die Farbpalette des Fenstersystems X11 aus den 1980er-Jahren zurück, die später von den Browsern übernommen und vom Modul CSS Color offiziell festgeschrieben wurde. Deshalb stehen so verspielte Namen wie papayawhip und mistyrose direkt neben ganz gewöhnlichen wie red und blue. Farbe Nummer 148, rebeccapurple (#663399), kam 2014 hinzu, in Erinnerung an Rebecca, die Tochter des Webentwicklers Eric Meyer, die mit sechs Jahren starb: Es ist der einzige Name, der direkt aus der Web-Community selbst stammt.
Wann Namen und wann Hex-Codes sinnvoll sind
Benannte Farben sind praktisch für Prototypen, Beispiele und den Unterricht: tomato merkt man sich viel leichter als #ff6347. Im Produktivcode haben aber die Hex-Codes die Nase vorn: Sie decken 16,7 Millionen Farbtöne ab statt nur 148. Vorsicht bei doppelten Namen: gray und
grey (samt all ihren Varianten) sind exakt dieselbe Farbe, ebenso wie
aqua/cyan und fuchsia/magenta. Und Achtung bei
darkgray, das paradoxerweise heller ist als gray, eine historische Eigenheit, die noch von X11 stammt.
Namen aus einer anderen Zeit
Die Liste stammt von den Farben der X11-Terminals der 1980er-Jahre, ausgewählt von Programmierern, die einfach die Namen nahmen, die ihnen gerade einfielen. Daher stammen Kuriositäten wie „papayawhip“, „lemonchiffon“ und „peachpuff“, die eher nach Dessert klingen als nach Farbe.
Aus Kompatibilitätsgründen bleiben auch widersprüchliche Paare erhalten: „darkgray“ ist HELLER als „gray“, weil die beiden Namen aus verschiedenen Tabellen stammen, die schlecht zusammengeführt wurden. Ein klassisches Detail, das sich nicht mehr korrigieren lässt, weil sich Tausende von Seiten seit dreißig Jahren darauf verlassen.
Doppelte Schreibweisen und Synonyme
Manche Farben haben zwei Schreibweisen, beide gültig, die amerikanische und die britische: gray/grey samt all ihren Familien (darkgray/darkgrey, lightslategray/lightslategrey). Es ist dieselbe Farbe, die Wahl ist reine Geschmackssache.
Es gibt auch Paare verschiedener Namen für exakt denselben Wert: aqua und cyan sind beide #00FFFF, fuchsia und magenta beide #FF00FF. Wenn ein Styleguide Einheitlichkeit verlangt, musst du dich für einen Namen entscheiden, denn ein Suchen und Ersetzen nach den Codes findet sie nicht.
Wann ein Name passt und wann ein Code
Namen sind praktisch für Prototypen, Beispiele und den Unterricht: „tomato“ ist leichter zu lesen und zu merken als #FF6347, und in einem Codeschnipsel, der etwas erklären soll, zählt das mehr als Präzision. Ansonsten ist ein Name eine starre Wahl: Er lässt sich nicht einmal ein klein wenig aufhellen.
In einem echten Projekt lohnt sich der Umstieg auf CSS-Variablen: Die Farbe wird einmal deklariert und unter einem projekteigenen Namen verwendet („--accent“), nicht unter dem Farbnamen. Um einen Farbton zu ändern, genügt dann eine Zeile, und helle und dunkle Themes werden möglich.
Siehe auch
Vom Namen zum Code und zurück kommst du mit dem Farbkonverter, eine Farbe aus einem Bild wählst du mit dem Farbwähler. Die Lesbarkeit eines Farbpaars prüfst du mit dem Kontrastprüfer.