<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
/* 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
oderpink
),<system-color>
undcurrentcolor
. - 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.
<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:
/* 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:
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
) 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)
.
Unter Verwendung von Oklch als Interpolationsfarbraum und der beiden unten angegebenen Farben als Beispiel:
lch(80% 30 none)
color(display-p3 0.7 0.5 none)
Das Vorverarbeitungsverfahren ist:
-
Ersetzen der fehlenden Komponenten in beiden Farben durch einen Nullwert:
csslch(80% 30 0) color(display-p3 0.7 0.5 0)
-
Konvertieren beider Farben in den Interpolationsfarbraum:
cssoklch(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, wird sie als fehlende Komponente zurückgesetzt:
cssoklch(83.915% 0.0902 none) oklch(63.612% 0.1522 78.748)
-
Ersetzen jeder fehlenden Komponente durch die gleiche Komponente aus der anderen konvertierten Farbe:
cssoklch(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
<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
<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
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
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
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
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<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 |
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
opacity
: die Eigenschaft, die die Transparenz auf Elementebene definiert<hue>
: der Datentyp, der den Farbtonwinkel einer Farbe darstelltcolor
,background-color
,border-color
,box-shadow
,outline-color
,text-shadow
: häufig verwendete Eigenschaften, die<color>
nutzen- Farben auf HTML-Elemente mit CSS anwenden
- Verwendung relativer Farben
- Neue Funktionen, Verläufe und Farbtöne in CSS Colors (Level 4) (2023) im MDN-Blog