Farbcodes

Farbcodes ist die vollständige Liste der 148 Farbnamen, die CSS versteht, jeweils mit Hex-, RGB- und HSL-Code sowie dem Kontrast gegen Weiß und Schwarz. Suchen Sie nach einem Namen oder fügen Sie einen Hex-Wert ein, um herauszufinden, wie eine Farbe heißt, filtern Sie nach Familie und sortieren Sie nach Farbton oder Helligkeit, um den ganzen Satz so angeordnet zu sehen, wie das Auge ihn liest – nicht alphabetisch.

Nur lokal

Nach Name oder Hexwert suchen

Sortieren

148 von 148 Farben

CSS-Farbnamen mit Hex-, RGB- und HSL-Werten und Kontrastverhältnissen
Name	Auf Weiß	Auf Schwarz
aliceblue	1.07	19.58
antiquewhite	1.17	17.93
aqua	1.25	16.75
aquamarine	1.22	17.16
azure	1.03	20.45
beige	1.11	18.98
bisque	1.22	17.15
black	21.00	1.00
blanchedalmond	1.17	18.02
blue	8.59	2.44
blueviolet	5.96	3.52
brown	7.08	2.96
burlywood	1.86	11.31
cadetblue	3.05	6.88
chartreuse	1.30	16.21
chocolate	3.63	5.78
coral	2.50	8.40
cornflowerblue	2.97	7.06
cornsilk	1.07	19.71
crimson	4.99	4.21
cyan	1.25	16.75
darkblue	15.30	1.37
darkcyan	4.15	5.07
darkgoldenrod	3.25	6.45
darkgray	2.35	8.94
darkgreen	7.44	2.82
darkgrey	2.35	8.94
darkkhaki	2.07	10.15
darkmagenta	8.50	2.47
darkolivegreen	5.95	3.53
darkorange	2.33	9.00
darkorchid	5.70	3.68
darkred	10.01	2.10
darksalmon	2.31	9.11
darkseagreen	2.15	9.76
darkslateblue	9.07	2.32
darkslategray	8.93	2.35
darkslategrey	8.93	2.35
darkturquoise	1.95	10.75
darkviolet	6.56	3.20
deeppink	3.64	5.77
deepskyblue	2.12	9.90
dimgray	5.49	3.83
dimgrey	5.49	3.83
dodgerblue	3.24	6.49
firebrick	6.68	3.14
floralwhite	1.04	20.18
forestgreen	4.39	4.78
fuchsia	3.14	6.70
gainsboro	1.37	15.31
ghostwhite	1.06	19.86
gold	1.40	14.97
goldenrod	2.24	9.38
gray	3.95	5.32
green	5.14	4.09
greenyellow	1.23	17.12
grey	3.95	5.32
honeydew	1.04	20.27
hotpink	2.65	7.93
indianred	3.98	5.28
indigo	12.95	1.62
ivory	1.01	20.81
khaki	1.28	16.40
lavender	1.23	17.06
lavenderblush	1.10	19.03
lawngreen	1.33	15.78
lemonchiffon	1.06	19.81
lightblue	1.53	13.74
lightcoral	2.59	8.10
lightcyan	1.05	19.92
lightgoldenrodyellow	1.07	19.67
lightgray	1.50	14.03
lightgreen	1.42	14.82
lightgrey	1.50	14.03
lightpink	1.65	12.71
lightsalmon	1.99	10.56
lightseagreen	2.62	8.01
lightskyblue	1.72	12.24
lightslategray	3.64	5.77
lightslategrey	3.64	5.77
lightsteelblue	1.78	11.80
lightyellow	1.02	20.63
lime	1.37	15.30
limegreen	2.12	9.91
linen	1.12	18.67
magenta	3.14	6.70
maroon	10.95	1.92
mediumaquamarine	1.93	10.88
mediumblue	11.16	1.88
mediumorchid	3.94	5.33
mediumpurple	3.76	5.58
mediumseagreen	2.67	7.88
mediumslateblue	4.15	5.06
mediumspringgreen	1.39	15.14
mediumturquoise	1.86	11.27
mediumvioletred	5.42	3.87
midnightblue	14.85	1.41
mintcream	1.02	20.57
mistyrose	1.20	17.44
moccasin	1.23	17.02
navajowhite	1.29	16.30
navy	16.01	1.31
oldlace	1.08	19.38
olive	4.20	5.01
olivedrab	3.81	5.52
orange	1.97	10.63
orangered	3.44	6.10
orchid	2.89	7.27
palegoldenrod	1.25	16.76
palegreen	1.27	16.59
paleturquoise	1.29	16.29
palevioletred	3.11	6.75
papayawhip	1.13	18.56
peachpuff	1.31	15.98
peru	2.99	7.02
pink	1.54	13.65
plum	2.07	10.15
powderblue	1.43	14.65
purple	9.42	2.23
rebeccapurple	8.41	2.50
red	4.00	5.25
rosybrown	2.81	7.46
royalblue	4.85	4.33
saddlebrown	7.10	2.96
salmon	2.50	8.40
sandybrown	2.03	10.33
seagreen	4.25	4.95
seashell	1.07	19.55
sienna	5.62	3.74
silver	1.82	11.54
skyblue	1.74	12.06
slateblue	5.31	3.96
slategray	4.05	5.18
slategrey	4.05	5.18
snow	1.03	20.31
springgreen	1.35	15.61
steelblue	4.11	5.11
tan	1.97	10.65
teal	4.77	4.40
thistle	1.70	12.36
tomato	2.95	7.13
turquoise	1.64	12.79
violet	2.32	9.06
wheat	1.31	15.98
white	1.00	21.00
whitesmoke	1.09	19.26
yellow	1.07	19.56
yellowgreen	1.88	11.15

