<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

css
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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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.