HTML-Farbnamentabelle mit Hex-, RGB- und HSL-Farbwerten

Bei den 16.777.215 Farben, über die ich bei der Websitegestaltung verfügen kann, komme ich doch etwas durcheinander, mal abgesehen davon, daß die einzelnen Farbwerte nicht wirklich gut zu merken sind.

Also bastelte ich mir eine Farbtabelle mit den HTML5-Farbnamen, auch bekannt unter Netscape-Farbnamen. Zusätzlich zeigt die HTML5-Farbnamentabelle die Farbwerte in hexadezimaler, RGB- und HSL-Notation. Diese Farben reichen mir und sie sind besser zu merken. Zumindest kann man sich aber Anregungen zur Farbauswahl für sein Projekt holen.

HTML5-Entwicklern stehen somit 140 Farbnamen zur Verfügung plus der »Nichtfarbe« transparent, für die es ein Anwendungsbeispiel gibt. Wer möchte, kann sich aber aus dem integrierten Farbwähler eine Farbe aus den fast 17 Millionen möglichen aussuchen.

Die Farbtabelle läßt sich nach verschiedenen Kriterien sortieren, sodaß passende Farben bequem zu finden sind.

Die 140 HTML5-Farbnamen

Sie setzen sich aus den 120 Netscape-Farbnamen zusammen plus einigen neuen Farbnamen.

cyan und magenta entsprechen aqua und fuchsia. Diese beiden Farbwerte sind also doppelt vorhanden.

Bei den gray-Farben funktioniert auch die englische Schreibweise grey.

Falls Sie nicht HTML5 / CSS3 für ihre Webseiten benutzen, sollten Sie die HTML5-Farbnamen nicht verwenden, da die Farbnamen kein valides HTML erzeugen. Nehmen Sie stattdessen deren Farbwerte.

HTML5-Farbnamen und Farbwerte
Nr	Farbname	Hex	RGB	HSL
	Pastellfarben
1	`white`	`#ffffff`	`rgb(255,255,255)`	`hsl(0,0%,100%)`
2	`snow`	`#fffafa`	`rgb(255,250,250)`	`hsl(0,100%,99%)`
3	`whitesmoke`	`#f5f5f5`	`rgb(245,245,245)`	`hsl(0,0%,96%)`
4	`ghostwhite`	`#f8f8ff`	`rgb(248,248,255)`	`hsl(240,100%,99%)`
5	`lightcyan`	`#e0ffff`	`rgb(224,255,255)`	`hsl(180,100%,94%)`
6	`mintcream`	`#f5fffa`	`rgb(245,255,250)`	`hsl(150,100%,98%)`
7	`honeydew`	`#f0fff0`	`rgb(240,255,240)`	`hsl(120,100%,97%)`
8	`azure`	`#f0ffff`	`rgb(240,255,255)`	`hsl(180,100%,97%)`
9	`aliceblue`	`#f0f8ff`	`rgb(240,248,255)`	`hsl(208,100%,97%)`
10	`lavender`	`#e6e6fa`	`rgb(230,230,250)`	`hsl(240,67%,94%)`
11	`thistle`	`#d8bfd8`	`rgb(216,191,216)`	`hsl(300,24%,80%)`
12	`lavenderblush`	`#fff0f5`	`rgb(255,240,245)`	`hsl(340,100%,97%)`
13	`mistyrose`	`#ffe4e1`	`rgb(255,228,225)`	`hsl(6,100%,94%)`
14	`seashell`	`#fff5ee`	`rgb(255,245,238)`	`hsl(25,100%,97%)`
15	`linen`	`#faf0e6`	`rgb(250,240,230)`	`hsl(30,67%,94%)`
16	`oldlace`	`#fdf5e6`	`rgb(253,245,230)`	`hsl(39,85%,95%)`
17	`cornsilk`	`#fff8dc`	`rgb(255,248,220)`	`hsl(48,100%,93%)`
18	`ivory`	`#fffff0`	`rgb(255,255,240)`	`hsl(60,100%,97%)`
19	`floralwhite`	`#fffaf0`	`rgb(255,250,240)`	`hsl(40,100%,97%)`
20	`beige`	`#f5f5dc`	`rgb(245,245,220)`	`hsl(60,56%,91%)`
21	`lightyellow`	`#ffffe0`	`rgb(255,255,224)`	`hsl(60,100%,94%)`
22	`lemonchiffon`	`#fffacd`	`rgb(255,250,205)`	`hsl(54,100%,90%)`
23	`lightgoldenrodyellow`	`#fafad2`	`rgb(250,250,210)`	`hsl(60,80%,90%)`
24	`papayawhip`	`#ffefd5`	`rgb(255,239,213)`	`hsl(37,100%,92%)`
25	`antiquewhite`	`#faebd7`	`rgb(250,235,215)`	`hsl(34,78%,91%)`
26	`blanchedalmond`	`#ffebcd`	`rgb(255,235,205)`	`hsl(36,100%,90%)`
27	`wheat`	`#f5deb3`	`rgb(245,222,179)`	`hsl(39,77%,83%)`
28	`bisque`	`#ffe4c4`	`rgb(255,228,196)`	`hsl(33,100%,88%)`
29	`moccasin`	`#ffe4b5`	`rgb(255,228,181)`	`hsl(38,100%,85%)`
30	`navajowhite`	`#ffdead`	`rgb(255,222,173)`	`hsl(36,100%,84%)`
31	`peachpuff`	`#ffdab9`	`rgb(255,218,185)`	`hsl(28,100%,86%)`
32	`palegoldenrod`	`#eee8aa`	`rgb(238,232,170)`	`hsl(55,67%,80%)`
33	`khaki`	`#f0e68c`	`rgb(240,230,140)`	`hsl(54,77%,75%)`
34	`darkkhaki`	`#bdb76b`	`rgb(189,183,107)`	`hsl(56,38%,58%)`
	Braune Farben
