<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 verwendet werden, wo immer ein <color>
verwendet werden kann.
Syntax
color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;
Wert
Named Colors bestehen aus Standardfarben, den Schlüsselwörtern transparent
und currentcolor
.
Standardfarben
Grundlegende Farben haben standardisierte, leicht zu merkende Namen:
Schlüsselwort | 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 gibt es etwa 150 weitere Farben, die ein Schlüsselwort zugeordnet haben:
Schlüsselwort | RGB-Hex-Wert | Beispiel |
---|
Im CSS Level 1 wurden ursprünglich nur 16 Grundfarben definiert, wobei orange
im CSS Level 2 hinzugefügt wurde. Webdesigner empfanden diese Liste als zu kurz, und Browseranbieter fügten zahlreiche Namen für Farben hinzu, die auf den X11-Farbnamen basieren. Diese Namen wurden im SVG 1 und anschließend in CSS Colors Level 3 standardisiert, formal definiert und vereinheitlicht (einige hatten bis dahin unterschiedliche Schreibweisen, die jetzt Aliase sind). Sie werden als erweiterte Farbschlüsselwörter, X11-Farben oder SVG-Farben bezeichnet.
Im CSS Colors Level 4 wurde eine zusätzliche Farbe, rebeccapurple
, hinzugefügt, um Web-Pionier Eric Meyer zu ehren.
transparent
Das Schlüsselwort transparent
stellt eine vollständig transparente Farbe dar. 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 vermeiden, zum Beispiel in einem <gradient>
, gibt die aktuelle CSS-Spezifikation an, dass transparent
im alpha-premultiplied Farbraum berechnet werden sollte. Beachten Sie jedoch, dass ältere Browser es möglicherweise als Schwarz mit einem Alpha-Wert 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 bei zwei CSS-Eigenschaften verwendet werden konnte: background
und border
. Es wurde im Wesentlichen hinzugefügt, um Entwicklern zu ermöglichen, eine vererbte Vollfarbe zu überschreiben. Mit der Einführung von Alphakanälen in CSS Colors Level 3 wurde transparent
als echte Farbe neu definiert. Es kann nun überall dort verwendet werden, wo ein <color>
-Wert verwendet werden kann.
Beschreibung
Alle Namen spezifizieren eine Farbe im sRGB-Farbraum. Auch wenn die Namen die jeweiligen Farben mehr oder weniger beschreiben, sind sie im Grunde künstlich und ohne strenge Logik hinter den verwendeten Begriffen.
Die Farbschlüsselwörter stehen alle für einfache, einfarbige Farben ohne Transparenz.
Einige 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 aus X11 übernommen wurden, können ihre RGB-Werte von den entsprechenden Farben auf X11-Systemen abweichen, da Hersteller die X11-Farben manchmal an ihre spezifische Hardware anpassen.
Beispiele
Verwendung von Named Colors
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Named colors | ||||||||||||
rebeccapurple | ||||||||||||
transparent |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
<color>
: der Datentyp, dessen Definition<named-color>
ein Bestandteil ist.