<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⁩.

* Some parts of this feature may have varying levels of support.

Der <color> CSS Datentyp repräsentiert eine Farbe. Ein <color> kann auch einen Alpha-Kanal Transparenzwert enthalten, der angibt, wie die Farbe mit ihrem Hintergrund vermischt werden soll.

Hinweis: Obwohl <color> Werte präzise definiert sind, kann ihr tatsächliches Erscheinungsbild von Gerät zu Gerät variieren (manchmal erheblich). Dies liegt daran, dass die meisten Geräte nicht kalibriert sind und einige Browser die Farbprofile der Ausgabegeräte nicht unterstützen.

Syntax

css

/* Named colors */
rebeccapurple
aliceblue

/* RGB Hexadecimal */
#f09
#ff0099

/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)

/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* Lab (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* OkLCh (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* Relative CSS colors */
/* HSL hue change */
hsl(from red 240deg s l)
/* HWB alpha channel change */
hwb(from green h w b / 0.5)
/* LCH lightness change */
lch(from blue calc(l + 20) c h)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

Ein <color> Wert kann mithilfe einer der unten aufgeführten Methoden angegeben werden:

Durch Schlüsselwörter: <named-color> (wie blue oder pink), <system-color>, und currentColor.
Durch hexadezimale Notationen: <hex-color> (wie #ff0000).
Durch <color-function>, mit Parametern in einem Farbraum unter Verwendung funktionaler Notationen:
- sRGB-Farbraum: hsl(), hwb(), und rgb().
- CIELAB-Farbraum: lab() und lch().
- Oklab-Farbraum: oklab() und oklch().
- Andere Farbräume: color(), device-cmyk().
Durch Verwendung von relativer Farbsyntax, um eine neue Farbe basierend auf einer vorhandenen Farbe auszugeben. Jede der oben genannten Farbfunktionsmethoden kann eine Ursprungsfarbe annehmen, der das from Schlüsselwort und eine Definition der Kanalwerte für die neue Ausgabefarbe folgt.
Durch Mischen zweier Farben: color-mix().
Durch Angabe einer Farbe, für die Sie eine kontrastreiche Farbe zurückgegeben haben möchten: contrast-color().
Durch Angabe von zwei Farben, wobei die erste für helle Farbschemata und die zweite für dunkle Farbschemata verwendet wird: light-dark().

`currentColor` Schlüsselwort

Das Schlüsselwort currentColor repräsentiert den Wert der color Eigenschaft eines Elements. Dies ermöglicht die Verwendung des color Wertes bei Eigenschaften, die ihn standardmäßig nicht erhalten.

Wenn currentColor als Wert der color Eigenschaft verwendet wird, übernimmt es stattdessen seinen Wert aus dem geerbten Wert der color Eigenschaft.

html

<div class="container">
  The color of this text is blue.
  <div class="child"></div>
  This block is surrounded by a blue border.
</div>

css

.container {
  color: blue;
  border: 1px dashed currentColor;
}
.child {
  background: currentColor;
  height: 9px;
}

Fehlende Farbkomponenten

Jede Komponente einer CSS-Farbfunktion - außer bei der veralteten, durch Kommas getrennten Syntax - kann als Schlüsselwort none angegeben werden, um eine fehlende Komponente darzustellen.

Das explizite Festlegen fehlender Komponenten bei der Farbinterpolation ist nützlich in Fällen, in denen Sie einige Farbkomponenten interpolieren möchten, andere jedoch nicht. Für alle anderen Zwecke wird eine fehlende Komponente effektiv einen Nullwert in einer geeigneten Einheit haben: 0, 0%, oder 0deg. Beispielsweise sind die folgenden Farben beim Einsatz außerhalb einer Interpolation gleichwertig:

css

/* These are equivalent */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/* These are equivalent */
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);

Interpolation

Die Farbinterpolation erfolgt mit Verläufen, Übergängen und Animationen.

Beim Interpolieren von <color> Werten werden sie zunächst in einen gegebenen Farbraum umgewandelt und dann wird jede Komponente der berechneten Werte linear interpoliert, wobei die Geschwindigkeit der Interpolation durch die Easing-Funktion in Übergängen und Animationen bestimmt wird. Der standardmäßige Interpolationsfarbraum ist Oklab, kann aber in einigen Farb-bezogenen funktionalen Notationen über <color-interpolation-method> überschrieben werden.

Interpolation mit fehlenden Komponenten

Interpolation von Farben im gleichen Raum

Beim Interpolieren von Farben, die sich genau im Interpolationsfarbraum befinden, werden fehlende Komponenten einer Farbe durch vorhandene Werte der gleichen Komponenten der anderen Farbe ersetzt. Zum Beispiel sind die folgenden zwei Ausdrücke gleichwertig:

css

color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))

