Im Webdesign werden die Farben häufig in der Hexadezimal-Schreibweise deklariert (z.B. #000000 steht für Schwarz und #ffffff für Weiß).
Weiter unten finden Sie Tabellen mit den Farbnamen und Ihren Codes in Hex und RGB:
Die Tatsache, dass von den etwa 19,7 Millionen möglichen RGB-Farbtönen nur 147 ausgesucht und mit einem festen Farbnamen versehen wurde, wirkt auf dem ersten Blick willkürlich.
Dahinter steckt aber eine Kombination aus Technik, Historie und Pragmatismus:
1. Der Ursprung in der Computertechnik
- Schon lange vor dem WWW brauchten Betriebssysteme und Grafikoberflächen vordefinierte Farbpaletten.
- In den 1980er-Jahren entwickelte sich im X Window System (X11, Unix/Linux) eine Sammlung von Farbnamen (z. B. AliceBlue, Cornsilk, LightSlateGray).
- Diese wurden in einer Textdatei
rgb.txtgespeichert, die jeder Unix-Rechner mitbrachte. - Als das Internet aufkam, war diese Palette schon etabliert und weit verbreitet.
2. Technische Einschränkungen
- In den 1990er-Jahren konnten viele Monitore und Grafikkarten nur 256 Farben gleichzeitig darstellen.
- Davon war ein Teil „reserviert“ für das Betriebssystem.
- Webbrowser-Hersteller einigten sich daher auf eine Palette an „websicheren Farben“, die zuverlässig und ohne Dithering angezeigt werden konnten.
3. Standardisierung im Web
a. Um Entwicklern die Arbeit zu erleichtern, übernahm das W3C bei HTML 3.2 (1997) und HTML4 (1999) eine Auswahl dieser Namen in den Standard.
- Man entschied sich bewusst für eine begrenzte Menge (140), weil:
- mehr Namen die Verwirrung erhöht hätten,
- weniger Namen aber nicht genug Nuancen geboten hätten,
- und man sich an der bereits bestehenden X11-Palette orientierte.
b. 2001 – 20011 mit der Standardisierung von CSS3 kamen 7 zusätzliche Farbwerte hinzu, sodass es heute 147 benannte Farben gibt.
4. Ziel: Einfachheit & Verständlichkeit
- Mit einem Namen wie
red,navyoderpeachpuffkonnten Webdesigner leichter arbeiten, ohne sich kryptische Werte (#FF0000oderrgb(0,0,128)) zu merken. - Das förderte die Lesbarkeit des Codes und erleichterte das Lernen von HTML.
- Auch in der fortgeschrittenen Arbeit ist es für mich einfacher, in einem Projekt mit benannten Farben in einer CSS-Datei zu starten. In der Endphase ist es ein Einfaches, diese Platzhalter-Farben in einem Texteditor über suchen und ersetzen auf einem Rutsch gegen die endgültige Hex-Nummer auszutauschen.
5. HTML4 Standardfarben (1997)
Die nachfolgenden drei Tabellen zeigen die 140 standardisierten HTML4-Farbnamen (1997).
Benannte Farben 1 bis 50
| Farbname | Hex-Code | RGB-Code | HSL-Code | Ansicht |
|---|---|---|---|---|
| AliceBlue | #F0F8FF | rgb(240,248,255) | hsl(208, 100%, 97%) | |
| AntiqueWhite | #FAEBD7 | rgb(250,235,215) | hsl(34, 78%, 91%) | |
| Aqua | #00FFFF | rgb(0,255,255) | hsl(180, 100%, 50%) | |
| Aquamarine | #7FFFD4 | rgb(127,255,212) | hsl(160, 100%, 75%) | |
| Azure | #F0FFFF | rgb(240,255,255) | hsl(180, 100%, 97%) | |
| Beige | #F5F5DC | rgb(245,245,220) | hsl(60, 56%, 91%) | |
| Bisque | #FFE4C4 | rgb(255,228,196) | hsl(33, 100%, 88%) | |
| Black | #000000 | rgb(0,0,0) | hsl(0, 0%, 0%) | |
| BlanchedAlmond | #FFEBCD | rgb(255,235,205) | hsl(36, 100%, 90%) | |
| Blue | #0000FF | rgb(0,0,255) | hsl(240, 100%, 50%) | |
| BlueViolet | #8A2BE2 | rgb(138,43,226) | hsl(271, 76%, 53%) | |
| Brown | #A52A2A | rgb(165,42,42) | hsl(0, 59%, 41%) | |
| BurlyWood | #DEB887 | rgb(222,184,135) | hsl(34, 57%, 70%) | |
| CadetBlue | #5F9EA0 | rgb(95,158,160) | hsl(182, 25%, 50%) | |
| Chartreuse | #7FFF00 | rgb(127,255,0) | hsl(90, 100%, 50%) | |
| Chocolate | #D2691E | rgb(210,105,30) | hsl(25, 75%, 47%) | |
| Coral | #FF7F50 | rgb(255,127,80) | hsl(16, 100%, 66%) | |
| CornflowerBlue | #6495ED | rgb(100,149,237) | hsl(219, 79%, 66%) | |
| Cornsilk | #FFF8DC | rgb(255,248,220) | hsl(48, 100%, 93%) | |
| Crimson | #DC143C | rgb(220,20,60) | hsl(348, 83%, 47%) | |
| Cyan | #00FFFF | rgb(0,255,255) | hsl(180, 100%, 50%) | |
| DarkBlue | #00008B | rgb(0,0,139) | hsl(240, 100%, 27%) | |
| DarkCyan | #008B8B | rgb(0,139,139) | hsl(180, 100%, 27%) | |
| DarkGoldenrod | #B8860B | rgb(184,134,11) | hsl(43, 89%, 38%) | |
| DarkGray | #A9A9A9 | rgb(169,169,169) | hsl(0, 0%, 66%) | |
| DarkGreen | #006400 | rgb(0,100,0) | hsl(120, 100%, 20%) | |
| DarkKhaki | #BDB76B | rgb(189,183,107) | hsl(56, 38%, 58%) | |
| DarkMagenta | #8B008B | rgb(139,0,139) | hsl(300, 100%, 27%) | |
| DarkOliveGreen | #556B2F | rgb(85,107,47) | hsl(82, 39%, 30%) | |
| DarkOrange | #FF8C00 | rgb(255,140,0) | hsl(33, 100%, 50%) | |
| DarkOrchid | #9932CC | rgb(153,50,204) | hsl(280, 61%, 50%) | |
| DarkRed | #8B0000 | rgb(139,0,0) | hsl(0, 100%, 27%) | |
| DarkSalmon | #E9967A | rgb(233,150,122) | hsl(15, 72%, 70%) | |
| DarkSeaGreen | #8FBC8F | rgb(143,188,143) | hsl(120, 25%, 65%) | |
| DarkSlateBlue | #483D8B | rgb(72,61,139) | hsl(248, 39%, 39%) | |
| DarkSlateGray | #2F4F4F | rgb(47,79,79) | hsl(180, 25%, 25%) | |
| DarkTurquoise | #00CED1 | rgb(0,206,209) | hsl(181, 100%, 41%) | |
| DarkViolet | #9400D3 | rgb(148,0,211) | hsl(282, 100%, 41%) | |
| DeepPink | #FF1493 | rgb(255,20,147) | hsl(328, 100%, 54%) | |
| DeepSkyBlue | #00BFFF | rgb(0,191,255) | hsl(195, 100%, 50%) | |
| DimGray | #696969 | rgb(105,105,105) | hsl(0, 0%, 41%) | |
| DodgerBlue | #1E90FF | rgb(30,144,255) | hsl(210, 100%, 56%) | |
| FireBrick | #B22222 | rgb(178,34,34) | hsl(0, 68%, 42%) | |
| FloralWhite | #FFFAF0 | rgb(255,250,240) | hsl(40, 100%, 97%) | |
| ForestGreen | #228B22 | rgb(34,139,34) | hsl(120, 61%, 34%) | |
| Fuchsia | #FF00FF | rgb(255,0,255) | hsl(300, 100%, 50%) |
benannte Farben 51 bis 100
| Farbname | Hex-Code | RGB-Code | HSL-Code | Ansicht |
|---|---|---|---|---|
| Gainsboro | #DCDCDC | rgb(220,220,220) | hsl(0, 0%, 86%) | |
| GhostWhite | #F8F8FF | rgb(248,248,255) | hsl(240, 100%, 99%) | |
| Gold | #FFD700 | rgb(255,215,0) | hsl(51, 100%, 50%) | |
| GoldenRod | #DAA520 | rgb(218,165,32) | hsl(43, 74%, 49%) | |
| Gray | #808080 | rgb(128,128,128) | hsl(0, 0%, 50%) | |
| Green | #008000 | rgb(0,128,0) | hsl(120, 100%, 25%) | |
| GreenYellow | #ADFF2F | rgb(173,255,47) | hsl(84, 100%, 59%) | |
| HoneyDew | #F0FFF0 | rgb(240,255,240) | hsl(120, 100%, 97%) | |
| HotPink | #FF69B4 | rgb(255,105,180) | hsl(330, 100%, 71%) | |
| IndianRed | #CD5C5C | rgb(205,92,92) | hsl(0, 53%, 58%) | |
| Indigo | #4B0082 | rgb(75,0,130) | hsl(275, 100%, 25%) | |
| Ivory | #FFFFF0 | rgb(255,255,240) | hsl(60, 100%, 97%) | |
| Khaki | #F0E68C | rgb(240,230,140) | hsl(54, 77%, 75%) | |
| Lavender | #E6E6FA | rgb(230,230,250) | hsl(240, 67%, 94%) | |
| LavenderBlush | #FFF0F5 | rgb(255,240,245) | hsl(340, 100%, 97%) | |
| LawnGreen | #7CFC00 | rgb(124,252,0) | hsl(90, 100%, 49%) | |
| LemonChiffon | #FFFACD | rgb(255,250,205) | hsl(54, 100%, 90%) | |
| LightBlue | #ADD8E6 | rgb(173,216,230) | hsl(195, 53%, 79%) | |
| LightCoral | #F08080 | rgb(240,128,128) | hsl(0, 79%, 72%) | |
| LightCyan | #E0FFFF | rgb(224,255,255) | hsl(180, 100%, 94%) | |
| LightGoldenRodYellow | #FAFAD2 | rgb(250,250,210) | hsl(60, 80%, 90%) | |
| LightGray | #D3D3D3 | rgb(211,211,211) | hsl(0, 0%, 83%) | |
| LightGreen | #90EE90 | rgb(144,238,144) | hsl(120, 73%, 75%) | |
| LightPink | #FFB6C1 | rgb(255,182,193) | hsl(351, 100%, 86%) | |
| LightSalmon | #FFA07A | rgb(255,160,122) | hsl(17, 100%, 74%) | |
| LightSeaGreen | #20B2AA | rgb(32,178,170) | hsl(177, 70%, 41%) | |
| LightSkyBlue | #87CEFA | rgb(135,206,250) | hsl(203, 92%, 75%) | |
| LightSlateGray | #778899 | rgb(119,136,153) | hsl(210, 14%, 53%) | |
| LightSteelBlue | #B0C4DE | rgb(176,196,222) | hsl(214, 41%, 78%) | |
| LightYellow | #FFFFE0 | rgb(255,255,224) | hsl(60, 100%, 94%) | |
| Lime | #00FF00 | rgb(0,255,0) | hsl(120, 100%, 50%) | |
| LimeGreen | #32CD32 | rgb(50,205,50) | hsl(120, 61%, 50%) | |
| Linen | #FAF0E6 | rgb(250,240,230) | hsl(30, 67%, 94%) | |
| Magenta | #FF00FF | rgb(255,0,255) | hsl(300, 100%, 50%) | |
| Maroon | #800000 | rgb(128,0,0) | hsl(0, 100%, 25%) | |
| MediumAquaMarine | #66CDAA | rgb(102,205,170) | hsl(160, 51%, 60%) | |
| MediumBlue | #0000CD | rgb(0,0,205) | hsl(240, 100%, 40%) | |
| MediumOrchid | #BA55D3 | rgb(186,85,211) | hsl(288, 59%, 58%) | |
| MediumPurple | #9370DB | rgb(147,112,219) | hsl(260, 60%, 65%) | |
| MediumSeaGreen | #3CB371 | rgb(60,179,113) | hsl(147, 50%, 47%) | |
| MediumSlateBlue | #7B68EE | rgb(123,104,238) | hsl(249, 80%, 67%) | |
| MediumSpringGreen | #00FA9A | rgb(0,250,154) | hsl(157, 100%, 49%) | |
| MediumTurquoise | #48D1CC | rgb(72,209,204) | hsl(178, 60%, 55%) | |
| MediumVioletRed | #C71585 | rgb(199,21,133) | hsl(322, 81%, 43%) | |
| MidnightBlue | #191970 | rgb(25,25,112) | hsl(240, 64%, 27%) | |
| MintCream | #F5FFFA | rgb(245,255,250) | hsl(150, 100%, 98%) | |
| MistyRose | #FFE4E1 | rgb(255,228,225) | hsl(6, 100%, 94%) | |
| Moccasin | #FFE4B5 | rgb(255,228,181) | hsl(38, 100%, 85%) |
Benannte Farben 101 bis 140
| Farbname | Hex-Code | RGB-Code | HSL-Code | Ansicht |
|---|---|---|---|---|
| NavajoWhite | #FFDEAD | rgb(255,222,173) | hsl(36, 100%, 84%) | |
| Navy | #000080 | rgb(0,0,128) | hsl(240, 100%, 25%) | |
| OldLace | #FDF5E6 | rgb(253,245,230) | hsl(39, 85%, 95%) | |
| Olive | #808000 | rgb(128,128,0) | hsl(60, 100%, 25%) | |
| OliveDrab | #6B8E23 | rgb(107,142,35) | hsl(80, 60%, 35%) | |
| Orange | #FFA500 | rgb(255,165,0) | hsl(39, 100%, 50%) | |
| OrangeRed | #FF4500 | rgb(255,69,0) | hsl(16, 100%, 50%) | |
| Orchid | #DA70D6 | rgb(218,112,214) | hsl(302, 59%, 65%) | |
| PaleGoldenRod | #EEE8AA | rgb(238,232,170) | hsl(55, 67%, 80%) | |
| PaleGreen | #98FB98 | rgb(152,251,152) | hsl(120, 93%, 79%) | |
| PaleTurquoise | #AFEEEE | rgb(175,238,238) | hsl(180, 65%, 81%) | |
| PaleVioletRed | #DB7093 | rgb(219,112,147) | hsl(340, 60%, 65%) | |
| PapayaWhip | #FFEFD5 | rgb(255,239,213) | hsl(37, 100%, 92%) | |
| PeachPuff | #FFDAB9 | rgb(255,218,185) | hsl(28, 100%, 86%) | |
| Peru | #CD853F | rgb(205,133,63) | hsl(30, 59%, 53%) | |
| Pink | #FFC0CB | rgb(255,192,203) | hsl(350, 100%, 88%) | |
| Plum | #DDA0DD | rgb(221,160,221) | hsl(300, 47%, 75%) | |
| PowderBlue | #B0E0E6 | rgb(176,224,230) | hsl(187, 52%, 80%) | |
| Purple | #800080 | rgb(128,0,128) | hsl(300, 100%, 25%) | |
| Red | #FF0000 | rgb(255,0,0) | hsl(0, 100%, 50%) | |
| RosyBrown | #BC8F8F | rgb(188,143,143) | hsl(0, 25%, 65%) | |
| RoyalBlue | #4169E1 | rgb(65,105,225) | hsl(225, 73%, 57%) | |
| SaddleBrown | #8B4513 | rgb(139,69,19) | hsl(25, 76%, 31%) | |
| Salmon | #FA8072 | rgb(250,128,114) | hsl(6, 93%, 71%) | |
| SandyBrown | #F4A460 | rgb(244,164,96) | hsl(28, 87%, 67%) | |
| SeaGreen | #2E8B57 | rgb(46,139,87) | hsl(146, 50%, 36%) | |
| SeaShell | #FFF5EE | rgb(255,245,238) | hsl(25, 100%, 97%) | |
| Sienna | #A0522D | rgb(160,82,45) | hsl(19, 56%, 40%) | |
| Silver | #C0C0C0 | rgb(192,192,192) | hsl(0, 0%, 75%) | |
| SkyBlue | #87CEEB | rgb(135,206,235) | hsl(197, 71%, 73%) | |
| SlateBlue | #6A5ACD | rgb(106,90,205) | hsl(248, 53%, 58%) | |
| SlateGray | #708090 | rgb(112,128,144) | hsl(210, 13%, 50%) | |
| Snow | #FFFAFA | rgb(255,250,250) | hsl(0, 100%, 99%) | |
| SpringGreen | #00FF7F | rgb(0,255,127) | hsl(150, 100%, 50%) | |
| SteelBlue | #4682B4 | rgb(70,130,180) | hsl(207, 44%, 49%) | |
| Tan | #D2B48C | rgb(210,180,140) | hsl(34, 44%, 69%) | |
| Teal | #008080 | rgb(0,128,128) | hsl(180, 100%, 25%) | |
| Thistle | #D8BFD8 | rgb(216,191,216) | hsl(300, 24%, 80%) | |
| Tomato | #FF6347 | rgb(255,99,71) | hsl(9, 100%, 64%) | |
| Turquoise | #40E0D0 | rgb(64,224,208) | hsl(174, 72%, 57%) | |
| Violet | #EE82EE | rgb(238,130,238) | hsl(300, 76%, 72%) | |
| Wheat | #F5DEB3 | rgb(245,222,179) | hsl(39, 77%, 83%) | |
| White | #FFFFFF | rgb(255,255,255) | hsl(0, 0%, 100%) | |
| WhiteSmoke | #F5F5F5 | rgb(245,245,245) | hsl(0, 0%, 96%) | |
| Yellow | #FFFF00 | rgb(255,255,0) | hsl(60, 100%, 50%) | |
| YellowGreen | #9ACD32 | rgb(154,205,50) | hsl(80, 61%, 50%) |
6. CSS3 Erweiterungen (2001–2011)
Die folgenden 7 benannte Farben wurden später mit CSS3 eingeführt und erweitern die ursprünglichen HTML4-Farben.
| Farbname | Hex-Code | RGB-Code | HSL-Code | Ansicht |
|---|---|---|---|---|
| RebeccaPurple | #663399 | rgb(102,51,153) | hsl(270, 50%, 40%) | |
| MediumSlateBlue | #7B68EE | rgb(123,104,238) | hsl(249, 80%, 67%) | |
| MediumSpringGreen | #00FA9A | rgb(0,250,154) | hsl(157, 100%, 49%) | |
| MediumTurquoise | #48D1CC | rgb(72,209,204) | hsl(178, 60%, 55%) | |
| MediumVioletRed | #C71585 | rgb(199,21,133) | hsl(322, 81%, 43%) | |
| DarkOrange | #FF8C00 | rgb(255,140,0) | hsl(33, 100%, 50%) | |
| DarkOrchid | #9932CC | rgb(153,50,204) | hsl(280, 61%, 50%) |
