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

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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 komponiert werden soll.

Hinweis: Obwohl <color>-Werte genau 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 mit einer der folgenden 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 der Syntax für relative Farben, um eine neue Farbe basierend auf einer bestehenden Farbe auszugeben. Jede der oben genannten Farbmethoden kann eine Ursprungsfarbe enthalten, die durch das Schlüsselwort from eingeleitet und von Definitionen der Kanalwerte für die neue Ausgabefarbe gefolgt wird.
Durch Mischen von zwei Farben: color-mix().
Durch Angabe einer Farbe, für die Sie eine Kontrastfarbe 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 currentColor-Schlüsselwort repräsentiert den Wert der color-Eigenschaft eines Elements. Dies ermöglicht die Verwendung des color-Werts auf Eigenschaften, die ihn standardmäßig nicht erhalten.

Wenn currentColor als Wert der color-Eigenschaft verwendet wird, nimmt es stattdessen seinen Wert von 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-Farbmethode - mit Ausnahme derjenigen, die die veraltete kommaseparierte Syntax verwenden - kann als das Schlüsselwort none angegeben werden, um eine fehlende Komponente darzustellen.

Das explizite Angeben fehlender Komponenten in der Farbsinterpolation ist nützlich, wenn Sie einige Farbkomponenten interpolieren, andere jedoch nicht interpolieren möchten. Für alle anderen Zwecke hat eine fehlende Komponente effektiv einen Nullwert in einer geeigneten Einheit: 0, 0% oder 0deg. Zum Beispiel sind die folgenden Farben äquivalent, wenn sie außerhalb der Interpolation verwendet werden:

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

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

Bei der Interpolation von <color>-Werten werden diese zuerst in einen gegebenen Farbraum konvertiert und dann werden die einzelnen Komponenten der berechneten Werte linear interpoliert. Die Geschwindigkeit der Interpolation wird von der Beschleunigungsfunktion in Übergängen und Animationen bestimmt. Der Standardfarbraum für die Interpolation ist Oklab, kann jedoch durch <color-interpolation-method> in einigen farbbezogenen funktionalen Notationen überschrieben werden.

Interpolation mit fehlenden Komponenten

Interpolation von Farben im selben Raum

Wenn Farben interpoliert werden, die sich genau im Interpolationsfarbraum befinden, werden fehlende Komponenten von einer Farbe durch bestehende Werte derselben Komponenten der anderen Farbe ersetzt. Zum Beispiel sind die folgenden zwei Ausdrücke äquivalent:

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 eine Komponente in beiden Farben fehlt, wird diese Komponente nach der Interpolation fehlen.

Interpolation von Farben aus verschiedenen Räumen: analoge Komponenten

