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.

Optionen



HTML5-Farbnamen und Farbwerte
NrFarbnameHexRGBHSL
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
NrFarbnameHexRGBHSL
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
NrBeschreibungFarbwortFarbe
3D-Element
1HintergrundThreeDFace 
2GlanzlichtThreeDHighlight 
3SchattenThreeDShadow 
4Heller SchattenThreeDLightShadow 
5Dunkler SchattenThreeDDarkShadow 
Ausgewählt + Deaktiviert
6VordergrundHighlightText 
7HintergrundHighlight 
8Deaktiviert (ausgegraut)GrayText 
Button
9VordergrundButtonText 
10HintergrundButtonFace 
11GlanzlichtButtonHighlight 
12SchattenButtonShadow 
Dokumentfenster
13VordergrundWindowText 
14HintergrundWindow 
Hinweisfenster
15VordergrundInfoText 
16HintergrundInfoBackground 
Menü
17VordergrundMenuText 
18HintergrundMenu 
Rahmen
19Aktives FensterActiveBorder 
20Inaktives FensterInactiveBorder 
21FensterWindowFrame 
Titelleiste
22Vordergrund: aktives FensterCaptionText 
23Hintergrund: aktives FensterActiveCaption 
24Vordergrund: inaktives FensterInactiveCaptionText 
25Hintergrund: inaktives FensterInactiveCaption 
Verschiedenes
26Hintergrund: aktive AnwendungAppWorkspace 
27Hintergrund: DesktopBackground 
28ScrollbarScrollbar 

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!