35	`burlywood`	`#deb887`	`rgb(222,184,135)`	`hsl(34,57%,70%)`
36	`tan`	`#d2b48c`	`rgb(210,180,140)`	`hsl(34,44%,69%)`
37	`rosybrown`	`#bc8f8f`	`rgb(188,143,143)`	`hsl(0,25%,65%)`
38	`sandybrown`	`#f4a460`	`rgb(244,164,96)`	`hsl(28,87%,67%)`
39	`peru`	`#cd853f`	`rgb(205,133,63)`	`hsl(30,59%,53%)`
40	`chocolate`	`#d2691e`	`rgb(210,105,30)`	`hsl(25,75%,47%)`
41	`saddlebrown`	`#8b4513`	`rgb(139,69,19)`	`hsl(25,76%,31%)`
42	`sienna`	`#a0522d`	`rgb(160,82,45)`	`hsl(19,56%,40%)`
	Rote Farben
43	`indianred`	`#cd5c5c`	`rgb(205,92,92)`	`hsl(0,53%,58%)`
44	`lightcoral`	`#f08080`	`rgb(240,128,128)`	`hsl(0,79%,72%)`
45	`darksalmon`	`#e9967a`	`rgb(233,150,122)`	`hsl(15,72%,70%)`
46	`pink`	`#ffc0cb`	`rgb(255,192,203)`	`hsl(350,100%,88%)`
47	`lightpink`	`#ffb6c1`	`rgb(255,182,193)`	`hsl(351,100%,86%)`
48	`lightsalmon`	`#ffa07a`	`rgb(255,160,122)`	`hsl(17,100%,74%)`
49	`salmon`	`#fa8072`	`rgb(250,128,114)`	`hsl(6,93%,71%)`
50	`coral`	`#ff7f50`	`rgb(255,127,80)`	`hsl(16,100%,66%)`
51	`tomato`	`#ff6347`	`rgb(255,99,71)`	`hsl(9,100%,64%)`
52	`orangered`	`#ff4500`	`rgb(255,69,0)`	`hsl(16,100%,50%)`
53	`brown`	`#a52a2a`	`rgb(165,42,42)`	`hsl(0,59%,41%)`
54	`firebrick`	`#b22222`	`rgb(178,34,34)`	`hsl(0,68%,42%)`
55	`darkred`	`#8b0000`	`rgb(139,0,0)`	`hsl(0,100%,27%)`
56	`maroon`	`#800000`	`rgb(128,0,0)`	`hsl(0,100%,25%)`
57	`crimson`	`#dc143c`	`rgb(220,20,60)`	`hsl(348,83%,47%)`
58	`red`	`#ff0000`	`rgb(255,0,0)`	`hsl(0,100%,50%)`
	Frauen Farben
