HTML Farbnamen

HTML Farbnamen — Alle 148 CSS Farbnamen mit Suche und Filter

Alle HTML-Farbnamen in einer durchsuchbaren Referenz: die vollständige Liste der CSS-Farbnamen mit HEX-, RGB- und HSL-Werten, Live-Farbmustern und Ein-Klick-Kopie. Anders als statische Tabellen lässt sich diese Referenz nach Farbfamilie filtern — alle Blautöne, alle Grüntöne — und nach Farbton, Helligkeit oder Sättigung sortieren, genau so, wie Designer tatsächlich Farben auswählen.

Die Spezifikation CSS Color Level 4 definiert exakt 148 Farb-Keywords: 141 eindeutige Namen plus 7 britische "grey"-Schreibweisen. Viele Referenzen nennen noch 140 — die Spezifikation sagt etwas anderes. Dazu kommt ein Finder für den nächstgelegenen Farbnamen: einfach einen beliebigen Hex-Code einfügen und das offizielle CSS-Keyword mit dem geringsten ΔE-Farbabstand (CIELAB) erhalten.

So funktioniert die HTML-Farbnamen-Referenz

Eine Farbe zu finden und zu kopieren dauert Sekunden:

1. Namen oder Hex-Code ins Suchfeld eingeben — das Raster filtert in Echtzeit beim Tippen und akzeptiert Namen wie tomato ebenso wie Hex-Fragmente wie ff63.
2. Nach Farbfamilie filtern oder Sortierung ändern — "Blautöne" wählen und nach Helligkeit sortieren, um jedes CSS-Blau vom hellsten zum dunkelsten zu sehen.
3. Auf ein Farbmuster klicken, um den HEX-Wert sofort zu kopieren — oder auf den Namen klicken für alle Details mit RGB, HSL, fertigen CSS-Snippets und teilbaren Bannern für Instagram, WhatsApp und X.
4. Den nächstgelegenen Farbnamen zu jedem Hex finden — einen eigenen Code wie #517CBD in den Finder einfügen und das nächste offizielle Keyword mit exaktem Farbabstand erhalten.

Beispiele für HTML-Farbnamen

Einige echte Abfragen zeigen, was die Referenz liefert:

Der Finder akzeptiert auch das 3-stellige Kurzformat: #fa0 wird vor dem Vergleich zu #FFAA00 erweitert.

Was CSS-Farbnamen sind und woher sie stammen

Farbnamen sind Text-Keywords, die als Wert in jeder CSS-Farbeigenschaft funktionieren: color: rebeccapurple wird identisch zu color: #663399 gerendert. Der Browser löst den Namen beim Parsen in RGB auf — es gibt keinen Performance-Unterschied zwischen Keyword und Hex-Code.

Die 16 Grundnamen (black, white, red, lime, navy, teal…) stammen aus HTML 4.01 (1997). Die übrigen Namen kommen aus dem X11-Farbsystem, das seit den 1980er-Jahren in Unix-Oberflächen verwendet wird, wurden von SVG übernommen und in CSS3 formal aufgenommen — deshalb enthält die Liste Kuriositäten wie PapayaWhip, Bisque und NavajoWhite. CSS Color Level 4 ergänzte 2014 den letzten Eintrag: rebeccapurple.

Die Geschichte von RebeccaPurple

