Tokenlabor

CSS-Farbnamen: alle 148 benannten Farben

CSS-Farbnamen auf einen Blick: alle 148 benannten HTML-Farben mit HEX-Code, RGB und HSL, durchsuchbar, nach Farbton sortierbar und mit Kopieren-Knopf.

Filter

Benannte Farben
FarbeNameHEXRGBHSLKopieren
Welcher Farbname passt zu meinem HEX-Code?

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

Alle benannten CSS-Farben

Die Liste enthält alle CSS-Farbnamen, die Browser verstehen: 148 benannte Farben nach CSS Color Module Level 4, von aliceblue bis yellowgreen. Statt eines HEX-Codes können Sie in CSS und HTML einfach color: tomato oder background: steelblue schreiben. Zu jedem Namen sehen Sie den HEX-Code, den RGB- und den HSL-Wert; ein Klick kopiert Name oder HEX-Code. Die Suche findet Farben nach englischem Namen, nach dem Anfang eines HEX-Codes oder nach RGB-Werten. Diese Farbnamen Liste ist auch als „HTML-Farben“ oder „benannte Farben“ bekannt.

Die 16 Grundfarben wie red, navy und teal stammen aus HTML 4. Die übrigen kamen aus dem X11-Farbsystem in die Browser, deshalb sind manche Namen überraschend: darkgray (#a9a9a9) ist heller als gray (#808080). Einige Farben haben zwei Namen mit gleichem Wert, etwa gray und grey, aqua und cyan sowie fuchsia und magenta. rebeccapurple (#663399) kam 2014 als letzte Farbe hinzu, zum Gedenken an die Tochter des CSS-Experten Eric Meyer.

Im unteren Feld geben Sie einen beliebigen HEX-Code ein und erhalten die drei ähnlichsten benannten Farben. Der Abstand wird im wahrnehmungsnahen Farbraum OKLab berechnet. Für ein einheitliches Design sind benannte Farben selten die beste Wahl, weil sie nicht aufeinander abgestimmt sind. Für Prototypen, Tests und schnelle Markierungen sind sie praktisch. Andere Schreibweisen rechnet der Farbumwandler um.

Anleitung: CSS-Farbnamen in 4 Schritten

  1. Im Suchfeld einen Namen, den Anfang eines HEX-Codes oder RGB-Werte eingeben.
  2. Sortierung wählen: alphabetisch, nach Farbton, hell oder dunkel zuerst; bei Bedarf „Nur die 16 Grundfarben“ einschalten.
  3. Name oder HEX-Code der gewünschten Farbe per Klick kopieren oder mit „Liste kopieren“ alles übernehmen.
  4. Unter „Welcher Farbname passt zu meinem HEX-Code?“ einen HEX-Code eingeben und die drei ähnlichsten benannten Farben ablesen.

Typische Anwendungsfälle

  • Für Prototypen, Testseiten oder Debug-Rahmen wie outline: 1px solid red schnell einen lesbaren Farbnamen wählen.
  • Herausfinden, welche benannte Farbe einem Wert aus einem Designentwurf am nächsten kommt.
  • Farbnamen in fremdem CSS nachschlagen, um den genauen HEX-Wert zu kennen.
  • Ähnliche Töne vergleichen, indem die Liste nach Farbton sortiert wird.
Fragen

Häufige Fragen

Wie viele Farbnamen gibt es in CSS?

CSS Color Module Level 4 definiert 148 Farbnamen. Darunter sind einige doppelte Schreibweisen mit gleichem Wert, etwa gray und grey. Dazu kommen die Schlüsselwörter transparent und currentColor, die keine feste Farbe sind.

Sind Farbnamen in CSS groß- oder kleingeschrieben?

Farbnamen sind in CSS unabhängig von Groß- und Kleinschreibung. SteelBlue, steelblue und STEELBLUE bedeuten dasselbe. Üblich ist die Kleinschreibung.

Warum ist darkgray heller als gray?

Die Namen stammen aus zwei Quellen: gray (#808080) aus HTML 4 und darkgray (#a9a9a9) aus dem X11-Farbsystem. Bei der Übernahme in CSS wurden beide Werte beibehalten, daher die verwirrende Reihenfolge.

Funktionieren deutsche Farbnamen wie rot oder blau?

Nein. CSS kennt nur die englischen Namen. Für Rot schreiben Sie red, für Blau blue. Ein unbekannter Name wird vom Browser ignoriert, die Eigenschaft greift dann nicht.

Wie finde ich den Namen zu einem HEX-Code?

Geben Sie den HEX-Code im unteren Feld ein. Das Werkzeug zeigt die drei ähnlichsten benannten Farben und den Abstand. Ist der Abstand null, gibt es genau diesen Wert als Farbnamen.

Welche 16 Grundfarben gibt es in HTML?

black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal und aqua. Sie stammen aus HTML 4 und lassen sich hier mit „Nur die 16 Grundfarben“ anzeigen.

Wie verwende ich einen Farbnamen in CSS?

Den Namen statt eines Farbwerts schreiben, etwa color: tomato; oder background-color: steelblue;. Farbnamen funktionieren überall, wo CSS eine Farbe erwartet, auch in Rahmen, Schatten und Verläufen.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge

Farbumwandler

HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

Öffnen

Farbpalette aus Bild

Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

Öffnen

Kontrast prüfen (WCAG)

Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

Öffnen

CSS-Gradient-Generator

Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

Öffnen

Box-Shadow-Generator

CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

Öffnen

Flexbox-Generator

Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

Öffnen