59	`deeppink`	`#ff1493`	`rgb(255,20,147)`	`hsl(328,100%,54%)`
60	`fuchsia`	`#ff00ff`	`rgb(255,0,255)`	`hsl(300,100%,50%)`
61	`magenta`	`#ff00ff`	`rgb(255,0,255)`	`hsl(300,100%,50%)`
62	`hotpink`	`#ff69b4`	`rgb(255,105,180)`	`hsl(330,100%,71%)`
63	`palevioletred`	`#db7093`	`rgb(219,112,147)`	`hsl(340,60%,65%)`
64	`mediumvioletred`	`#c71585`	`rgb(199,21,133)`	`hsl(322,81%,43%)`
65	`darkmagenta`	`#8b008b`	`rgb(139,0,139)`	`hsl(300,100%,27%)`
66	`purple`	`#800080`	`rgb(128,0,128)`	`hsl(300,100%,25%)`
67	`indigo`	`#4b0082`	`rgb(75,0,130)`	`hsl(275,100%,25%)`
68	`darkviolet`	`#9400d3`	`rgb(148,0,211)`	`hsl(282,100%,41%)`
69	`blueviolet`	`#8a2be2`	`rgb(138,43,226)`	`hsl(271,76%,53%)`
70	`darkorchid`	`#9932cc`	`rgb(153,50,204)`	`hsl(280,61%,50%)`
71	`mediumorchid`	`#ba55d3`	`rgb(186,85,211)`	`hsl(288,59%,58%)`
72	`orchid`	`#da70d6`	`rgb(218,112,214)`	`hsl(302,59%,65%)`
73	`violet`	`#ee82ee`	`rgb(238,130,238)`	`hsl(300,76%,72%)`
74	`plum`	`#dda0dd`	`rgb(221,160,221)`	`hsl(300,47%,75%)`
75	`mediumpurple`	`#9370db`	`rgb(147,112,219)`	`hsl(260,60%,65%)`
76	`mediumslateblue`	`#7b68ee`	`rgb(123,104,238)`	`hsl(249,80%,67%)`
77	`slateblue`	`#6a5acd`	`rgb(106,90,205)`	`hsl(248,53%,58%)`
78	`darkslateblue`	`#483d8b`	`rgb(72,61,139)`	`hsl(248,39%,39%)`
	Blaue Farben
79	`midnightblue`	`#191970`	`rgb(25,25,112)`	`hsl(240,64%,27%)`
80	`navy`	`#000080`	`rgb(0,0,128)`	`hsl(240,100%,25%)`
81	`darkblue`	`#00008b`	`rgb(0,0,139)`	`hsl(240,100%,27%)`
82	`mediumblue`	`#0000cd`	`rgb(0,0,205)`	`hsl(240,100%,40%)`
83	`blue`	`#0000ff`	`rgb(0,0,255)`	`hsl(240,100%,50%)`
84	`dodgerblue`	`#1e90ff`	`rgb(30,144,255)`	`hsl(210,100%,56%)`
85	`deepskyblue`	`#00bfff`	`rgb(0,191,255)`	`hsl(195,100%,50%)`
86	`royalblue`	`#4169e1`	`rgb(65,105,225)`	`hsl(225,73%,57%)`
87	`cornflowerblue`	`#6495ed`	`rgb(100,149,237)`	`hsl(219,79%,66%)`
88	`steelblue`	`#4682b4`	`rgb(70,130,180)`	`hsl(207,44%,49%)`
89	`cadetblue`	`#5f9ea0`	`rgb(95,158,160)`	`hsl(182,25%,50%)`
90	`lightsteelblue`	`#b0c4de`	`rgb(176,196,222)`	`hsl(214,41%,78%)`
91	`lightblue`	`#add8e6`	`rgb(173,216,230)`	`hsl(195,53%,79%)`
92	`powderblue`	`#b0e0e6`	`rgb(176,224,230)`	`hsl(187,52%,80%)`
93	`skyblue`	`#87ceeb`	`rgb(135,206,235)`	`hsl(197,71%,73%)`
94	`lightskyblue`	`#87cefa`	`rgb(135,206,250)`	`hsl(203,92%,75%)`
95	`paleturquoise`	`#afeeee`	`rgb(175,238,238)`	`hsl(180,65%,81%)`
96	`aqua`	`#00ffff`	`rgb(0,255,255)`	`hsl(180,100%,50%)`
97	`cyan`	`#00ffff`	`rgb(0,255,255)`	`hsl(180,100%,50%)`
	Grüne Farben