Wenn eine Farbe, die interpoliert werden soll, nicht im Interpolationsfarbraum liegt, werden ihre fehlenden Komponenten in die konvertierte Farbe auf Basis der analogen Komponenten derselben Kategorie ü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`
Farbigkeit	`C`, `S`
Farbton	`H`
a	`a`
b	`b`

Zum Beispiel:

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

Unter Verwendung von OkLCh als Interpolationsfarbraum und den beiden untenstehenden Farben als Beispiel:

css

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

Das Vorverarbeitungsverfahren 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 irgendeine Komponente der konvertierten Farben analog zu einer fehlenden Komponente in der entsprechenden Originalfarbe ist, setzen Sie sie als fehlende Komponente zurück:
css
```
oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748)
```
Ersetzen Sie jede fehlende Komponente durch dieselbe Komponente 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 zu verwenden, um eine spezifische Nachricht, Aktion oder ein Ergebnis zu vermitteln. Siehe Farbe und Farbkontrast für weitere Informationen.

Formale Syntax

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

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

<system-color> = 
  AccentColor         |
  AccentColorText     |
  ActiveText          |
  ButtonBorder        |
  ButtonFace          |
  ButtonText          |
  Canvas              |
  CanvasText          |
  Field               |
  FieldText           |
  GrayText            |
  Highlight           |
  HighlightText       |
  LinkText            |
  Mark                |
  MarkText            |
  SelectedItem        |
  SelectedItemText    |
  VisitedText         |
  <deprecated-color>  

<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-color> = 
  light-dark( <color> , <color> )  

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

<named-color> = 
  aliceblue             |
  antiquewhite          |
  aqua                  |
  aquamarine            |
  azure                 |
  beige                 |
  bisque                |
  black                 |
  blanchedalmond        |
  blue                  |
  blueviolet            |
  brown                 |
  burlywood             |
  cadetblue             |
  chartreuse            |
  chocolate             |
  coral                 |
  cornflowerblue        |
  cornsilk              |
  crimson               |
  cyan                  |
  darkblue              |
  darkcyan              |
  darkgoldenrod         |
  darkgray              |
  darkgreen             |
  darkgrey              |
  darkkhaki             |
  darkmagenta           |
  darkolivegreen        |
  darkorange            |
  darkorchid            |
  darkred               |
  darksalmon            |
  darkseagreen          |
  darkslateblue         |
  darkslategray         |
  darkslategrey         |
  darkturquoise         |
  darkviolet            |
  deeppink              |
  deepskyblue           |
  dimgray               |
  dimgrey               |
  dodgerblue            |
  firebrick             |
  floralwhite           |
  forestgreen           |
  fuchsia               |
  gainsboro             |
  ghostwhite            |
  gold                  |
  goldenrod             |
  gray                  |
  green                 |
  greenyellow           |
  grey                  |
  honeydew              |
  hotpink               |
  indianred             |
  indigo                |
  ivory                 |
  khaki                 |
  lavender              |
  lavenderblush         |
  lawngreen             |
  lemonchiffon          |
  lightblue             |
  lightcoral            |
  lightcyan             |
  lightgoldenrodyellow  |
  lightgray             |
  lightgreen            |
  lightgrey             |
  lightpink             |
  lightsalmon           |
  lightseagreen         |
  lightskyblue          |
  lightslategray        |
  lightslategrey        |
  lightsteelblue        |
  lightyellow           |
  lime                  |
  limegreen             |
  linen                 |
  magenta               |
  maroon                |
  mediumaquamarine      |
  mediumblue            |
  mediumorchid          |
  mediumpurple          |
  mediumseagreen        |
  mediumslateblue       |
  mediumspringgreen     |
  mediumturquoise       |
  mediumvioletred       |
  midnightblue          |
  mintcream             |
  mistyrose             |
  moccasin              |
  navajowhite           |
  navy                  |
  oldlace               |
  olive                 |
  olivedrab             |
  orange                |
  orangered             |
  orchid                |
  palegoldenrod         |
  palegreen             |
  paleturquoise         |
  palevioletred         |
  papayawhip            |
  peachpuff             |
  peru                  |
  pink                  |
  plum                  |
  powderblue            |
  purple                |
  rebeccapurple         |
  red                   |
  rosybrown             |
  royalblue             |
  saddlebrown           |
  salmon                |
  sandybrown            |
  seagreen              |
  seashell              |
  sienna                |
  silver                |
  skyblue               |
  slateblue             |
  slategray             |
  slategrey             |
  snow                  |
  springgreen           |
  steelblue             |
  tan                   |
  teal                  |
  thistle               |
  tomato                |
  turquoise             |
  violet                |
  wheat                 |
  white                 |
  whitesmoke            |
  yellow                |
  yellowgreen           |
  transparent           

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

<deprecated-color> = 
  ActiveBorder         |
  ActiveCaption        |
  AppWorkspace         |
  Background           |
  ButtonHighlight      |
  ButtonShadow         |
  CaptionText          |
  InactiveBorder       |
  InactiveCaption      |
  InactiveCaptionText  |
  InfoBackground       |
  InfoText             |
  Menu                 |
  MenuText             |
  Scrollbar            |
  ThreeDDarkShadow     |
  ThreeDFace           |
  ThreeDHighlight      |
  ThreeDLightShadow    |
  ThreeDShadow         |
  Window               |
  WindowFrame          |
  WindowText           

<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 ] ]? )  

<hdr-color()> = 
  color-hdr( [ <color> && <number [0,∞]>? ]#{2} )  

<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

Erforschung 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

Erzeugung von vollständig gesättigten 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 verschiedener Rottöne

Dieses Beispiel zeigt Rottöne in verschiedenen 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 Rottönen mit unterschiedlicher Sättigung

Dieses Beispiel zeigt Rottöne 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%);
}