Der<color>CSSDatentyp repräsentiert eine Farbe.Ein<color> kann auch einenAlphakanalTransparenzwert enthalten, der angibt, wie die Farbe mit ihrem Hintergrundzusammengesetzt wird.

Syntax

/* Named colors */rebeccapurplealiceblue/* 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 auf eine der unten aufgeführten Methoden angegeben werden:

• Durch Schlüsselwörter:<named-color> (wieblue oderpink),<system-color> undcurrentColor.
• Durch hexadezimale Notationen:<hex-color> (wie#ff0000).
• Durch<color-function>, mit Parametern in einemFarbraum unter Verwendung funktionaler Notationen:
  • sRGB-Farbraum:hsl(),hwb() undrgb().
  • CIELAB-Farbraum:lab() undlch().
  • Oklab-Farbraum:oklab() undoklch().
  • Andere Farbräume:color(),device-cmyk().
• Durch Verwendung der Syntax fürrelative Farben, um eine neue Farbe basierend auf einer vorhandenen Farbe auszugeben. Jede der oben genannten Farb-Funktionen kann eineUrsprungsfarbe aufnehmen, die mit dem Schlüsselwortfrom angegeben wird, gefolgt von Definitionen der Kanalwerte für die neueAusgabe-Farbe.
• Durch Mischen zweier Farben:color-mix().
• Durch Angabe einer Farbe, für die eine Kontrastfarbe zurückgegeben werden soll:contrast-color().
• Durch Angabe zweier Farben, wobei die erste für helle Farbschemata und die zweite für dunkle Farbschemata verwendet wird:light-dark().

currentColor Schlüsselwort

DascurrentColor Schlüsselwort repräsentiert den Wert dercolor-Eigenschaft eines Elements. Dies ermöglicht die Verwendung descolor-Werts bei Eigenschaften, die diesen standardmäßig nicht übernehmen.

WenncurrentColor als Wert dercolor-Eigenschaft verwendet wird, nimmt es stattdessen seinen Wert aus dem geerbten Wert dercolor-Eigenschaft.

<div>  The color of this text is blue.  <div></div>  This block is surrounded by a blue border.</div>

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

Fehlende Farbkomponenten

Jede Komponente einer CSS-Farbfunktion - außer solchen, die die veraltete kommagetrennte Syntax verwenden - kann als Schlüsselwortnone für eine fehlende Komponente angegeben werden.

Die explizite Angabe vonfehlenden Komponenten in derFarbeninterpolation ist nützlich in Fällen, in denen Sie einige Farbkomponenten interpolieren möchten, aber nicht andere. Für alle anderen Zwecke hat eine fehlende Komponente effektiv einen Nullwert in einer geeigneten Einheit:0,0% oder0deg. Zum Beispiel sind die folgenden Farben äquivalent, wenn sie außerhalb der Interpolation verwendet werden:

/* 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 findet beiVerläufen,Übergängen undAnimationen statt.

Beim Interpolieren von<color>-Werten werden diese zuerst in einen bestimmten Farbraum umgewandelt und dann jede Komponente derberechneten Werte linear interpoliert, wobei die Geschwindigkeit der Interpolation durch dieEasing-Funktion in Übergängen und Animationen bestimmt wird. Der Standardfarbinterpolationsraum ist Oklab, kann jedoch in einigen farbbezogenen funktionalen Notationen durch<color-interpolation-method> überschrieben werden.

Interpolation mit fehlenden Komponenten

Interpolation von Farben im gleichen Raum

Bei der Interpolation von Farben, die sich genau im Farbinterpolationsraum befinden, werden fehlende Komponenten einer Farbe durch vorhandene Werte derselben Komponenten der anderen Farbe ersetzt.Zum Beispiel sind die folgenden zwei Ausdrücke äquivalent:

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

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 basierend aufanalogen Komponenten derselben Kategorie aus der folgenden Tabelle übertragen:

Zum Beispiel:

• X (0.2) incolor(xyz 0.2 0.1 0.6) ist analog zuR (50%) inrgb(50% 70% 30%).
• H (0deg) inhsl(0deg 100% 80%) ist analog zuH (140) inoklch(80% 0.1 140).

Verwendung von OkLCh als Farbinterpolationsraum und den beiden unten aufgeführten Farben als Beispiel:

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

Der Vorverarbeitungsprozess ist:

1. Ersetzen Sie die fehlenden Komponenten in beiden Farben durch einen Nullwert:

   css

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

2. Konvertieren Sie beide Farben in den Farbinterpolationsraum:

   css

   oklch(83.915% 0.0902 0.28)oklch(63.612% 0.1522 78.748)

3. Wenn eine 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)

4. 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. DieWCAG 2.2-Empfehlung rät dringend davon ab, Farbe als einziges Mittel zur Übermittlung einer bestimmten Nachricht, Aktion oder eines Ergebnisses zu verwenden. Weitere Informationen finden Sie unterFarbe 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

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

<color-function> =
<rgb()>|
<rgba()>|
<hsl()>|
<hsla()>|
<hwb()>|
<lab()>|
<lch()>|
<oklab()>|
<oklch()>|
<ictcp()>|
<jzazbz()>|
<jzczhz()>|
<alpha()>|
<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]]?)

<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

Erkundung von Farbwerten

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

HTML

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

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

<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;}

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 unterschiedlicher Rottöne

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

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;}

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 unterschiedlicher Sättigung

Dieses Beispiel zeigt Rottöne unterschiedlicher Sättigung im sRGB-Farbraum.

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;}

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

Browser-Kompatibilität

Siehe auch

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