HTML-Farbnamen: alle 148 mit HEX, RGB, HSL & OKLCH | We.Inc
Alle 148 CSS- und HTML-Farbnamen mit HEX-, RGB-, HSL- und OKLCH-Codes, Kontrast auf Weiß und Schwarz, der nächstgelegenen Tailwind-Klasse und Sortierung nach Farbton, Helligkeit oder Farbfamilie.
HTML-Farbnamen
CSS definiert 148 Farbnamen, von aliceblue bis yellowgreen, und jeder Browser versteht sie in HTML und CSS. Neun davon sind nur andere Schreibweisen eines anderen Namens, etwa grey für gray und cyan für aqua, es gibt also 139 unterschiedliche Farben. Die Tabelle unten zeigt für jede Farbe die HEX-, RGB-, HSL- und OKLCH-Werte, den Textkontrast und die nächstgelegene Tailwind-Klasse.
Fakten zu benannten Farben
Frage
Antwort
Wie viele Namen?
148 (139 unterschiedliche Farben)
Groß- und Kleinschreibung relevant?
Nein: Red, RED und red sind gleich
Wo definiert?
CSS Color Module Level 4
Neuester Name
rebeccapurple (#663399), hinzugefügt 2014
Suche nach Name oder HEX, filtere nach Farbfamilie, sortiere nach Farbton, Helligkeit oder Name und kopiere jeden Wert mit einem Klick. Jede Zeile zeigt außerdem, ob schwarzer oder weißer Text auf dieser Farbe lesbar ist und welche Tailwind-Farbe am nächsten liegt.
Gib einen Teil eines Namens oder einen HEX-Code in das Suchfeld ein, um die Tabelle zu filtern.
Wähle eine Familie, etwa Blau oder Braun, um nur diese Farben zu sehen. Die Familien sind nach wahrgenommenem Farbton gruppiert.
Sortiere nach Name, nach Farbton (um die Farben als Spektrum zu sehen) oder nach Helligkeit (von dunkel nach hell).
Klicke auf einen Wert, um ihn zu kopieren. Die Kontrastspalten zeigen das Verhältnis für weißen und für schwarzen Text auf dieser Farbe.
Benannte Farben sind praktisch für Prototypen und Beispiele, aber ein echtes Design braucht meist exakte Markenwerte. Ersetze die Namen vor dem Launch durch HEX-Werte oder Custom Properties.
Manche Namen führen in die Irre: darkgray (#A9A9A9) ist heller als gray (#808080), und lightgoldenrodyellow ist eher ein blasses Creme als ein Gelb.
Nutze transparent und currentColor zusammen mit den Namen. Auch das sind CSS-Schlüsselwörter, sie gehören aber nicht zu den 148, weil sie keine festen Farben sind.
Prüfe den Kontrast, bevor du eine benannte Farbe für Text verwendest. Viele der hellen Farben, etwa yellow, gold und lime, fallen auf weißem Hintergrund durch.
Häufige Fragen
Wie viele HTML-Farbnamen gibt es?
Im CSS Color Module Level 4, das HTML verwendet, gibt es 148 benannte Farben. Neun Paare sind Aliase für dieselbe Farbe: aqua und cyan, fuchsia und magenta sowie sieben Namen, die mit gray oder grey geschrieben werden können, etwa darkgray und darkgrey. Die Liste beschreibt also 139 unterschiedliche Farben.
Funktionieren Farbnamen in jedem Browser?
Ja. Alle 148 Namen werden von jedem aktuellen Browser unterstützt. Die ursprünglichen 16 Namen aus HTML 4, etwa red, navy und teal, funktionieren seit Jahrzehnten; die übrigen stammen aus der X11-Farbliste und werden ebenfalls seit Langem unterstützt.
Warum ist darkgray heller als gray?
Die Namen stammen aus zwei verschiedenen Quellen. gray wurde in HTML mit 50 % Helligkeit definiert (#808080), während darkgray aus der älteren X11-Farbliste kam, wo es #A9A9A9 war. Als die Listen zusammengeführt wurden, blieben beide Werte unverändert.
Was ist rebeccapurple?
Das ist #663399, 2014 zu CSS hinzugefügt in Erinnerung an Rebecca Meyer, die Tochter des CSS-Autors Eric Meyer. Es ist der jüngste Farbname, der in CSS aufgenommen wurde.
Sollte ich Farbnamen oder HEX-Codes verwenden?
Für produktive Designarbeit verwendest du am besten HEX-, RGB-, HSL- oder OKLCH-Werte, idealerweise als Custom Properties gespeichert, denn Namen decken nur 148 feste Punkte ab. Für schnelle Tests, Dokumentation und Lehre sind Namen in Ordnung, weil dort Lesbarkeit wichtiger ist als Präzision.
Woher die Namen stammen
HTML 4 definierte 16 grundlegende Farbnamen: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal und aqua. Die Browser hatten zudem eine viel längere Liste aus dem X Window System übernommen, und CSS3 machte diese Liste offiziell. CSS Color Level 4 ergänzt rebeccapurple und lässt den Rest unverändert.
Weil die X11-Namen von Menschen und nicht nach einer Formel gewählt wurden, sind sie ungleichmäßig verteilt. Es gibt viele Fast-Weißtöne und mehrere nahezu identische Grüntöne, während manche Farbtöne gar keinen Namen haben. Sortierst du die Tabelle nach Farbton, werden die Lücken deutlich sichtbar.
Die zusätzlichen Spalten lesen
OKLCH beschreibt eine Farbe über Helligkeit, Chroma (wie bunt sie ist) und Farbton, in einem Farbraum, der so angelegt ist, dass gleiche Schritte gleich aussehen. Das ist nützlich, um aus einer benannten Farbe Paletten zu bauen, denn wenn du nur die Helligkeit änderst, wirkt der Farbton gleich.
Die Kontrastspalten verwenden die Formel aus WCAG 2. Für normalen Fließtext sind mindestens 4.5:1 nötig, für großen Text 3:1. Die Tailwind-Spalte nennt die Klasse aus der Standardpalette von Tailwind, die am ähnlichsten aussieht, mit einem Abweichungswert: Unter 2 sind die Farben kaum zu unterscheiden.
Name
HEX
RGB
HSL
OKLCH
Auf Weiß
Auf Schwarz
Nächste Tailwind-Farbe
Rot
Rosa
Orange
Gelb
Braun
Grün
Cyan
Blau
Lila
Weiß
Schwarz und Grau
Kopieren
Alle 148 auf einen Blick, nach Farbton
Alle 148 Farbnamen
Name oder HEX suchen
Sortieren nach
Name
Farbton (Spektrum)
Helligkeit (dunkel nach hell)
{n} angezeigt
· {v} kopiert
Farbfamilie
Alle
Benannte Farben in CSS und HTML
Farbfeld
Abweichung {d}
Grüne Kontrastwerte erreichen 4.5:1, genug für Fließtext. Das Aa-Muster verwendet Schwarz oder Weiß, je nachdem, was besser lesbar ist.