Wie funktioniert Farbcodes?

CSS hat 148 Farb-Keywords. Sie sind kein System – sie haben sich angesammelt. Sechzehn stammen aus der ursprünglichen Palette von HTML 4, die aus den sechzehn VGA-Farben kam. Weitere 130 kamen aus rgb.txt, der Datei des X11-Fenstersystems, die am MIT im Lauf der 1980er von Leuten zusammengestellt wurde, die Farben benannten, sobald sie sie brauchten. Deshalb gibt es sowohl gray als auch grey, deshalb ist darkgray heller als gray, und deshalb ist rebeccapurple – 2014 zum Gedenken an Eric Meyers Tochter hinzugekommen – das einzige mit einer Geschichte.

Warum darkgray heller ist als gray

gray ist #808080, die Mitte der Palette von HTML 4. darkgray ist #a9a9a9, also heller. Beide stammen aus verschiedenen Quellen und wurden nie angeglichen: Als jemandem das auffiel, hätte jede Änderung jede Seite zerstört, die den jeweiligen Wert verwendet. Es ist der zuverlässigste Weg, um ein Farbtool zu entlarven, das seine Tabelle generiert statt die Spezifikation zu lesen.

Nach Farbton sortieren statt nach Name

Alphabetische Ordnung ist nutzlos, um eine Farbe zu wählen, und perfekt, um eine zu finden, deren Namen Sie bereits kennen. Nach Farbton sortiert erscheint die Liste in der Reihenfolge, die das Auge erwartet – die Rottöne beieinander, dann die Orangetöne, und so weiter rund ums Rad –, das ist die Ansicht, die die Frage „Was liegt sonst in der Nähe?“ beantwortet. Verwendet wird der OKLCh-Winkel, nicht der HSL-Winkel, sodass die Gruppierungen dem entsprechen, wie die Farben aussehen, und nicht dem, was die Rechnung ergibt.

Die Kontrastspalten

Jede Zeile führt ihr WCAG-2.x-Verhältnis gegen Weiß und gegen Schwarz mit. Diese Zahl entscheidet, ob die Farbe Text tragen kann, und sie ist der schnellste Weg, den größten Teil dieser Liste für alles außer Dekoration auszusortieren: Von den 148 erreichen weniger als die Hälfte 4.5:1 auf Weiß.

Ein Name oder ein Hex-Wert

navy

Jeder Code dafür

hex        #000080
rgb        rgb(0 0 128)
hsl        hsl(240 100% 25.1%)
on white   16.01 : 1
on black   1.31 : 1

Welche Optionen und Sonderfälle unterstützt Farbcodes?