Hinweis: Wenn bei beiden Farben eine Komponente fehlt, wird diese Komponente nach der Interpolation fehlen.

Interpolation von Farben aus unterschiedlichen Räumen: analoge Komponenten

Wenn eine zu interpolierende Farbe nicht im Interpolationsfarbraum ist, werden ihre fehlenden Komponenten auf der Grundlage analoger Komponenten derselben Kategorie in die konvertierte Farbe übertragen, wie in der folgenden Tabelle beschrieben:

Kategorie	Analoge Komponenten
Rottöne	`R`, `X`
Grüntöne	`G`, `Y`
Blautöne	`B`, `Z`
Helligkeit	`L`
Buntheit	`C`, `S`
Farbton	`H`
a	`a`
b	`b`

Beispielsweise:

X (0.2) in color(xyz 0.2 0.1 0.6) ist analog zu R (50%) in rgb(50% 70% 30%).
H (0deg) in hsl(0deg 100% 80%) ist analog zu H (140) in oklch(80% 0.1 140).

Verwenden wir OkLCh als Interpolationsfarbraum und die beiden unten stehenden Farben als Beispiel:

css

lch(80% 30 none)
color(display-p3 0.7 0.5 none)

Der Vorverarbeitungsprozess ist:

Ersetzen Sie die fehlenden Komponenten in beiden Farben durch einen Nullwert:
css
```
lch(80% 30 0)
color(display-p3 0.7 0.5 0)
```
Konvertieren Sie beide Farben in den Interpolationsfarbraum:
css
```
oklch(83.915% 0.0902 0.28)
oklch(63.612% 0.1522 78.748)
```
Wenn eine Komponente der konvertierten Farben analog zu einer fehlenden Komponente in der entsprechenden Originalfarbe ist, setzen Sie sie wieder als fehlende Komponente:
css
```
oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748)
```
Ersetzen Sie jede fehlende Komponente durch dieselbe Komponente aus der anderen konvertierten Farbe:
css
```
oklch(83.915% 0.0902 78.748)
oklch(63.612% 0.1522 78.748)
```

Barrierefreiheit

Einige Menschen haben Schwierigkeiten, Farben zu unterscheiden. Die WCAG 2.2 Empfehlung rät dringend davon ab, Farbe als einziges Mittel zur Vermittlung einer spezifischen Nachricht, Handlung oder eines Ergebnisses zu nutzen. Weitere Informationen finden Sie unter Farbe und Farbkontrast.

Formale Syntax

<color> = 
  <color-base>        |
  currentColor        |
  <system-color>      |
  <contrast-color()>  |
  <device-cmyk()>     |
  <light-dark()>      

<color-base> = 
  <hex-color>       |
  <color-function>  |
  <named-color>     |
  <color-mix()>     |
  transparent       