98	`mediumturquoise`	`#48d1cc`	`rgb(72,209,204)`	`hsl(178,60%,55%)`
99	`darkturquoise`	`#00ced1`	`rgb(0,206,209)`	`hsl(181,100%,41%)`
100	`lightseagreen`	`#20b2aa`	`rgb(32,178,170)`	`hsl(177,70%,41%)`
101	`darkcyan`	`#008b8b`	`rgb(0,139,139)`	`hsl(180,100%,27%)`
102	`teal`	`#008080`	`rgb(0,128,128)`	`hsl(180,100%,25%)`
103	`darkslategray`	`#2f4f4f`	`rgb(47,79,79)`	`hsl(180,25%,25%)`
104	`turquoise`	`#40e0d0`	`rgb(64,224,208)`	`hsl(174,72%,56%)`
105	`aquamarine`	`#7fffd4`	`rgb(127,255,212)`	`hsl(160,100%,75%)`
106	`mediumaquamarine`	`#66cdaa`	`rgb(102,205,170)`	`hsl(160,51%,60%)`
107	`mediumseagreen`	`#3cb371`	`rgb(60,179,113)`	`hsl(147,50%,47%)`
108	`seagreen`	`#2e8b57`	`rgb(46,139,87)`	`hsl(146,50%,36%)`
109	`forestgreen`	`#228b22`	`rgb(34,139,34)`	`hsl(120,61%,34%)`
110	`green`	`#008000`	`rgb(0,128,0)`	`hsl(120,100%,25%)`
111	`darkgreen`	`#006400`	`rgb(0,100,0)`	`hsl(120,100%,20%)`
112	`darkolivegreen`	`#556b2f`	`rgb(85,107,47)`	`hsl(82,39%,30%)`
113	`olive`	`#808000`	`rgb(128,128,0)`	`hsl(60,100%,25%)`
114	`olivedrab`	`#6b8e23`	`rgb(107,142,35)`	`hsl(80,60%,35%)`
115	`darkseagreen`	`#8fbc8f`	`rgb(143,188,143)`	`hsl(120,25%,65%)`
116	`lightgreen`	`#90ee90`	`rgb(144,238,144)`	`hsl(120,73%,75%)`
117	`palegreen`	`#98fb98`	`rgb(152,251,152)`	`hsl(120,93%,79%)`
118	`springgreen`	`#00ff7f`	`rgb(0,255,127)`	`hsl(150,100%,50%)`
119	`mediumspringgreen`	`#00fa9a`	`rgb(0,250,154)`	`hsl(157,100%,49%)`
120	`limegreen`	`#32cd32`	`rgb(50,205,50)`	`hsl(120,61%,50%)`
121	`lime`	`#00ff00`	`rgb(0,255,0)`	`hsl(120,100%,50%)`
122	`lawngreen`	`#7cfc00`	`rgb(124,252,0)`	`hsl(90,100%,49%)`
123	`chartreuse`	`#7fff00`	`rgb(127,255,0)`	`hsl(90,100%,50%)`
124	`greenyellow`	`#adff2f`	`rgb(173,255,47)`	`hsl(84,100%,59%)`
125	`yellowgreen`	`#9acd32`	`rgb(154,205,50)`	`hsl(80,61%,50%)`
	Gelbe Farben
126	`yellow`	`#ffff00`	`rgb(255,255,0)`	`hsl(60,100%,50%)`
127	`gold`	`#ffd700`	`rgb(255,215,0)`	`hsl(51,100%,50%)`
128	`orange`	`#ffa500`	`rgb(255,165,0)`	`hsl(39,100%,50%)`
129	`darkorange`	`#ff8c00`	`rgb(255,140,0)`	`hsl(33,100%,50%)`
130	`goldenrod`	`#daa520`	`rgb(218,165,32)`	`hsl(43,74%,49%)`
131	`darkgoldenrod`	`#b8860b`	`rgb(184,134,11)`	`hsl(43,89%,38%)`
	Graue Farben
132	`slategray`	`#708090`	`rgb(112,128,144)`	`hsl(210,13%,50%)`
133	`lightslategray`	`#778899`	`rgb(119,136,153)`	`hsl(210,14%,53%)`
134	`gainsboro`	`#dcdcdc`	`rgb(220,220,220)`	`hsl(0,0%,86%)`
135	`lightgray`	`#d3d3d3`	`rgb(211,211,211)`	`hsl(0,0%,83%)`
136	`silver`	`#c0c0c0`	`rgb(192,192,192)`	`hsl(0,0%,75%)`
137	`darkgray`	`#a9a9a9`	`rgb(169,169,169)`	`hsl(0,0%,66%)`
138	`gray`	`#808080`	`rgb(128,128,128)`	`hsl(0,0%,50%)`
139	`dimgray`	`#696969`	`rgb(105,105,105)`	`hsl(0,0%,41%)`
140	`black`	`#000000`	`rgb(0,0,0)`	`hsl(0,0%,0%)`

