<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

css

color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;

Wert

Benannte Farben bestehen aus Standardfarben, den Schlüsselwörtern transparent und currentColor.

Standardfarben

Grundfarben haben standardisierte, leicht zu merkende Namen:

Schlüsselwort	RGB-Hexwert	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`

Zusätzlich zu diesen 16 Farben haben etwa 150 weitere Farben ein ihnen zugeordnetes Schlüsselwort:

Schlüsselwort	RGB-Hexwert	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`

Anfänglich wurden in CSS Level 1 nur 16 Grundfarben definiert, orange wurde in CSS Level 2 hinzugefügt. Webdesigner fanden diese Liste zu kurz, und Browseranbieter fügten zahlreiche Farbnamen basierend auf den X11-Farbnamen hinzu. In SVG 1 und anschließend in CSS Colors Level 3 wurden diese Namen standardisiert, formell definiert und vereinheitlicht (einige hatten unterschiedliche Schreibweisen, die jetzt Aliase sind). Sie werden als erweiterte Farbschlüsselwörter, X11-Farben oder SVG-Farben bezeichnet.

In CSS Colors Level 4 wurde eine zusätzliche Farbe, rebeccapurple, hinzugefügt, um Web-Pionier Eric Meyer zu ehren.

transparent

Das Schlüsselwort transparent repräsentiert eine vollständig durchsichtige Farbe. Dies macht den 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 zu verhindern, wie zum Beispiel in einem <gradient>, besagt die aktuelle CSS-Spezifikation, dass transparent im vorausmultiplizierten Alphafarbraum berechnet werden sollte. Beachten Sie jedoch, dass ältere Browser es möglicherweise als Schwarz mit einem Alphawert von 0 behandeln.

Das Schlüsselwort transparent war in CSS Level 2 (Revision 1) keine echte Farbe. Es war ein spezielles Schlüsselwort, das anstelle eines regulären <color>-Wertes auf zwei CSS-Eigenschaften verwendet werden konnte: background und border. Es wurde im Wesentlichen hinzugefügt, um Entwicklern zu ermöglichen, eine geerbte Volltonfarbe zu überschreiben. Mit dem Aufkommen von Alphakanälen 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 mehr oder weniger ihre jeweiligen Farben beschreiben, sind sie im Wesentlichen künstlich, ohne eine strikte Begründung für die verwendeten Begriffe.

Die Farbschlüsselwörter repräsentieren alle einfache, einheitliche Farben ohne Transparenz.

Mehrere Schlüsselwörter sind Aliase füreinander:

aqua / cyan
fuchsia / magenta
darkgray / darkgrey
darkslategray / darkslategrey
dimgray / dimgrey
lightgray / lightgrey
lightslategray / lightslategrey
gray / grey
slategray / slategrey

Obwohl viele Schlüsselwörter von X11 übernommen wurden, können ihre RGB-Werte auf einigen X11-Systemen von den entsprechenden Farben abweichen, da Hersteller X11-Farben manchmal an ihre spezifische Hardware anpassen.

Beispiele

Verwendung von benannten Farben

HTML

html

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

CSS

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 wesentlicher Bestandteil ist.