IT & Internet · Stand:
HTML-Farben-Tabelle: alle 148 CSS-Farbnamen mit Hex, RGB und HSL
CSS kennt 148 Farbnamen wie red, tomato oder rebeccapurple. Festgelegt sind sie im CSS Color Module Level 4 des W3C, und jeder Browser versteht sie. Die Tabelle nennt zu jedem Namen den Hex-Code und daraus berechnet die RGB- und HSL-Werte, gruppiert nach Farbfamilien von hell nach dunkel.
Die beiden letzten Spalten zeigen den Kontrast zu weißer und schwarzer Schrift nach WCAG 2.2. So siehst Du auf einen Blick, ob eine Farbe als Hintergrund für gut lesbaren Text taugt.
- CSS-Farbnamen
- 148
- davon verschiedene Farben
- 139
- mögliche Hex-Farben
- 16.777.216
- WCAG AA für Fließtext
- 4,5 : 1
| Farbname | Familie | Hex | RGB | HSL | Kontrast zu Weiß (x : 1) | Kontrast zu Schwarz (x : 1) |
|---|---|---|---|---|---|---|
| lightsalmon | Rot | #FFA07A | rgb(255 160 122) | hsl(17 100% 74%) | 1,98 | 10,56 |
| darksalmon | Rot | #E9967A | rgb(233 150 122) | hsl(15 72% 70%) | 2,30 | 9,10 |
| salmon | Rot | #FA8072 | rgb(250 128 114) | hsl(6 93% 71%) | 2,50 | 8,39 |
| lightcoral | Rot | #F08080 | rgb(240 128 128) | hsl(0 79% 72%) | 2,59 | 8,10 |
| indianred | Rot | #CD5C5C | rgb(205 92 92) | hsl(0 53% 58%) | 3,97 | 5,28 |
| red | Rot | #FF0000 | rgb(255 0 0) | hsl(0 100% 50%) | 3,99 | 5,25 |
| crimson | Rot | #DC143C | rgb(220 20 60) | hsl(348 83% 47%) | 4,98 | 4,20 |
| firebrick | Rot | #B22222 | rgb(178 34 34) | hsl(0 68% 42%) | 6,67 | 3,14 |
| darkred | Rot | #8B0000 | rgb(139 0 0) | hsl(0 100% 27%) | 10,01 | 2,09 |
| pink | Rosa | #FFC0CB | rgb(255 192 203) | hsl(350 100% 88%) | 1,53 | 13,65 |
| lightpink | Rosa | #FFB6C1 | rgb(255 182 193) | hsl(351 100% 86%) | 1,65 | 12,71 |
| hotpink | Rosa | #FF69B4 | rgb(255 105 180) | hsl(330 100% 71%) | 2,64 | 7,93 |
| palevioletred | Rosa | #DB7093 | rgb(219 112 147) | hsl(340 60% 65%) | 3,11 | 6,75 |
| deeppink | Rosa | #FF1493 | rgb(255 20 147) | hsl(328 100% 54%) | 3,63 | 5,77 |
| mediumvioletred | Rosa | #C71585 | rgb(199 21 133) | hsl(322 81% 43%) | 5,42 | 3,87 |
| orange | Orange | #FFA500 | rgb(255 165 0) | hsl(39 100% 50%) | 1,97 | 10,63 |
| darkorange | Orange | #FF8C00 | rgb(255 140 0) | hsl(33 100% 50%) | 2,33 | 9,00 |
| coral | Orange | #FF7F50 | rgb(255 127 80) | hsl(16 100% 66%) | 2,49 | 8,40 |
| tomato | Orange | #FF6347 | rgb(255 99 71) | hsl(9 100% 64%) | 2,94 | 7,12 |
| orangered | Orange | #FF4500 | rgb(255 69 0) | hsl(16 100% 50%) | 3,44 | 6,10 |
| lightyellow | Gelb | #FFFFE0 | rgb(255 255 224) | hsl(60 100% 94%) | 1,01 | 20,63 |
| lemonchiffon | Gelb | #FFFACD | rgb(255 250 205) | hsl(54 100% 90%) | 1,06 | 19,80 |
| lightgoldenrodyellow | Gelb | #FAFAD2 | rgb(250 250 210) | hsl(60 80% 90%) | 1,06 | 19,66 |
| yellow | Gelb | #FFFF00 | rgb(255 255 0) | hsl(60 100% 50%) | 1,07 | 19,55 |
| papayawhip | Gelb | #FFEFD5 | rgb(255 239 213) | hsl(37 100% 92%) | 1,13 | 18,55 |
| moccasin | Gelb | #FFE4B5 | rgb(255 228 181) | hsl(38 100% 85%) | 1,23 | 17,01 |
| palegoldenrod | Gelb | #EEE8AA | rgb(238 232 170) | hsl(55 67% 80%) | 1,25 | 16,75 |
| khaki | Gelb | #F0E68C | rgb(240 230 140) | hsl(54 77% 75%) | 1,28 | 16,40 |
| peachpuff | Gelb | #FFDAB9 | rgb(255 218 185) | hsl(28 100% 86%) | 1,31 | 15,98 |
| gold | Gelb | #FFD700 | rgb(255 215 0) | hsl(51 100% 50%) | 1,40 | 14,97 |
| darkkhaki | Gelb | #BDB76B | rgb(189 183 107) | hsl(56 38% 58%) | 2,06 | 10,14 |
| cornsilk | Braun | #FFF8DC | rgb(255 248 220) | hsl(48 100% 93%) | 1,06 | 19,71 |
| blanchedalmond | Braun | #FFEBCD | rgb(255 235 205) | hsl(36 100% 90%) | 1,16 | 18,01 |
| bisque | Braun | #FFE4C4 | rgb(255 228 196) | hsl(33 100% 88%) | 1,22 | 17,14 |
| navajowhite | Braun | #FFDEAD | rgb(255 222 173) | hsl(36 100% 84%) | 1,28 | 16,30 |
| wheat | Braun | #F5DEB3 | rgb(245 222 179) | hsl(39 77% 83%) | 1,31 | 15,98 |
| burlywood | Braun | #DEB887 | rgb(222 184 135) | hsl(34 57% 70%) | 1,85 | 11,31 |
| tan | Braun | #D2B48C | rgb(210 180 140) | hsl(34 44% 69%) | 1,97 | 10,64 |
| sandybrown | Braun | #F4A460 | rgb(244 164 96) | hsl(28 87% 67%) | 2,03 | 10,32 |
| goldenrod | Braun | #DAA520 | rgb(218 165 32) | hsl(43 74% 49%) | 2,23 | 9,38 |
| rosybrown | Braun | #BC8F8F | rgb(188 143 143) | hsl(0 25% 65%) | 2,81 | 7,46 |
| peru | Braun | #CD853F | rgb(205 133 63) | hsl(30 59% 53%) | 2,99 | 7,02 |
| darkgoldenrod | Braun | #B8860B | rgb(184 134 11) | hsl(43 89% 38%) | 3,25 | 6,45 |
| chocolate | Braun | #D2691E | rgb(210 105 30) | hsl(25 75% 47%) | 3,63 | 5,77 |
| sienna | Braun | #A0522D | rgb(160 82 45) | hsl(19 56% 40%) | 5,61 | 3,73 |
| brown | Braun | #A52A2A | rgb(165 42 42) | hsl(0 59% 41%) | 7,08 | 2,96 |
| saddlebrown | Braun | #8B4513 | rgb(139 69 19) | hsl(25 76% 31%) | 7,09 | 2,95 |
| maroon | Braun | #800000 | rgb(128 0 0) | hsl(0 100% 25%) | 10,94 | 1,91 |
| greenyellow | Grün | #ADFF2F | rgb(173 255 47) | hsl(84 100% 59%) | 1,22 | 17,12 |
| palegreen | Grün | #98FB98 | rgb(152 251 152) | hsl(120 93% 79%) | 1,26 | 16,58 |
| chartreuse | Grün | #7FFF00 | rgb(127 255 0) | hsl(90 100% 50%) | 1,29 | 16,20 |
| lawngreen | Grün | #7CFC00 | rgb(124 252 0) | hsl(90 100% 49%) | 1,33 | 15,78 |
| springgreen | Grün | #00FF7F | rgb(0 255 127) | hsl(150 100% 50%) | 1,34 | 15,61 |
| lime | Grün | #00FF00 | rgb(0 255 0) | hsl(120 100% 50%) | 1,37 | 15,30 |
| mediumspringgreen | Grün | #00FA9A | rgb(0 250 154) | hsl(157 100% 49%) | 1,38 | 15,14 |
| lightgreen | Grün | #90EE90 | rgb(144 238 144) | hsl(120 73% 75%) | 1,41 | 14,81 |
| yellowgreen | Grün | #9ACD32 | rgb(154 205 50) | hsl(80 61% 50%) | 1,88 | 11,15 |
| mediumaquamarine | Grün | #66CDAA | rgb(102 205 170) | hsl(160 51% 60%) | 1,93 | 10,87 |
| limegreen | Grün | #32CD32 | rgb(50 205 50) | hsl(120 61% 50%) | 2,11 | 9,91 |
| darkseagreen | Grün | #8FBC8F | rgb(143 188 143) | hsl(120 25% 65%) | 2,15 | 9,75 |
| mediumseagreen | Grün | #3CB371 | rgb(60 179 113) | hsl(147 50% 47%) | 2,66 | 7,87 |
| olivedrab | Grün | #6B8E23 | rgb(107 142 35) | hsl(80 60% 35%) | 3,80 | 5,51 |
| olive | Grün | #808000 | rgb(128 128 0) | hsl(60 100% 25%) | 4,19 | 5,00 |
| seagreen | Grün | #2E8B57 | rgb(46 139 87) | hsl(146 50% 36%) | 4,24 | 4,94 |
| forestgreen | Grün | #228B22 | rgb(34 139 34) | hsl(120 61% 34%) | 4,38 | 4,78 |
| green | Grün | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 5,13 | 4,08 |
| darkolivegreen | Grün | #556B2F | rgb(85 107 47) | hsl(82 39% 30%) | 5,94 | 3,53 |
| darkgreen | Grün | #006400 | rgb(0 100 0) | hsl(120 100% 20%) | 7,43 | 2,82 |
| lightcyan | Türkis | #E0FFFF | rgb(224 255 255) | hsl(180 100% 94%) | 1,05 | 19,91 |
| aquamarine | Türkis | #7FFFD4 | rgb(127 255 212) | hsl(160 100% 75%) | 1,22 | 17,15 |
| aqua | Türkis | #00FFFF | rgb(0 255 255) | hsl(180 100% 50%) | 1,25 | 16,74 |
| cyan | Türkis | #00FFFF | rgb(0 255 255) | hsl(180 100% 50%) | 1,25 | 16,74 |
| paleturquoise | Türkis | #AFEEEE | rgb(175 238 238) | hsl(180 65% 81%) | 1,28 | 16,28 |
| turquoise | Türkis | #40E0D0 | rgb(64 224 208) | hsl(174 72% 56%) | 1,64 | 12,79 |
| mediumturquoise | Türkis | #48D1CC | rgb(72 209 204) | hsl(178 60% 55%) | 1,86 | 11,26 |
| darkturquoise | Türkis | #00CED1 | rgb(0 206 209) | hsl(181 100% 41%) | 1,95 | 10,74 |
| lightseagreen | Türkis | #20B2AA | rgb(32 178 170) | hsl(177 70% 41%) | 2,62 | 8,01 |
| cadetblue | Türkis | #5F9EA0 | rgb(95 158 160) | hsl(182 25% 50%) | 3,05 | 6,88 |
| darkcyan | Türkis | #008B8B | rgb(0 139 139) | hsl(180 100% 27%) | 4,14 | 5,06 |
| teal | Türkis | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 4,77 | 4,39 |
| powderblue | Blau | #B0E0E6 | rgb(176 224 230) | hsl(187 52% 80%) | 1,43 | 14,65 |
| lightblue | Blau | #ADD8E6 | rgb(173 216 230) | hsl(195 53% 79%) | 1,52 | 13,74 |
| lightskyblue | Blau | #87CEFA | rgb(135 206 250) | hsl(203 92% 75%) | 1,71 | 12,23 |
| skyblue | Blau | #87CEEB | rgb(135 206 235) | hsl(197 71% 73%) | 1,74 | 12,05 |
| lightsteelblue | Blau | #B0C4DE | rgb(176 196 222) | hsl(214 41% 78%) | 1,78 | 11,79 |
| deepskyblue | Blau | #00BFFF | rgb(0 191 255) | hsl(195 100% 50%) | 2,12 | 9,89 |
| cornflowerblue | Blau | #6495ED | rgb(100 149 237) | hsl(219 79% 66%) | 2,97 | 7,06 |
| dodgerblue | Blau | #1E90FF | rgb(30 144 255) | hsl(210 100% 56%) | 3,23 | 6,48 |
| steelblue | Blau | #4682B4 | rgb(70 130 180) | hsl(207 44% 49%) | 4,10 | 5,11 |
| royalblue | Blau | #4169E1 | rgb(65 105 225) | hsl(225 73% 57%) | 4,84 | 4,33 |
| blue | Blau | #0000FF | rgb(0 0 255) | hsl(240 100% 50%) | 8,59 | 2,44 |
| mediumblue | Blau | #0000CD | rgb(0 0 205) | hsl(240 100% 40%) | 11,16 | 1,88 |
| midnightblue | Blau | #191970 | rgb(25 25 112) | hsl(240 64% 27%) | 14,84 | 1,41 |
| darkblue | Blau | #00008B | rgb(0 0 139) | hsl(240 100% 27%) | 15,29 | 1,37 |
| navy | Blau | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 16,00 | 1,31 |
| lavender | Violett | #E6E6FA | rgb(230 230 250) | hsl(240 67% 94%) | 1,23 | 17,06 |
| thistle | Violett | #D8BFD8 | rgb(216 191 216) | hsl(300 24% 80%) | 1,69 | 12,36 |
| plum | Violett | #DDA0DD | rgb(221 160 221) | hsl(300 47% 75%) | 2,06 | 10,14 |
| violet | Violett | #EE82EE | rgb(238 130 238) | hsl(300 76% 72%) | 2,31 | 9,06 |
| orchid | Violett | #DA70D6 | rgb(218 112 214) | hsl(302 59% 65%) | 2,88 | 7,26 |
| fuchsia | Violett | #FF00FF | rgb(255 0 255) | hsl(300 100% 50%) | 3,13 | 6,69 |
| magenta | Violett | #FF00FF | rgb(255 0 255) | hsl(300 100% 50%) | 3,13 | 6,69 |
| mediumpurple | Violett | #9370DB | rgb(147 112 219) | hsl(260 60% 65%) | 3,76 | 5,58 |
| mediumorchid | Violett | #BA55D3 | rgb(186 85 211) | hsl(288 59% 58%) | 3,94 | 5,32 |
| mediumslateblue | Violett | #7B68EE | rgb(123 104 238) | hsl(249 80% 67%) | 4,15 | 5,05 |
| slateblue | Violett | #6A5ACD | rgb(106 90 205) | hsl(248 53% 58%) | 5,30 | 3,95 |
| darkorchid | Violett | #9932CC | rgb(153 50 204) | hsl(280 61% 50%) | 5,70 | 3,68 |
| blueviolet | Violett | #8A2BE2 | rgb(138 43 226) | hsl(271 76% 53%) | 5,95 | 3,52 |
| darkviolet | Violett | #9400D3 | rgb(148 0 211) | hsl(282 100% 41%) | 6,56 | 3,19 |
| rebeccapurple | Violett | #663399 | rgb(102 51 153) | hsl(270 50% 40%) | 8,40 | 2,49 |
| darkmagenta | Violett | #8B008B | rgb(139 0 139) | hsl(300 100% 27%) | 8,49 | 2,47 |
| darkslateblue | Violett | #483D8B | rgb(72 61 139) | hsl(248 39% 39%) | 9,06 | 2,31 |
| purple | Violett | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 9,41 | 2,22 |
| indigo | Violett | #4B0082 | rgb(75 0 130) | hsl(275 100% 25%) | 12,95 | 1,62 |
| white | Weiß | #FFFFFF | rgb(255 255 255) | hsl(0 0% 100%) | 1,00 | 21,00 |
| ivory | Weiß | #FFFFF0 | rgb(255 255 240) | hsl(60 100% 97%) | 1,00 | 20,81 |
| mintcream | Weiß | #F5FFFA | rgb(245 255 250) | hsl(150 100% 98%) | 1,02 | 20,56 |
| azure | Weiß | #F0FFFF | rgb(240 255 255) | hsl(180 100% 97%) | 1,02 | 20,45 |
| snow | Weiß | #FFFAFA | rgb(255 250 250) | hsl(0 100% 99%) | 1,03 | 20,30 |
| honeydew | Weiß | #F0FFF0 | rgb(240 255 240) | hsl(120 100% 97%) | 1,03 | 20,26 |
| floralwhite | Weiß | #FFFAF0 | rgb(255 250 240) | hsl(40 100% 97%) | 1,04 | 20,18 |
| ghostwhite | Weiß | #F8F8FF | rgb(248 248 255) | hsl(240 100% 99%) | 1,05 | 19,86 |
| aliceblue | Weiß | #F0F8FF | rgb(240 248 255) | hsl(208 100% 97%) | 1,07 | 19,57 |
| seashell | Weiß | #FFF5EE | rgb(255 245 238) | hsl(25 100% 97%) | 1,07 | 19,54 |
| oldlace | Weiß | #FDF5E6 | rgb(253 245 230) | hsl(39 85% 95%) | 1,08 | 19,38 |
| whitesmoke | Weiß | #F5F5F5 | rgb(245 245 245) | hsl(0 0% 96%) | 1,09 | 19,26 |
| lavenderblush | Weiß | #FFF0F5 | rgb(255 240 245) | hsl(340 100% 97%) | 1,10 | 19,03 |
| beige | Weiß | #F5F5DC | rgb(245 245 220) | hsl(60 56% 91%) | 1,10 | 18,97 |
| linen | Weiß | #FAF0E6 | rgb(250 240 230) | hsl(30 67% 94%) | 1,12 | 18,67 |
| antiquewhite | Weiß | #FAEBD7 | rgb(250 235 215) | hsl(34 78% 91%) | 1,17 | 17,92 |
| mistyrose | Weiß | #FFE4E1 | rgb(255 228 225) | hsl(6 100% 94%) | 1,20 | 17,43 |
| gainsboro | Grau/Schwarz | #DCDCDC | rgb(220 220 220) | hsl(0 0% 86%) | 1,37 | 15,31 |
| lightgray | Grau/Schwarz | #D3D3D3 | rgb(211 211 211) | hsl(0 0% 83%) | 1,49 | 14,02 |
| lightgrey | Grau/Schwarz | #D3D3D3 | rgb(211 211 211) | hsl(0 0% 83%) | 1,49 | 14,02 |
| silver | Grau/Schwarz | #C0C0C0 | rgb(192 192 192) | hsl(0 0% 75%) | 1,81 | 11,54 |
| darkgray | Grau/Schwarz | #A9A9A9 | rgb(169 169 169) | hsl(0 0% 66%) | 2,35 | 8,93 |
| darkgrey | Grau/Schwarz | #A9A9A9 | rgb(169 169 169) | hsl(0 0% 66%) | 2,35 | 8,93 |
| lightslategray | Grau/Schwarz | #778899 | rgb(119 136 153) | hsl(210 14% 53%) | 3,64 | 5,76 |
| lightslategrey | Grau/Schwarz | #778899 | rgb(119 136 153) | hsl(210 14% 53%) | 3,64 | 5,76 |
| gray | Grau/Schwarz | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 3,94 | 5,31 |
| grey | Grau/Schwarz | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 3,94 | 5,31 |
| slategray | Grau/Schwarz | #708090 | rgb(112 128 144) | hsl(210 13% 50%) | 4,05 | 5,17 |
| slategrey | Grau/Schwarz | #708090 | rgb(112 128 144) | hsl(210 13% 50%) | 4,05 | 5,17 |
| dimgray | Grau/Schwarz | #696969 | rgb(105 105 105) | hsl(0 0% 41%) | 5,48 | 3,82 |
| dimgrey | Grau/Schwarz | #696969 | rgb(105 105 105) | hsl(0 0% 41%) | 5,48 | 3,82 |
| darkslategray | Grau/Schwarz | #2F4F4F | rgb(47 79 79) | hsl(180 25% 25%) | 8,92 | 2,35 |
| darkslategrey | Grau/Schwarz | #2F4F4F | rgb(47 79 79) | hsl(180 25% 25%) | 8,92 | 2,35 |
| black | Grau/Schwarz | #000000 | rgb(0 0 0) | hsl(0 0% 0%) | 21,00 | 1,00 |
Fett = eine der 16 Grundfarben aus HTML. Kontrast nach WCAG 2.2, abgerundet: ab 4,5 reicht für Fließtext (AA), 3 bis 4,49 nur für großen Text. Die Familien sind eine eigene Einteilung; HSL ist auf ganze Zahlen gerundet – für exakte Farben Hex oder RGB nehmen.
Synonyme wie gray/grey zählen einzeln. Summe: 148 Namen.
Anzahl der Farbnamen je Familie, die mit schwarzer bzw. weißer Schrift WCAG AA für Fließtext erreichen. Insgesamt 116 Namen mit schwarzer und 32 mit weißer Schrift.
Zahlensysteme umrechnen
| Deckkraft (%) | Alpha (0–255) | Alpha-Hex | Beispiel Schwarz (Hex) | Beispiel Schwarz (rgb) |
|---|---|---|---|---|
| 100 | 255 | FF | #000000FF | rgb(0 0 0 / 100%) |
| 90 | 230 | E6 | #000000E6 | rgb(0 0 0 / 90%) |
| 80 | 204 | CC | #000000CC | rgb(0 0 0 / 80%) |
| 75 | 191 | BF | #000000BF | rgb(0 0 0 / 75%) |
| 70 | 179 | B3 | #000000B3 | rgb(0 0 0 / 70%) |
| 60 | 153 | 99 | #00000099 | rgb(0 0 0 / 60%) |
| 50 | 128 | 80 | #00000080 | rgb(0 0 0 / 50%) |
| 40 | 102 | 66 | #00000066 | rgb(0 0 0 / 40%) |
| 30 | 77 | 4D | #0000004D | rgb(0 0 0 / 30%) |
| 25 | 64 | 40 | #00000040 | rgb(0 0 0 / 25%) |
| 20 | 51 | 33 | #00000033 | rgb(0 0 0 / 20%) |
| 10 | 26 | 1A | #0000001A | rgb(0 0 0 / 10%) |
| 0 | 0 | 00 | #00000000 | rgb(0 0 0 / 0%) |
Alpha = Deckkraft × 255, auf ganze Zahlen gerundet und hexadezimal geschrieben. 0 % ist völlig durchsichtig, 100 % voll deckend.
| Anwendungsfall | Stufe | Mindestkontrast | Erfolgskriterium |
|---|---|---|---|
| Normaler Text | AA | 4,5 : 1 | 1.4.3 |
| Großer Text (ab 18 pt oder 14 pt fett) | AA | 3 : 1 | 1.4.3 |
| Normaler Text | AAA | 7 : 1 | 1.4.6 |
| Großer Text | AAA | 4,5 : 1 | 1.4.6 |
| Bedienelemente und Grafiken | AA | 3 : 1 | 1.4.11 |
Hex, RGB und HSL: drei Schreibweisen für dieselbe Farbe
Ein Hex-Code wie #FF6347 besteht aus drei Paaren hexadezimaler Ziffern für Rot, Grün und Blau. Jedes Paar reicht von 00 bis FF, also von 0 bis 255. Für tomato ergibt das:
FF = 255 · 63 = 99 · 47 = 71 → rgb(255 99 71)
Mit 256 Stufen je Kanal sind 256³ = 16.777.216 Farben möglich. Sind beide Ziffern jedes Paars gleich, gibt es eine Kurzform: #F00 steht für #FF0000, #ABC für #AABBCC.
HSL beschreibt dieselbe Farbe anders: als Farbton (Winkel auf dem Farbkreis, 0° Rot, 120° Grün, 240° Blau), Sättigung und Helligkeit. Das ist praktisch, wenn Du eine Farbe gezielt aufhellen willst – Du änderst nur den letzten Wert. Einzelne Hex-Paare rechnest Du mit dem Rechner unten oder der Zahlensysteme-Tabelle um.
So ist die Tabelle aufgebaut
Die Spezifikation listet die Namen alphabetisch. Hier sind sie nach Farbfamilien sortiert – eine eigene Einteilung nach Augenschein – und innerhalb jeder Familie nach ihrer berechneten Helligkeit. Hervorgehoben sind die 16 Grundfarben, die laut CSS-Spezifikation aus der VGA-Palette stammen und schon in HTML galten. Die übrigen gehen größtenteils auf das X11-Farbsystem zurück.
Einige Namen sind Synonyme mit identischem Wert: aqua und cyan, fuchsia und magenta sowie sieben Paare in den Schreibweisen gray und grey. Verschiedene Farben gibt es deshalb nur 139. Groß- und Kleinschreibung spielt keine Rolle: Tomato wirkt genauso wie tomato.
Transparenz: Alpha-Kanal in Hex und rgb()
Seit CSS Color Level 4 darf ein Hex-Code ein viertes Paar für die Deckkraft (Alpha) tragen: #RRGGBBAA. 00 ist völlig durchsichtig, FF voll deckend. Für 50 % rechnest Du 0,5 × 255 = 127,5, gerundet 128, hexadezimal 80 – halbtransparentes Schwarz ist also #00000080. Lesbarer ist die Schreibweise mit Schrägstrich:
rgb(0 0 0 / 50%) · hsl(9 100% 64% / 0.5)
Die ältere Schreibweise mit Kommas wie rgb(255, 99, 71) oder rgba(0, 0, 0, 0.5) bleibt gültig. Das Schlüsselwort transparent steht für völlig durchsichtiges Schwarz.
Kontrast nach WCAG: Ist die Schrift lesbar?
Die Web Content Accessibility Guidelines (WCAG 2.2) messen den Kontrast über die relative Luminanz L. Jeder Farbkanal wird dafür linearisiert und gewichtet, Grün zählt am stärksten:
L = 0,2126 · R + 0,7152 · G + 0,0722 · B
Kontrast = (L hell + 0,05) ÷ (L dunkel + 0,05)
Das Ergebnis liegt zwischen 1 : 1 (gleiche Farbe) und 21 : 1 (Schwarz auf Weiß). Für normalen Text verlangt Stufe AA mindestens 4,5 : 1. Ein Beispiel: gray (#808080) erreicht auf Weiß nur 3,94 : 1 und fällt damit für Fließtext durch, dimgray (#696969) schafft 5,48 : 1. Die Tabelle rundet ab, weil schon 4,49 die Grenze verfehlt.
Farbnamen oder Hex-Code?
Die Spezifikation selbst empfiehlt die Namen nicht – sie sind historisch gewachsen und in sich nicht stimmig. Das bekannteste Beispiel: darkgray (#A9A9A9) ist heller als gray (#808080). Auch papayawhip oder lightgoldenrodyellow verraten wenig über den Farbton.
Für eine Website mit eigenem Farbschema legst Du die Farben besser als Hex- oder HSL-Werte in CSS-Variablen fest, etwa --akzent: #1E90FF. Farbnamen sind praktisch für Prototypen, Tests und Beispielcode, weil sie sich leichter lesen und merken lassen.