<color>

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

Hinweis: Obwohl <color>-Werte genau definiert sind, kann ihr tatsächliches Erscheinungsbild (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 mit 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 der Syntax für relative Farben, um basierend auf einer vorhandenen Farbe eine neue Farbe auszugeben. Jede der oben genannten Farbmethoden kann eine Ursprungsfarbe verwenden, die dem from-Schlüsselwort folgt und gefolgt von Definitionen der Kanalwerte der neuen Ausgabefarbe wird.
Durch das Mischen von zwei Farben: color-mix().
Durch Angabe einer Farbe, zu der eine kontrastierende Farbe zurückgegeben werden soll: 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. Dadurch können Sie den color-Wert auf Eigenschaften anwenden, die ihn standardmäßig nicht erhalten.

Wird currentColor als Wert der color-Eigenschaft verwendet, nimmt er stattdessen seinen Wert vom 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 der CSS-Farbmethoden - außer denen, die die ältere, durch Kommata getrennte Syntax verwenden - kann als das Schlüsselwort none angegeben werden, um eine fehlende Komponente darzustellen.

Das explizite Angeben von fehlenden Komponenten in der Farbinterpolation ist nützlich für Fälle, in denen Sie einige Farbkomponenten interpolieren möchten, aber nicht andere. Für alle anderen Zwecke wird eine fehlende Komponente effektiv einen Nullwert in einer geeigneten Einheit haben: 0, 0%, oder 0deg. Zum Beispiel sind die folgenden Farben gleichwertig, wenn sie außerhalb von Interpolationen 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

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

Bei der Interpolation von <color>-Werten werden sie zunächst in einen bestimmten Farbraum konvertiert und dann jede Komponente der berechneten Werte linear interpoliert, wobei die Interpolationsgeschwindigkeit durch die Easing-Funktion bei Übergängen und Animationen bestimmt wird. Der Standardfarbraum für die Interpolation ist Oklab, kann aber in einigen farbbezogenen funktionalen Notationen durch <color-interpolation-method> überschrieben werden.

Interpolation mit fehlenden Komponenten

Interpolieren von Farben im selben Raum

Bei der Interpolation von Farben, die genau im Interpolationsfarbraum liegen, werden fehlende Komponenten einer Farbe durch vorhandene Werte derselben Komponenten der anderen Farbe ersetzt. Zum Beispiel sind die folgenden beiden 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 eine Komponente in beiden Farben fehlt, wird diese Komponente nach der Interpolation fehlen.

Interpolieren von Farben aus verschiedenen Räumen: Analogkomponenten

Wenn eine zu interpolierende Farbe nicht im Interpolationsfarbraum liegt, werden ihre fehlenden Komponenten in die konvertierte Farbe basierend auf 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`
Farbenfreudigkeit	`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).

Verwendung von OkLCh als Interpolationsfarbraum und den beiden folgenden 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)
```
Wird eine Komponente der konvertierten Farben als analog angesehen zu einer fehlenden Komponente in der entsprechenden Originalfarbe, setzen Sie diese 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 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, Farben als einziges Mittel zum Übermitteln einer bestimmten Nachricht, Aktion oder eines Ergebnisses zu verwenden. 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       

<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> ]  |
  [ <image> , <image> ] )            

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

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

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

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

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

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

<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 bieten wir ein <div> und ein Texteingabefeld an. Durch die Eingabe einer gültigen Farbe in das Eingabefeld wird das <div> diese Farbe annehmen, 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

Erzeugen 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

Erzeugen von roten Farben unterschiedlicher Sättigung

Dieses Beispiel zeigt rote Farben 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

Spezifikation
CSS Color Module Level 4 # color-syntax

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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