<contrast-color()> = 
  contrast-color( [ [ <color> && [ tbd-fg | tbd-bg ] && <target-contrast>? ] | [ <color> && [ tbd-fg | tbd-bg ] && <target-contrast> , <color># ] ] )  

<device-cmyk()> = 
  <legacy-device-cmyk-syntax>  |
  <modern-device-cmyk-syntax>  

<light-dark()> = 
  light-dark( <color> , <color> )  

<color-function> = 
  <rgb()>     |
  <rgba()>    |
  <hsl()>     |
  <hsla()>    |
  <hwb()>     |
  <lab()>     |
  <lch()>     |
  <oklab()>   |
  <oklch()>   |
  <ictcp()>   |
  <jzazbz()>  |
  <jzczhz()>  |
  <alpha()>   |
  <color()>   

<color-mix()> = 
  color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]# )  

<target-contrast> = 
  <wcag2>  

<legacy-device-cmyk-syntax> = 
  device-cmyk( <number>#{4} )  

<modern-device-cmyk-syntax> = 
  device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )  

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<rgba()> = 
  <legacy-rgba-syntax>  |
  <modern-rgba-syntax>  

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<hsla()> = 
  <legacy-hsla-syntax>  |
  <modern-hsla-syntax>  

<hwb()> = 
  hwb( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<ictcp()> = 
  ictcp( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<jzazbz()> = 
  jzazbz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<jzczhz()> = 
  jzczhz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<alpha()> = 
  alpha( [ from <color> ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<wcag2> = 
  wcag2                                           |
  wcag2( [ <number> | [ aa | aaa ] && large? ] )  

<cmyk-component> = 
  <number>      |
  <percentage>  |
  none          

<alpha-value> = 
  <number>      |
  <percentage>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-rgba-syntax> = 
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )      

<modern-rgba-syntax> = 
  rgba( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  hsl( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<legacy-hsla-syntax> = 
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsla-syntax> = 
  hsla( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<colorspace-params> = 
  <custom-params>          |
  <predefined-rgb-params>  |
  <xyz-params>             

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+  

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<predefined-rgb> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  rec2100-pq         |
  rec2100-hlg        |
  rec2100-linear

Beispiele

Erforschen von Farbwerten

In diesem Beispiel stellen wir ein <div> und ein Texteingabefeld bereit. Wenn Sie eine gültige Farbe in das Eingabefeld eingeben, übernimmt das <div> diese Farbe, sodass Sie unsere Farbwerte testen können.

HTML

html

<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />

div {
  height: 200px;
  width: 200px;
}

const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "Invalid color value";
  }
});

Ergebnis

Erzeugen vollständig gesättigter sRGB-Farben

Dieses Beispiel zeigt vollständig gesättigte sRGB-Farben im sRGB-Farbraum.

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
  background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
  background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
  background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
  background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
  background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
  background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
  background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
  background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
  background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
  background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
  background-color: hsl(330 100% 50%);
}

Ergebnis

Erstellen von verschiedenen Rottönen

Dieses Beispiel zeigt Rottöne verschiedener Schattierungen im sRGB-Farbraum.

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
  background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
  background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
  background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
  background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 100%);
  border: solid;
}

Ergebnis

Erstellen von Rot mit unterschiedlicher Sättigung

Dieses Beispiel zeigt rote Farben mit unterschiedlicher Sättigung im sRGB-Farbraum.

HTML

html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}

css

div:nth-child(1) {
  background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
  background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
  background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
  background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
  background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 50%);
}

Ergebnis

Spezifikationen

Specification
CSS Color Module Level 4 # color-syntax

Browser-Kompatibilität

Siehe auch

opacity: die Eigenschaft, die Transparenz auf der Elementebene definiert
<hue>: der Datentyp, der den Farbwinkel einer Farbe repräsentiert
color, background-color, border-color, box-shadow, outline-color, text-shadow: allgemeine Eigenschaften, die <color> verwenden
color() Funktion
Anwenden von Farben auf HTML-Elemente mit CSS
Verwendung relativer Farben
Neue Funktionen, Verläufe und Farbtöne in CSS-Farben (Level 4) im MDN-Blog (2023)

Help improve MDN

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

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