<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 Juli 2015.

Der<named-color>CSS Datentyp ist der Name einer Farbe, wiered,blue,black oderlightseagreen. Syntaktisch 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, den Schlüsselwörterntransparent undcurrentColor.

Standardfarben

Grundfarben haben standardisierte, einprägsame 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 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 für`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 für`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 für`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`	Siehetransparent.
`turquoise`	`#40e0d0`
`violet`	`#ee82ee`
`wheat`	`#f5deb3`
`white`	`#ffffff`
`whitesmoke`	`#f5f5f5`
`yellow`	`#ffff00`
`yellowgreen`	`#9acd32`

Zu Beginn, inCSS Level 1, waren nur 16 Grundfarben definiert, mitorange hinzugefügt inCSS Level 2. Webdesigner fanden diese Liste zu kurz, und Browseranbieter fügten zahlreiche Namen für Farben basierend auf den X11-Farbnamen hinzu. InSVG 1, dann inCSS Colors Level 3, wurden diese Namen standardisiert, formal definiert und vereinheitlicht (einige hatten unterschiedliche Schreibweisen, die jetzt Aliasse sind). Sie werdenerweiterte Farb-Schlüsselwörter,X11-Farben oderSVG-Farben genannt.

InCSS Colors Level 4 wurde eine weitere Farbe,rebeccapurple, hinzugefügt, um denWebpionier Eric Meyer zu ehren.

transparent

Das Schlüsselworttransparent repräsentiert eine vollständig transparente Farbe. Dies macht den Hintergrund hinter dem farbigen Element vollständig sichtbar. Technisch gesehen isttransparent eine Abkürzung fürrgb(0 0 0 / 0%).

Um unerwartetes Verhalten zu verhindern, wie in einem<gradient>, gibt die aktuelle CSS-Spezifikation an, dasstransparent imalpha-vorpremultiplizierten Farbraum berechnet werden sollte. Beachten Sie jedoch, dass ältere Browser es möglicherweise als schwarz mit einem Alpha-Wert von0 behandeln.

Das Schlüsselworttransparent 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 undborder. 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 wurdetransparent als echte Farbe neu definiert. Es kann jetzt überall dort verwendet werden, wo ein<color>-Wert verwendet werden kann.

Beschreibung

Alle Namen geben eine Farbe imsRGB-Farbraum an. Obwohl die Namen ihre jeweiligen Farben mehr oder weniger beschreiben, sind sie im Wesentlichen künstlich, ohne eine strenge Begründung für die verwendeten Begriffe.

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

Mehrere Schlüsselwörter sind Aliasse 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 vonX11 übernommen wurden, können ihre RGB-Werte von der entsprechenden Farbe in X11-Systemen abweichen, da Hersteller manchmal X11-Farben an ihre spezifische Hardware anpassen.

Beispiele

Verwendung benannter Farben

HTML

html

<div>  <div></div>  <div></div>  <div></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> einen Bestandteil bildet.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

Movatterモバイル変換

<named-color>

Standardfarben

HTML

CSS

Ergebnis

Help improve MDN