rebeccapurple (#663399) ist die einzige CSS-Farbe, die nach einem Menschen benannt ist. Rebecca Meyer, die Tochter des CSS-Pioniers Eric Meyer, starb am 7. Juni 2014 an einem Hirntumor — an ihrem sechsten Geburtstag. Noch am selben Tag schlug die Web-Community vor, den Lilaton, den sie liebte, in die CSS-Spezifikation aufzunehmen; die CSS Working Group stimmte innerhalb weniger Stunden zu. Auf Wunsch ihres Vaters wurde der volle Name "Rebecca" verwendet: Sie war dem Spitznamen "Becca" gerade entwachsen. Bis heute nutzen Entwickler das Keyword als stille Hommage.

Häufige Anwendungsfälle

• Prototypen und Demos: background: cornflowerblue ist schneller geschrieben und in Codebeispielen besser lesbar als ein Hex-Code — deshalb dominieren Farbnamen in Tutorials.
• Einen semantischen Namen für eine Markenfarbe finden: den eigenen Hex in den Finder einfügen und prüfen, ob ein offizielles Keyword nah genug für schnelle Mocks liegt.
• Einen Ton innerhalb einer Familie wählen: "Grüntöne" filtern und nach Helligkeit sortieren, um alle 23 CSS-Grüns der Reihe nach zu sichten statt eine alphabetische Tabelle zu durchsuchen.
• Lehre und Dokumentation: Namen wie tomato und papayawhip bleiben im Gedächtnis — ideal, um Einsteigern CSS zu erklären.
• E-Mail und Markdown: Farbnamen überstehen Copy-Paste in Umgebungen ohne Farbwähler.

Häufige Fehler mit CSS-Farbnamen

• green verwenden, wenn reines Grün gemeint ist: green ist #008000, ein Ton mit halber Helligkeit. Reines Grün (rgb(0, 255, 0)) heißt lime — ein Erbe aus HTML 4.01, das immer noch überrascht.
• grey als eigenständiges Keyword schreiben: nur gray ist in der einfachen Form gültig. Die britische Schreibweise funktioniert allerdings in zusammengesetzten Namen — darkgrey, slategrey und fünf weitere sind gültige Aliase.
• Annehmen, dass Farbnamen Tailwind-Klassen entsprechen: text-purple-700 und rebeccapurple stammen aus völlig getrennten Paletten. Wer eine exakte Übereinstimmung braucht, vergleicht die Hex-Werte — sie decken sich fast nie.
• Mit 140 Farben rechnen: die Spezifikation definiert 148 Keywords. Eine Validierung auf Basis alter 140er-Listen lehnt gültige Keywords ab.

Häufig gestellte Fragen

Wie viele HTML-Farbnamen gibt es?

Die Spezifikation CSS Color Level 4 definiert exakt 148 Farb-Keywords, dazu die Spezialwerte transparent und currentColor. Das sind 141 eindeutige Namen plus 7 Aliase in der britischen "grey"-Schreibweise. Die 16 Grundnamen stammen aus HTML 4.01; der Rest geht auf das X11/SVG-Set zurück, und rebeccapurple kam 2014 hinzu.

Warum gibt es eine CSS-Farbe namens rebeccapurple?

Sie wurde 2014 im Gedenken an Rebecca Meyer aufgenommen, die sechsjährige Tochter des CSS-Pioniers Eric Meyer, die an ihrem Geburtstag an einem Hirntumor starb. Die Web-Community schlug die Farbe noch am selben Tag vor, und die CSS Working Group stimmte innerhalb von Stunden zu. Es ist die einzige CSS-Farbe, die nach einer realen Person benannt ist.

Was ist der Unterschied zwischen lime und green in CSS?

lime ist reines Grün mit maximaler Helligkeit: #00FF00. green ist der dunklere Ton #008000 mit halber Helligkeit. Die Benennung stammt aus dem ursprünglichen 16-Farben-Set von HTML 4.01, in dem green als mittlerer Ton definiert wurde. Für das hellste Grün lime verwenden.

Ist grey ein gültiger CSS-Farbname?

Als eigenständiges Keyword nicht — nur gray (#808080) ist in der einfachen Form gültig. In zusammengesetzten Namen funktionieren jedoch beide Schreibweisen: darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, slategray/slategrey und die Slate-Varianten sind alle legal — genau deshalb liegt die Gesamtzahl bei 148 statt 141.

Kann ich den nächstgelegenen CSS-Farbnamen zu einem Hex-Code finden?

Ja — den Hex-Code einfach in den Finder auf dieser Seite einfügen. Er konvertiert die Eingabe und alle 148 Keywords in den CIELAB-Farbraum und sortiert nach ΔE-Abstand, der die menschliche Farbwahrnehmung deutlich besser abbildet als roher RGB-Abstand. Das Ergebnis: der beste Treffer plus die nächstbesten Alternativen.

Ressourcen

• MDN — <named-color> — Die kanonische Liste aller Farbnamen in der Browser-Dokumentation, mit gerenderten Farbmustern.
• W3C — CSS Color Module Level 4 — Die offizielle Spezifikationstabelle mit allen 148 Keywords und ihren exakten RGB-Werten.
• Eric Meyer — In Memoriam, 2 — Der Beitrag hinter der rebeccapurple-Geschichte, geschrieben von Rebeccas Vater.