<named-color>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Der <named-color>
CSS-Datentyp ist der Name einer Farbe, wie zum Beispiel red
, blue
, black
oder lightseagreen
. Syntaktisch ist ein <named-color>
ein <ident>
.
Ein <named-color>
-Wert kann überall dort verwendet werden, wo ein <color>
verwendet werden kann.
Syntax
color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;
Wert
Benannte Farben bestehen aus Standardfarben, den Stichwörtern transparent
und currentcolor
.
Standardfarben
Grundfarben haben standardisierte, leicht zu merkende Namen:
Stichwort | RGB-Hex-Wert | Beispiel |
---|---|---|
black |
#000000 |
|
silver |
#c0c0c0 |
|
gray |
#808080 |
|
white |
#ffffff |
|
maroon |
#800000 |
|
red |
#ff0000 |
|
purple |
#800080 |
|
fuchsia |
#ff00ff |
|
green |
#008000 |
|
lime |
#00ff00 |
|
olive |
#808000 |
|
yellow |
#ffff00 |
|
navy |
#000080 |
|
blue |
#0000ff |
|
teal |
#008080 |
|
aqua |
#00ffff |
Neben diesen 16 Farben haben etwa 150 andere Farben ein zugeordnetes Stichwort:
Stichwort | RGB-Hex-Wert | Beispiel |
---|---|---|
aliceblue |
#f0f8ff |
|
antiquewhite |
#faebd7 |
|
aqua |
#00ffff |
|
aquamarine |
#7fffd4 |
|
azure |
#f0ffff |
|
beige |
#f5f5dc |
|
bisque |
#ffe4c4 |
|
black |
#000000 |
|
blanchedalmond |
#ffebcd |
|
blue |
#0000ff |
|
blueviolet |
#8a2be2 |
|
brown |
#a52a2a |
|
burlywood |
#deb887 |
|
cadetblue |
#5f9ea0 |
|
chartreuse |
#7fff00 |
|
chocolate |
#d2691e |
|
coral |
#ff7f50 |
|
cornflowerblue |
#6495ed |
|
cornsilk |
#fff8dc |
|
crimson |
#dc143c |
|
cyan |
#00ffff (Synonym von aqua ) |
|
darkblue |
#00008b |
|
darkcyan |
#008b8b |
|
darkgoldenrod |
#b8860b |
|
darkgray |
#a9a9a9 |
|
darkgreen |
#006400 |
|
darkgrey |
#a9a9a9 |
|
darkkhaki |
#bdb76b |
|
darkmagenta |
#8b008b |
|
darkolivegreen |
#556b2f |
|
darkorange |
#ff8c00 |
|
darkorchid |
#9932cc |
|
darkred |
#8b0000 |
|
darksalmon |
#e9967a |
|
darkseagreen |
#8fbc8f |
|
darkslateblue |
#483d8b |
|
darkslategray |
#2f4f4f |
|
darkslategrey |
#2f4f4f |
|
darkturquoise |
#00ced1 |
|
darkviolet |
#9400d3 |
|
deeppink |
#ff1493 |
|
deepskyblue |
#00bfff |
|
dimgray |
#696969 |
|
dimgrey |
#696969 |
|
dodgerblue |
#1e90ff |
|
firebrick |
#b22222 |
|
floralwhite |
#fffaf0 |
|
forestgreen |
#228b22 |
|
fuchsia |
#ff00ff |
|
gainsboro |
#dcdcdc |
|
ghostwhite |
#f8f8ff |
|
gold |
#ffd700 |
|
goldenrod |
#daa520 |
|
gray |
#808080 |
|
green |
#008000 |
|
greenyellow |
#adff2f |
|
grey |
#808080 (Synonym von gray ) |
|
honeydew |
#f0fff0 |
|
hotpink |
#ff69b4 |
|
indianred |
#cd5c5c |
|
indigo |
#4b0082 |
|
ivory |
#fffff0 |
|
khaki |
#f0e68c |
|
lavender |
#e6e6fa |
|
lavenderblush |
#fff0f5 |
|
lawngreen |
#7cfc00 |
|
lemonchiffon |
#fffacd |
|
lightblue |
#add8e6 |
|
lightcoral |
#f08080 |
|
lightcyan |
#e0ffff |
|
lightgoldenrodyellow |
#fafad2 |
|
lightgray |
#d3d3d3 |
|
lightgreen |
#90ee90 |
|
lightgrey |
#d3d3d3 |
|
lightpink |
#ffb6c1 |
|
lightsalmon |
#ffa07a |
|
lightseagreen |
#20b2aa |
|
lightskyblue |
#87cefa |
|
lightslategray |
#778899 |
|
lightslategrey |
#778899 |
|
lightsteelblue |
#b0c4de |
|
lightyellow |
#ffffe0 |
|
lime |
#00ff00 |
|
limegreen |
#32cd32 |
|
linen |
#faf0e6 |
|
magenta |
#ff00ff (Synonym von fuchsia ) |
|
maroon |
#800000 |
|
mediumaquamarine |
#66cdaa |
|
mediumblue |
#0000cd |
|
mediumorchid |
#ba55d3 |
|
mediumpurple |
#9370db |
|
mediumseagreen |
#3cb371 |
|
mediumslateblue |
#7b68ee |
|
mediumspringgreen |
#00fa9a |
|
mediumturquoise |
#48d1cc |
|
mediumvioletred |
#c71585 |
|
midnightblue |
#191970 |
|
mintcream |
#f5fffa |
|
mistyrose |
#ffe4e1 |
|
moccasin |
#ffe4b5 |
|
navajowhite |
#ffdead |
|
navy |
#000080 |
|
oldlace |
#fdf5e6 |
|
olive |
#808000 |
|
olivedrab |
#6b8e23 |
|
orange |
#ffa500 |
|
orangered |
#ff4500 |
|
orchid |
#da70d6 |
|
palegoldenrod |
#eee8aa |
|
palegreen |
#98fb98 |
|
paleturquoise |
#afeeee |
|
palevioletred |
#db7093 |
|
papayawhip |
#ffefd5 |
|
peachpuff |
#ffdab9 |
|
peru |
#cd853f |
|
pink |
#ffc0cb |
|
plum |
#dda0dd |
|
powderblue |
#b0e0e6 |
|
purple |
#800080 |
|
rebeccapurple
|
#663399 |
|
red |
#ff0000 |
|
rosybrown |
#bc8f8f |
|
royalblue |
#4169e1 |
|
saddlebrown |
#8b4513 |
|
salmon |
#fa8072 |
|
sandybrown |
#f4a460 |
|
seagreen |
#2e8b57 |
|
seashell |
#fff5ee |
|
sienna |
#a0522d |
|
silver |
#c0c0c0 |
|
skyblue |
#87ceeb |
|
slateblue |
#6a5acd |
|
slategray |
#708090 |
|
slategrey |
#708090 |
|
snow |
#fffafa |
|
springgreen |
#00ff7f |
|
steelblue |
#4682b4 |
|
tan |
#d2b48c |
|
teal |
#008080 |
|
thistle |
#d8bfd8 |
|
tomato |
#ff6347 |
|
transparent |
Siehe transparent. | |
turquoise |
#40e0d0 |
|
violet |
#ee82ee |
|
wheat |
#f5deb3 |
|
white |
#ffffff |
|
whitesmoke |
#f5f5f5 |
|
yellow |
#ffff00 |
|
yellowgreen |
#9acd32 |
|
Anfangs wurden in CSS Level 1 nur 16 Basisfarben definiert, mit orange
, das in CSS Level 2 hinzugefügt wurde. Webdesigner fanden diese Liste zu kurz, und Browseranbieter fügten zahlreiche Farbnamen basierend auf den X11-Farbnamen hinzu. In SVG 1 und dann in CSS Colors Level 3 wurden diese Namen standardisiert, formal definiert und vereinheitlicht (einige hatten unterschiedliche Schreibweisen, die jetzt Aliase sind). Sie werden erweiterte Farbstichwörter, X11-Farben oder SVG-Farben genannt.
In CSS Colors Level 4 wurde eine weitere Farbe, rebeccapurple
, hinzugefügt, um den Web-Pionier Eric Meyer zu ehren.
transparent
Das transparent
-Stichwort repräsentiert eine vollständig transparente Farbe. Dadurch wird der Hintergrund hinter dem farbigen Element vollständig sichtbar. Technisch gesehen ist transparent
eine Abkürzung für rgb(0 0 0 / 0%)
.
Um unerwartetes Verhalten, wie zum Beispiel in einem <gradient>
, zu verhindern, besagt die aktuelle CSS-Spezifikation, dass transparent
im alpha-premultiplizierten Farbraum berechnet werden sollte. Beachten Sie jedoch, dass ältere Browser es möglicherweise als schwarz mit einem Alphawert von 0
behandeln.
Das transparent
-Stichwort war in CSS Level 2 (Revision 1) keine echte Farbe. Es war ein spezielles Stichwort, das anstelle eines regulären <color>
-Werts bei zwei CSS-Eigenschaften verwendet werden konnte: background
und border
. Es wurde im Wesentlichen hinzugefügt, um Entwicklern die Möglichkeit zu geben, eine vererbte Volltonfarbe zu überschreiben. Mit dem Aufkommen der Alphakanäle in CSS Colors Level 3 wurde transparent
als echte Farbe neu definiert. Es kann jetzt überall dort verwendet werden, wo ein <color>
-Wert verwendet werden kann.
Beschreibung
Alle Namen spezifizieren eine Farbe im sRGB-Farbraum. Obwohl die Namen ihre jeweiligen Farben mehr oder weniger beschreiben, sind sie im Wesentlichen künstlich, ohne eine strenge Begründung hinter den verwendeten Begriffen.
Die Farbstichwörter repräsentieren alle einfache, solide Farben ohne Transparenz.
Einige Stichwörter sind Synonyme füreinander:
aqua
/cyan
fuchsia
/magenta
darkgray
/darkgrey
darkslategray
/darkslategrey
dimgray
/dimgrey
lightgray
/lightgrey
lightslategray
/lightslategrey
gray
/grey
slategray
/slategrey
Obwohl viele Stichwörter aus X11 übernommen wurden, können sich ihre RGB-Werte von der entsprechenden Farbe auf X11-Systemen unterscheiden, da Hersteller manchmal X11-Farben an ihre spezifische Hardware anpassen.
Beispiele
Verwendung von benannten Farben
HTML
<div id="container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
CSS
#container {
display: flex;
justify-content: space-around;
background-color: darkslateblue;
padding: 20px;
}
#container > div {
height: 100px;
width: 100px;
margin: 3px;
border: 2px solid black;
}
#one {
background-color: red;
}
#two {
background-color: lavender;
}
#three {
background-color: transparent;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Color Module Level 4 # named-colors |
Browser-Kompatibilität
Siehe auch
<color>
: Der Datentyp, dessen Definition<named-color>
ein Bestandteil ist.