`<named-color>` CSS-Typ

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Der <named-color> CSS Datentyp ist der Name einer Farbe, wie red, blue, black oder lightseagreen. Syntaktisch gesehen ist ein <named-color> ein <ident>.

Ein <named-color>-Wert kann überall 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 und den Stichworten transparent und currentColor.

Standardfarben

Grundfarben haben standardisierte, einprägsame 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`

Zusätzlich zu diesen 16 Farben sind etwa 150 weitere Farben mit einem Stichwort verbunden:

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`

Ursprünglich wurden in CSS Level 1 nur 16 Grundfarben definiert, wobei orange in CSS Level 2 hinzugefügt wurde. Webdesigner fanden diese Liste zu kurz, und Browser-Anbieter fügten zahlreiche Farbnamen hinzu, die auf den X11-Farbnamen basieren. In SVG 1 und später 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 zusätzliche Farbe, rebeccapurple, hinzugefügt, um den Web-Pionier Eric Meyer zu ehren.

transparent

Das Stichwort transparent steht für 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 zu verhindern, wie z. B. in einem <gradient>, gibt die aktuelle CSS-Spezifikation an, dass transparent im alphakompromittierten Farbraum berechnet werden soll. Beachten Sie jedoch, dass ältere Browser es möglicherweise als Schwarz mit einem Alpha-Wert von 0 behandeln.

Das Stichwort transparent war in CSS Level 2 (Revision 1) keine echte Farbe. Es war ein spezielles Stichwort, das anstelle eines regulären <color>-Werts in zwei CSS-Eigenschaften verwendet werden konnte: background und border. Es wurde im Wesentlichen hinzugefügt, um Entwicklern zu ermöglichen, eine vererbte Volltonfarbe zu überschreiben. Mit der Einführung von Alphakanälen in CSS Colors Level 3 wurde transparent als echte Farbe neu definiert. Es kann jetzt überall 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 strikten Grund für die verwendeten Begriffe.

Die Farbstichwörter repräsentieren alle einfache, einfarbige Farben ohne Transparenz.

Mehrere Stichwö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 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 benannter 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

Spezifikation
CSS Color Module Level 4 # named-colors

Browser-Kompatibilität

Siehe auch

<color>: der Datentyp, dessen Definition <named-color> einen Bestandteil bildet.

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<named-color> CSS-Typ

Standardfarben

HTML

CSS

Ergebnis

Help improve MDN

`<named-color>` CSS-Typ