Benannte CSS-Farben: vollständige Liste der 148 Farben
Vollständige Liste der benannten CSS-Farben mit Hex- und RGB-Werten. Durchsuchbar, kopierbar, mobilfreundlich.
Was sind benannte Farben in CSS?
CSS enthält 148 benannte Farben, die Sie anstelle von Hex-Codes oder RGB-Werten verwenden können. Wörter wie „tomato", „rebeccapurple" und „lightseagreen" sind gültige CSS-Farbwerte, definiert vom W3C und unterstützt in allen modernen Browsern. Benannte Farben machen Ihre Stylesheets lesbarer und einprägsamer.
Sie decken den gesamten Farbkreis ab: Primärfarben, Sekundärfarben, Tertiärfarben, Grautöne und einige spezielle Töne. Jeder Name ist einem präzisen sRGB-Wert zugeordnet. Manche Namen sind offensichtlich („red", „blue", „green"), andere sind erfreulich spezifisch („papayawhip", „lemonchiffon", „mediumvioletred").
Häufige Anwendungsfälle
- Schnelles Prototyping: Geben Sie einen Farbnamen ein, um einen Platzhalter zu setzen
- Lesbares CSS: Ersetzen Sie `#ff6347` durch `tomato` für mehr Klarheit
- Theming: Verwenden Sie semantische Namen (--brand-primary: rebeccapurple) in CSS-Variablen
- E-Mail-Vorlagen: Manche Clients schränken Hex ein; Namen sind weit verbreitet
- Lehre: Benannte Farben eignen sich hervorragend, um CSS-Anfängern den Einstieg zu erleichtern
Methode 1: Die CSS-Named-Colors-Liste von UtilBoxx verwenden (Empfohlen)
Unsere CSS-Named-Colors-Liste zeigt jede benannte Farbe mit ihrem Hex- und RGB-Äquivalent, unterstützt Suche und kopiert jeden Namen oder Wert mit einem Klick. So verwenden Sie sie:
- Gehen Sie zu utilboxx.com/de/tools/color/named
- Durchsuchen Sie die Liste (probieren Sie „purple" oder „gray")
- Klicken Sie auf ein Farbfeld, um den Namen zu kopieren
- Klicken Sie auf den Hex-Wert, um den exakten Code zu kopieren
- Markieren Sie mit dem Favoriten-Button Ihre meistgenutzten Farben
Warum diese Methode funktioniert:
- Durchsuchbare, nach Farben gruppierte Liste
- Ein-Klick-Kopie von Name, Hex und RGB
- Zeigt für jede Farbe ein visuelles Feld
- Mobilfreundliches Layout
- Kostenlos, keine Registrierung, keine Werbung
Methode 2: Die Grundlagen im Kopf behalten
Ein kleiner Satz benannter Farben deckt 80 % der alltäglichen CSS-Arbeit ab:
- red, green, blue (Primärfarben)
- yellow, cyan, magenta (Sekundärfarben)
- black, white, gray
- orange, pink, purple, brown
- Helle/dunkle Varianten: lightgray, darkblue usw.
Für exotischere Wahlen halten Sie eine Referenzliste griffbereit.
Methode 3: CSS-Variablen im Stylesheet nutzen
Definieren Sie Ihre Palette als benutzerdefinierte Eigenschaften und verwenden Sie die Namen im Code:
```css :root { --color-bg: white; --color-text: black; --color-accent: rebeccapurple; --color-warning: tomato; } ```
Das verbindet die Lesbarkeit benannter Farben mit der Macht eines zentralisierten Designsystems.
Häufig gestellte Fragen
Wie viele benannte Farben gibt es in CSS?
Die Spezifikation CSS Color Module Level 4 enthält 148 benannte Farben. Die Liste umfasst alle historischen Farben sowie neuere Ergänzungen wie rebeccapurple (2014 hinzugefügt, zum Gedenken an die Tochter von Eric Meyer).
Sind benannte Farben case-sensitive?
Nein. CSS-Farbnamen sind case-insensitiv, daher bezeichnen „Tomato", „tomato" und „TOMATO" dieselbe Farbe. Kleinschreibung ist die Konvention.
Was ist rebeccapurple?
Es ist `#663399`, das 2014 zu Ehren von Rebecca Alison Meyer, der Tochter des CSS-Pioniers Eric Meyer, in die CSS-Spezifikation aufgenommen wurde. Es ist die einzige benannte Farbe, die aus einem nicht-technischen Grund in CSS aufgenommen wurde.
Kann ich benannte Farben in SVG und Canvas verwenden?
Ja. Sowohl SVG als auch die HTML5-Canvas-API akzeptieren benannte CSS-Farben und sind universell mit denselben Namen und Werten kompatibel.
Fazit
Benannte CSS-Farben sind ein unterschätztes Juwel. Für eine schnelle, durchsuchbare Referenz ist die CSS-Named-Colors-Liste von UtilBoxx die einfachste Möglichkeit, sie zu finden, zu vergleichen und zu kopieren.