Die 16 HTML4-Farbnamen

Die 'alten' HTML4-Farbnamen erzeugen bei allen (X)HTML-Versionen valides HTML.

HTML4-Farbnamen und Farbwerte
Nr	Farbname	Hex	RGB	HSL
1	`black`	`#000000`	`rgb(0,0,0)`	`hsl(0,0%,0%)`
2	`gray`	`#808080`	`rgb(128,128,128)`	`hsl(0,0%,50%)`
3	`maroon`	`#800000`	`rgb(128,0,0)`	`hsl(0,100%,25%)`
4	`red`	`#ff0000`	`rgb(255,0,0)`	`hsl(0,100%,50%)`
5	`green`	`#008000`	`rgb(0,128,0)`	`hsl(120,100%,25%)`
6	`lime`	`#00ff00`	`rgb(0,255,0)`	`hsl(120,100%,50%)`
7	`olive`	`#808000`	`rgb(128,128,0)`	`hsl(60,100%,25%)`
8	`yellow`	`#ffff00`	`rgb(255,255,0)`	`hsl(60,100%,50%)`
9	`navy`	`#000080`	`rgb(0,0,128)`	`hsl(240,100%,25%)`
10	`blue`	`#0000ff`	`rgb(0,0,255)`	`hsl(240,100%,50%)`
11	`purple`	`#800080`	`rgb(128,0,128)`	`hsl(300,100%,25%)`
12	`fuchsia`	`#ff00ff`	`rgb(255,0,255)`	`hsl(300,100%,50%)`
13	`teal`	`#008080`	`rgb(0,128,128)`	`hsl(180,100%,25%)`
14	`aqua`	`#00ffff`	`rgb(0,255,255)`	`hsl(180,100%,50%)`
15	`silver`	`#c0c0c0`	`rgb(192,192,192)`	`hsl(0,0%,75%)`
16	`white`	`#ffffff`	`rgb(255,255,255)`	`hsl(0,0%,100%)`

Anwender-relative Farbwörter

Das sind die Systemfarben auf dem Rechner des Anwenders. Die Anwender-relativen Farbwörter wurden ab CSS 2.0 eingeführt.

Farbwörter
Nr	Beschreibung	Farbwort
	3D-Element
1	Hintergrund	ThreeDFace
2	Glanzlicht	ThreeDHighlight
3	Schatten	ThreeDShadow
4	Heller Schatten	ThreeDLightShadow
5	Dunkler Schatten	ThreeDDarkShadow
	Ausgewählt + Deaktiviert
6	Vordergrund	HighlightText
7	Hintergrund	Highlight
8	Deaktiviert (ausgegraut)	GrayText
	Button
9	Vordergrund	ButtonText
10	Hintergrund	ButtonFace
11	Glanzlicht	ButtonHighlight
12	Schatten	ButtonShadow
	Dokumentfenster
13	Vordergrund	WindowText
14	Hintergrund	Window
	Hinweisfenster
15	Vordergrund	InfoText
16	Hintergrund	InfoBackground
	Menü
17	Vordergrund	MenuText
18	Hintergrund	Menu
	Rahmen
19	Aktives Fenster	ActiveBorder
20	Inaktives Fenster	InactiveBorder
21	Fenster	WindowFrame
	Titelleiste
22	Vordergrund: aktives Fenster	CaptionText
23	Hintergrund: aktives Fenster	ActiveCaption
24	Vordergrund: inaktives Fenster	InactiveCaptionText
25	Hintergrund: inaktives Fenster	InactiveCaption
	Verschiedenes
26	Hintergrund: aktive Anwendung	AppWorkspace
27	Hintergrund: Desktop	Background
28	Scrollbar	Scrollbar

Farbwähler

Passen die HTML-Farbnamen nicht? Kein Problem. Wählen Sie Ihre Farben mit dem Farbwähler. Klicken Sie dazu auf das Farbfeld.

transparent

Auch die Abwesenheit von Farbe ist manchmal für CSS- und Javascript-Spielereien von Nöten. transparent heißt sinnigerweise der 'Farbname'. Wer's kompliziert möchte, kann auch die 'Opacity' der RGB-Werte auf Null setzen: rgba(0, 0, 0, 0).

Mit Javascript kann man das Ganze auch steuern. So läßt sich z. B. die Ebene unter der aktuellen anzeigen. Zum Testen bitte JavaScript aktivieren!