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

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

Der <color> CSS Datentyp stellt eine Farbe dar. 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 ihre tatsächliche Erscheinung (manchmal erheblich) von Gerät zu Gerät variieren. Dies liegt daran, dass die meisten Geräte nicht kalibriert sind und einige Browser die Farbprofile von Ausgabegeräten 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 auf folgende Weise angegeben werden:

  • Durch Schlüsselwörter: <named-color> (z. B. blue oder pink), <system-color> und currentcolor.
  • Durch hexadezimale Notationen: <hex-color> (z. B. #ff0000).
  • Durch <color-function>, mit Parametern in einem Farbraum unter Verwendung funktionaler Notationen:
  • Durch die Verwendung der relativen Farbsyntax, um eine neue Farbe basierend auf einer bestehenden Farbe auszugeben. Jede der oben genannten Farbfunktionen kann eine Ursprungsfarbe vorangestellt durch das Schlüsselwort from und gefolgt von Definitionen der Kanalwerte für die neue Ausgabefarbe verwenden.
  • Durch das Mischen zweier Farben: color-mix().
  • Durch die Angabe zweier Farben, bei Verwendung der ersten für helle Farbschemata und der zweiten für dunkle Farbschemata: 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 bei Eigenschaften, die diesen Standardwert nicht erhalten.

Wenn currentcolor als Wert der color-Eigenschaft verwendet wird, übernimmt es stattdessen den vererbten Wert der color-Eigenschaft.

html
<div style="color: blue; border: 1px dashed currentcolor;">
  The color of this text is blue.
  <div style="background: currentcolor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>

Fehlende Farbkomponenten

Jede Komponente einer beliebigen CSS-Funktion, die Farben definiert – mit Ausnahme derjenigen, die die alte, durch Kommas getrennte Syntax verwenden – kann als das Schlüsselwort none angegeben werden, um eine fehlende Komponente zu sein.

Das explizite Angeben von fehlenden Komponenten in der Farminterpolation ist nützlich in Fällen, bei denen Sie einige Farbkomponenten interpolieren, aber andere 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, wenn sie außerhalb der Interpolation verwendet werden, 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 Farminterpolation tritt bei Verläufen, Übergängen und Animationen auf.

Wenn <color>-Werte interpoliert werden, werden sie zuerst in einen bestimmten Farbraum umgewandelt, und dann werden jede Komponente der berechneten Werte linear interpoliert, wobei die Geschwindigkeit der Interpolation durch die Easing-Funktion in Übergängen und Animationen bestimmt wird. Der Standard-Farbraum für die Interpolation ist Oklab, dies kann jedoch durch <color-interpolation-method> in einigen farbbezogenen Funktionalnotationen ü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 bestehende Werte derselben Komponenten der anderen Farbe ersetzt. Beispielsweise 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, fehlt diese Komponente auch nach der Interpolation.

Interpolation von Farben aus verschiedenen Farbräumen: analoge Komponenten

Wenn eine Farbe, die interpoliert werden soll, nicht im Interpolationsfarbraum liegt, werden fehlende Komponenten in die konvertierte Farbe basierend auf den analogen Komponenten derselben Kategorie überführt, wie in der folgenden Tabelle beschrieben:

Kategorie Analoge Komponenten
Rot R, X
Grün G, Y
Blau 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 der beiden unten angegebenen Farben als Beispiel:

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

Das Vorverarbeitungsverfahren ist:

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

    css
    lch(80% 30 0)
    color(display-p3 0.7 0.5 0)
    
  2. Konvertieren beider Farben in den Interpolationsfarbraum:

    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, wird sie als fehlende Komponente zurückgesetzt:

    css
    oklch(83.915% 0.0902 none)
    oklch(63.612% 0.1522 78.748)
    
  4. Ersetzen jeder fehlenden Komponente durch die gleiche 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 Übermittlung einer spezifischen Nachricht, Aktion oder eines Ergebnisses zu verwenden. Weitere Informationen finden Sie unter Farbe und Farbkontrast.

Formale Syntax

<color> = 
<color-base> |
currentColor |
<system-color>

<color-base> =
<hex-color> |
<color-function> |
<named-color> |
transparent

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

<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( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

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

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

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

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

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

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

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

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

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

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

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

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

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

<hue> =
<number> |
<angle>

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

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

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

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

<predefined-polar-params> =
jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none ]

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

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

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

<predefined-rectangular> =
jzazbz |
ictcp

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

Beispiele

Erforschen von Farbwerten

In diesem Beispiel stellen wir ein <div>-Element und ein Texteingabefeld bereit. Wenn Sie eine gültige Farbe in das Eingabefeld eingeben, nimmt das <div>-Element diese Farbe an, 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" />

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

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 im sRGB-Farbraum.

HTML

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

CSS

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 Rotfarben mit unterschiedlicher Sättigung im sRGB-Farbraum.

HTML

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

CSS

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

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
<color>
color() (Profiled color values)
Mix <percentage> and <number> in parameters
Relative color() syntax
color-mix()
currentcolor keyword
hsl() (HSL color model)
Alpha parameter
Mix <percentage> and <number> in parameters
Relative HSL colors
Space-separated parameters
hwb() (HWB color model)
Mix <percentage> and <number> in parameters
Relative HWB colors
lab() (Lab color model)
Mix <percentage> and <number> in parameters
Relative Lab colors
lch() (LCH color model)
Mix <percentage> and <number> in parameters
Relative LCH colors
light-dark()
Named colors
named-color.rebeccapurple
named-color.transparent
oklab() (Oklab color model)
Mix <percentage> and <number> in parameters
Relative Oklab colors
oklch() (OKLCH color model)
Mix <percentage> and <number> in parameters
Relative Oklch colors
rgb() (RGB color model)
Alpha parameter
Float values in parameters
Mix <percentage> and <number> in parameters
Relative RGB colors
Space-separated rgb() parameters
RGB hexadecimal notation (#RRGGBB, #RGB, …)
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)
System colors
AccentColor and AccentColorText
Mark, MarkText, ButtonBorder
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

Siehe auch