CSS Farbnamen: Vollständige Referenzliste
Farben sind die Seele des Webdesigns. Während die meisten Entwickler HEX-Codes oder RGB-Werte für Präzision verwenden, bieten CSS-Farbnamen eine für Menschen lesbare Möglichkeit, Stile schnell anzuwenden. Moderne Browser unterstützen über 140 benannte Farben, von gängigen wie Red (Rot) und Blue (Blau) bis hin zu exotischeren Namen wie AliceBlue oder PapayaWhip.
Dieser Leitfaden bietet eine vollständige, durchsuchbare Referenz für jeden benannten CSS-Farbton, kategorisiert nach Farbtönen, um Ihnen zu helfen, den perfekten Farbton für Ihr Projekt zu finden.
1. Kurzreferenz: Die 16 Basisfarben
Dies sind die ursprünglichen Farben, die in der HTML 4.01-Spezifikation definiert wurden und von allen Browsern und Geräten unterstützt werden.
| Farbname | HEX | RGB | Beispiel |
|---|---|---|---|
| White (Weiß) | #FFFFFF |
(255, 255, 255) |
|
| Silver (Silber) | #C0C0C0 |
(192, 192, 192) |
|
| Gray (Grau) | #808080 |
(128, 128, 128) |
|
| Black (Schwarz) | #000000 |
(0, 0, 0) |
|
| Red (Rot) | #FF0000 |
(255, 0, 0) |
|
| Maroon (Kastanienbraun) | #800000 |
(128, 0, 0) |
|
| Yellow (Gelb) | #FFFF00 |
(255, 255, 0) |
|
| Olive (Olivgrün) | #808000 |
(128, 128, 0) |
|
| Lime (Hellgrün) | #00FF00 |
(0, 255, 0) |
|
| Green (Grün) | #008000 |
(0, 128, 0) |
|
| Aqua (Wasserblau) | #00FFFF |
(0, 255, 255) |
|
| Teal (Dunkelcyan) | #008080 |
(0, 128, 128) |
|
| Blue (Blau) | #0000FF |
(0, 0, 255) |
|
| Navy (Marineblau) | #000080 |
(0, 0, 128) |
|
| Fuchsia (Fuchsie) | #FF00FF |
(255, 0, 255) |
|
| Purple (Lila) | #800080 |
(128, 0, 128) |
2. Vollständige Liste von über 140 CSS-Farben
Unten finden Sie den vollständigen Satz erweiterter Farben, die von modernen Browsern unterstützt werden (SVG 1.0/CSS3).
Rosatöne (Pink Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| Pink | #FFC0CB |
(255, 192, 203) |
Rosa |
| LightPink | #FFB6C1 |
(255, 182, 193) |
Rosa |
| HotPink | #FF69B4 |
(255, 105, 180) |
Rosa |
| DeepPink | #FF1493 |
(255, 20, 147) |
Rosa |
| PaleVioletRed | #DB7093 |
(219, 112, 147) |
Rosa |
| MediumVioletRed | #C71585 |
(199, 21, 133) |
Rosa |
Rottöne (Red Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| LightSalmon | #FFA07A |
(255, 160, 122) |
Rot |
| Salmon | #FA8072 |
(250, 128, 114) |
Rot |
| DarkSalmon | #E9967A |
(233, 150, 122) |
Rot |
| LightCoral | #F08080 |
(240, 128, 128) |
Rot |
| IndianRed | #CD5C5C |
(205, 92, 92) |
Rot |
| Crimson | #DC143C |
(220, 20, 60) |
Rot |
| FireBrick | #B22222 |
(178, 34, 34) |
Rot |
| DarkRed | #8B0000 |
(139, 0, 0) |
Rot |
| Red | #FF0000 |
(255, 0, 0) |
Rot |
Orangetöne (Orange Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| Orange | #FFA500 |
(255, 165, 0) |
Orange |
| DarkOrange | #FF8C00 |
(255, 140, 0) |
Orange |
| Coral | #FF7F50 |
(255, 127, 80) |
Orange |
| Tomato | #FF6347 |
(255, 99, 71) |
Orange |
| OrangeRed | #FF4500 |
(255, 69, 0) |
Orange |
Gelbtöne (Yellow Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| Yellow | #FFFF00 |
(255, 255, 0) |
Gelb |
| LightYellow | #FFFFE0 |
(255, 255, 224) |
Gelb |
| LemonChiffon | #FFFACD |
(255, 250, 205) |
Gelb |
| LightGoldenRodYellow | #FAFAD2 |
(250, 250, 210) |
Gelb |
| PapayaWhip | #FFEFD5 |
(255, 239, 213) |
Gelb |
| Moccasin | #FFE4B5 |
(255, 228, 181) |
Gelb |
| PeachPuff | #FFDAB9 |
(255, 218, 185) |
Gelb |
| PaleGoldenRod | #EEE8AA |
(238, 232, 170) |
Gelb |
| Khaki | #F0E68C |
(240, 230, 140) |
Gelb |
| DarkKhaki | #BDB76B |
(189, 183, 107) |
Gelb |
| Gold | #FFD700 |
(255, 215, 0) |
Gelb |
Brauntöne (Brown Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| Cornsilk | #FFF8DC |
(255, 248, 220) |
Braun |
| BlanchedAlmond | #FFEBCD |
(255, 235, 205) |
Braun |
| Bisque | #FFE4C4 |
(255, 228, 196) |
Braun |
| NavajoWhite | #FFDEAD |
(255, 222, 173) |
Braun |
| Wheat | #F5DEB3 |
(245, 222, 179) |
Braun |
| BurlyWood | #DEB887 |
(222, 184, 135) |
Braun |
| Tan | #D2B48C |
(210, 180, 140) |
Braun |
| RosyBrown | #BC8F8F |
(188, 143, 143) |
Braun |
| SandyBrown | #F4A460 |
(244, 164, 96) |
Braun |
| GoldenRod | #DAA520 |
(218, 165, 32) |
Braun |
| Peru | #CD853F |
(205, 133, 63) |
Braun |
| Chocolate | #D2691E |
(210, 105, 30) |
Braun |
| SaddleBrown | #8B4513 |
(139, 69, 19) |
Braun |
| Sienna | #A0522D |
(160, 82, 45) |
Braun |
| Brown | #A52A2A |
(165, 42, 42) |
Braun |
| Maroon | #800000 |
(128, 0, 0) |
Braun |
Grüntöne (Green Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| DarkOliveGreen | #556B2F |
(85, 107, 47) |
Grün |
| Olive | #808000 |
(128, 128, 0) |
Grün |
| OliveDrab | #6B8E23 |
(107, 142, 35) |
Grün |
| YellowGreen | #9ACD32 |
(154, 205, 50) |
Grün |
| LimeGreen | #32CD32 |
(50, 205, 50) |
Grün |
| Lime | #00FF00 |
(0, 255, 0) |
Grün |
| LawnGreen | #7CFC00 |
(124, 252, 0) |
Grün |
| Chartreuse | `#7FFF00" | (127, 255, 0) |
Grün |
| GreenYellow | #ADFF2F |
(173, 255, 47) |
Grün |
| SpringGreen | #00FF7F |
(0, 255, 127) |
Grün |
| MediumSpringGreen | #00FA9A |
(0, 250, 154) |
Grün |
| LightGreen | #90EE90 |
(144, 238, 144) |
Grün |
| PaleGreen | #98FB98 |
(152, 251, 152) |
Grün |
| DarkSeaGreen | #8FBC8F |
(143, 188, 143) |
Grün |
| MediumSeaGreen | #3CB371 |
(60, 179, 113) |
Grün |
| SeaGreen | #2E8B57 |
(46, 139, 87) |
Grün |
| ForestGreen | #228B22 |
(34, 139, 34) |
Grün |
| Green | #008000 |
(0, 128, 0) |
Grün |
| DarkGreen | #006400 |
(0, 100, 0) |
Grün |
Cyan- und Türkistöne (Cyan and Teal Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| Aqua | #00FFFF |
(0, 255, 255) |
Cyan |
| Cyan | #00FFFF |
(0, 255, 255) |
Cyan |
| LightCyan | #E0FFFF |
(224, 255, 255) |
Cyan |
| PaleTurquoise | #AFEEEE |
(175, 238, 238) |
Cyan |
| Aquamarine | #7FFFD4 |
(127, 255, 212) |
Cyan |
| Turquoise | #40E0D0 |
(64, 224, 208) |
Cyan |
| MediumTurquoise | #48D1CC |
(72, 209, 204) |
Cyan |
| DarkTurquoise | #00CED1 |
(0, 206, 209) |
Cyan |
| LightSeaGreen | #20B2AA |
(32, 178, 170) |
Cyan |
| CadetBlue | #5F9EA0 |
(95, 158, 160) |
Cyan |
| DarkCyan | #008B8B |
(0, 139, 139) |
Cyan |
| Teal | #008080 |
(0, 128, 128) |
Cyan |
Blautöne (Blue Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| LightSteelBlue | #B0C4DE |
(176, 196, 222) |
Blau |
| PowderBlue | #B0E0E6 |
(176, 224, 230) |
Blau |
| LightBlue | #ADD8E6 |
(173, 216, 230) |
Blau |
| SkyBlue | #87CEEB |
(135, 206, 235) |
Blau |
| LightSkyBlue | #87CEFA |
(135, 206, 250) |
Blau |
| DeepSkyBlue | #00BFFF |
(0, 191, 255) |
Blau |
| DodgerBlue | #1E90FF |
(30, 144, 255) |
Blau |
| CornflowerBlue | #6495ED |
(100, 149, 237) |
Blau |
| MediumSlateBlue | #7B68EE |
(123, 104, 238) |
Blau |
| RoyalBlue | #4169E1 |
(65, 105, 225) |
Blau |
| Blue | #0000FF |
(0, 0, 255) |
Blau |
| MediumBlue | #0000CD |
(0, 0, 205) |
Blau |
| DarkBlue | #00008B |
(0, 0, 139) |
Blau |
| Navy | #000080 |
(0, 0, 128) |
Blau |
| MidnightBlue | #191970 |
(25, 25, 112) |
Blau |
Lila- und Violetttöne (Purple and Violet Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| Lavender | #E6E6FA |
(230, 230, 250) |
Lila |
| Thistle | #D8BFD8 |
(216, 191, 216) |
Lila |
| Plum | #DDA0DD |
(221, 160, 221) |
Lila |
| Violet | #EE82EE |
(238, 130, 238) |
Lila |
| Orchid | #DA70D6 |
(218, 112, 214) |
Lila |
| Fuchsia | #FF00FF |
(255, 0, 255) |
Lila |
| Magenta | #FF00FF |
(255, 0, 255) |
Lila |
| MediumOrchid | #BA55D3 |
(186, 85, 211) |
Lila |
| MediumPurple | #9370DB |
(147, 112, 219) |
Lila |
| BlueViolet | #8A2BE2 |
(138, 43, 226) |
Lila |
| DarkViolet | #9400D3 |
(148, 0, 211) |
Lila |
| DarkOrchid | #9932CC |
(153, 50, 204) |
Lila |
| DarkMagenta | #8B008B |
(139, 0, 139) |
Lila |
| Purple | #800080 |
(128, 0, 128) |
Lila |
| Indigo | #4B0082 |
(75, 0, 130) |
Lila |
| DarkSlateBlue | #483D8B |
(72, 61, 139) |
Lila |
| SlateBlue | #6A5ACD |
(106, 90, 205) |
Lila |
| RebeccaPurple | #663399 |
(102, 51, 153) |
Lila |
Weiß- und Off-White-Töne (White and Off-White Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| White | #FFFFFF |
(255, 255, 255) |
Weiß |
| Snow | #FFFAFA |
(255, 250, 250) |
Weiß |
| HoneyDew | #F0FFF0 |
(240, 255, 240) |
Weiß |
| MintCream | #F5FFFA |
(245, 255, 250) |
Weiß |
| Azure | #F0FFFF |
(240, 255, 255) |
Weiß |
| AliceBlue | #F0F8FF |
(240, 248, 255) |
Weiß |
| GhostWhite | #F8F8FF |
(248, 248, 255) |
Weiß |
| WhiteSmoke | #F5F5F5 |
(245, 245, 245) |
Weiß |
| SeaShell | #FFF5EE |
(255, 245, 238) |
Weiß |
| Beige | #F5F5DC |
(245, 245, 220) |
Weiß |
| OldLace | #FDF5E6 |
(253, 245, 230) |
Weiß |
| FloralWhite | `#FFFAF0" | (255, 250, 240) |
Weiß |
| Ivory | #FFFFF0 |
(255, 255, 240) |
Weiß |
| AntiqueWhite | #FAEBD7 |
(250, 235, 215) |
Weiß |
| Linen | #FAF0E6 |
(250, 240, 230) |
Weiß |
| MistyRose | #FFE4E1 |
(255, 228, 225) |
Weiß |
| LavenderBlush | #FFF0F5 |
(255, 240, 245) |
Weiß |
Grau- und Schwarztöne (Gray and Black Colors)
| Name | HEX | RGB | Kategorie |
|---|---|---|---|
| Gainsboro | #DCDCDC |
(220, 220, 220) |
Grau |
| LightGray | #D3D3D3 |
(211, 211, 211) |
Grau |
| LightGrey | #D3D3D3 |
(211, 211, 211) |
Grau |
| Silver | #C0C0C0 |
(192, 192, 192) |
Grau |
| DarkGray | #A9A9A9 |
(169, 169, 169) |
Grau |
| DarkGrey | #A9A9A9 |
(169, 169, 169) |
Grau |
| Gray | #808080 |
(128, 128, 128) |
Grau |
| Grey | `#808080" | (128, 128, 128) |
Grau |
| DimGray | #696969 |
(105, 105, 105) |
Grau |
| DimGrey | `#696969" | (105, 105, 105) |
Grau |
| LightSlateGray | #778899 |
(119, 136, 153) |
Grau |
| LightSlateGrey | `#778899" | (119, 136, 153) |
Grau |
| SlateGray | #708090 |
(112, 128, 144) |
Grau |
| SlateGrey | `#708090" | (112, 128, 144) |
Grau |
| DarkSlateGray | #2F4F4F |
(47, 79, 79) |
Grau |
| DarkSlateGrey | `#2F4F4F" | (47, 79, 79) |
Grau |
| Black | #000000 |
(0, 0, 0) |
Grau |
3. Verwendung von CSS-Farbnamen
Die Verwendung dieser Namen in Ihrem Code ist einfach. Sie können auf jede Eigenschaft angewendet werden, die einen <color>-Wert akzeptiert.
Standard-CSS-Eigenschaften
/* Verwendung des Namens für die Textfarbe */
h1 {
color: Crimson;
}
/* Verwendung des Namens für den Hintergrund */
.alert {
background-color: PapayaWhip;
border: 1px solid OrangeRed;
}
SVG-Eigenschaften
CSS-Farbnamen funktionieren auch perfekt mit SVG-Attributen:
<circle cx="50" cy="50" r="40" fill="RoyalBlue" stroke="MidnightBlue" stroke-width="2" />
Das Schlüsselwort 'currentColor'
currentColor ist ein spezieller Wert, der den Wert der Eigenschaft color des Elements erbt.
div {
color: SeaGreen;
border: 2px solid currentColor; /* Der Rahmen wird ebenfalls SeaGreen sein */
}
4. Häufig gestellte Fragen (FAQ)
F: Sind CSS-Farbnamen case-sensitive?
A: Nein. Sie können AliceBlue, aliceblue oder sogar ALICEBLUE schreiben. Sie werden alle als dieselbe Farbe behandelt. CamelCase (wie AliceBlue) wird jedoch von vielen Entwicklern aus Gründen der Lesbarkeit bevorzugt.
F: Welche Farbnamen sind „Web-Safe“?
A: „Web-Safe“-Farben sind ein Relikt aus der Vergangenheit, als Monitore nur 256 Farben unterstützten. Heute können alle über 140 benannten CSS-Farben auf jedem modernen Gerät sicher verwendet werden.
F: Warum einen Farbnamen anstelle eines HEX-Codes verwenden?
A: Farbnamen sind viel einfacher zu merken und machen Ihren Code lesbarer. background-color: White ist sofort verständlich, während #FFFFFF eine kleine mentale Übersetzung erfordert. Für präzise Markenfarben sind HEX, RGB oder HSL jedoch weiterhin die beste Wahl.
F: Gibt es doppelte Namen?
A: Ja. Aqua und Cyan sind genau gleich (#00FFFF), und Fuchsia und Magenta sind gleich (#FF00FF). Außerdem haben viele Grautöne sowohl die Schreibweise „Gray“ als auch „Grey“ (z. B. DarkGray und DarkGrey).
F: Wie gehe ich mit Kontrastproblemen um?
A: Stellen Sie bei der Verwendung benannter Farben immer sicher, dass genügend Kontrast zwischen Text und Hintergrund besteht. Zum Beispiel ist gelber (Yellow) Text auf weißem (White) Hintergrund fast unmöglich zu lesen und entspricht nicht den Barrierefreiheitsstandards (WCAG).
Verwandte Tools auf Tool3M
- Farbkonverter: Wandeln Sie diese benannten Farben sofort in HEX-, RGB-, HSL- oder CMYK-Formate um.
- Bild zu Base64: Konvertieren Sie Bilder in Base64-Strings für die Verwendung in CSS/HTML.