Technische Referenz und Optionen
Parameter	Typ	Standard	Verhalten & Sonderfälle
148	Anzahl	CSS Color 4	Die Anzahl der benannten Farben, wobei die Grautöne in beiden Schreibweisen als separate Schlüsselwörter gezählt werden. 147 ist die üblicherweise genannte Zahl, aus der Zeit vor der Hinzufügung von rebeccapurple.
gray / grey	Alias	beide gültig	Jeder Grauschlüsselwort existiert in beiden Schreibweisen und hat identische Werte. CSS akzeptiert beide, und hat das immer getan.
darkgray	#a9a9a9	—	Heller als gray (#808080). Ein Artefakt der Verschmelzung der HTML 4- und X11-Paletten, beibehalten, weil eine Änderung bestehende Seiten beschädigen würde.
rebeccapurple	#663399	2014	Das einzige Schlüsselwort, das seit dem X11-Import hinzugefügt wurde, zu Ehren von Rebecca Meyer. Ein Alias für den Wert, den ihr Vater dafür verwendet hat.
aqua / cyan	#00ffff	identisch	Gleicher Wert, zwei Namen, ebenso wie bei fuchsia und magenta. Beide Paare stammen aus den beiden Quellpaletten.
transparent	Schlüsselwort	rgba(0,0,0,0)	Gültig überall, wo eine Farbe verwendet werden kann, und nicht in dieser Liste, weil sie keinen Wert hat, der nachgeschlagen werden kann.
Kontrast	Verhältnis	vs #fff / #000	WCAG 2.x Verhältnis. 4.5:1 ist das Minimum für normalen Text; weniger als die Hälfte dieser Schlüsselwörter erreichen dies auf weißem Hintergrund.
Farbton-Sortierung	OKLCh	Grad	Sortiert nach wahrnehmungsbasierter Farbton-Winkel, nicht nach HSL – deshalb ist Rot hier bei 29° anstatt 0°.

Häufig gestellte Fragen

Welchen Hex-Code hat Rot?

#FF0000, das ist rgb(255 0 0) und hsl(0 100% 50%). Es ist eines der sechzehn ursprünglichen Keywords von HTML 4. Gut zu wissen: Reines #FF0000 ist ein sehr gesättigtes Rot, das auf Weiß vibriert und als Text schwer lesbar ist – es erreicht auf Weiß nur 4.0:1 und scheitert damit an WCAG AA für Fließtext. Die meisten Interfaces nehmen etwas näher an #C62828 oder dunkler.

Welchen Hex-Code hat Navyblau?

#000080. Das ist das CSS-Keyword navy: rgb(0 0 128), exakt halbe Intensität Blau. Es ist sehr dunkel – 16.0:1 gegen Weiß –, was es hervorragend für Text auf hellem Grund macht und auf dunklem Grund fast unlesbar. Das hellere Navyblau der meisten Markenpaletten liegt meist um #1B3A6B herum, nicht beim Keyword.

Warum ist darkgray heller als gray?

Weil beide aus verschiedenen Quellen stammen. gray ist #808080 aus der Palette von HTML 4; darkgray ist #A9A9A9 aus der rgb.txt von X11. Als CSS die beiden Listen Ende der 1990er zusammenführte, war der Konflikt längst in Browsern ausgeliefert, also wurde er bewahrt statt behoben. Es ist der beste einzelne Test dafür, ob eine Farbreferenz aus der Spezifikation kopiert oder nach eigener Annahme generiert wurde.

Wie viele CSS-Farbnamen gibt es?

148 Keywords oder 139 verschiedene Farbwerte – die Differenz sind die Grautöne in zwei Schreibweisen sowie die Paare aqua/cyan und fuchsia/magenta. Die Zahl 147, die kursiert, stammt aus der Zeit vor rebeccapurple, das 2014 in die Spezifikation aufgenommen wurde.

Kann ich in CSS einen Farbnamen statt eines Hex-Codes verwenden?

Ja, überall dort, wo eine Farbe gültig ist, und jeder Browser unterstützt alle seit zwei Jahrzehnten. Das praktische Argument dagegen: Die Namen sind kein System. Zwischen darkblue und blue gibt es keine Beziehung, auf die Sie sich verlassen können, keine einheitliche Helligkeitsskala und nichts, woran man interpolieren könnte. Für ein Designsystem wollen Sie selbst erzeugte Werte; für einen schnellen Prototyp oder eine Debug-Umrandung ist `outline: 2px solid hotpink` schneller getippt als jeder Hex-Wert.

Wie finde ich heraus, wie eine Hex-Farbe heißt?

Fügen Sie ihn in das Suchfeld ein. Der Filter trifft auch auf Hex-Werte zu, nicht nur auf Namen: Die Eingabe von #4169e1 findet royalblue. Ist der Wert kein exaktes Keyword, kommt nichts zurück – das sind exakte Werte, keine nächsten Nachbarn. Ein Tool, das für #4169e2 'royalblue' ausgäbe, würde über einem Wert lügen, den Sie gleich in Code einfügen.

ToolsByUs-Team · Wie wir unsere Tools prüfen