Der<color-interpolation-method>CSSDatentyp repräsentiert den verwendetenFarbraum zur Interpolation zwischen<color>-Werten. Er kann verwendet werden, um den Standard-Interpolationsfarbraum für farbbezogene funktionale Notationen wiecolor-mix() undlinear-gradient() zu überschreiben.

Bei der Interpolation von<color>-Werten wird standardmäßig der Oklab-Farbraum verwendet.

Syntax

Der<color-interpolation-method> gibt an, ob die Interpolation einen rechteckigen Farbraum oder einen polaren Farbraum mit einer optionalen Farbtinterpolationsmethode verwenden soll:

in <rectangular-color-space>// orin <polar-color-space>[ <hue-interpolation method>]

Werte

<rectangular-color-space>

Eines der Schlüsselwörtersrgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,lab,oklab,xyz,xyz-d50 oderxyz-d65.

<polar-color-space>

Eines der Schlüsselwörterhsl,hwb,lch oderoklch.

<hue-interpolation-method>Optional

Der Algorithmus für die Farbtinterpolation. Standardmäßig ist diesshorter hue.

<custom-color-space>

Ein<dashed-ident>, das auf ein benutzerdefiniertes@color profile verweist.

Formale Syntax

<color-interpolation-method> =
in[<rectangular-color-space>|<polar-color-space><hue-interpolation-method>?|<custom-color-space>]

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

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

Beispiele

Vergleich von Interpolationsfarbräumen mit Gradienten

Das folgende Beispiel zeigt den Effekt der Verwendung verschiedener Interpolationsfarbräume fürlinear-gradient().

HTML

<div>sRGB:</div><div></div><div>Oklab:</div><div></div><div>Oklch (with <code>longer hue</code>):</div><div></div>

CSS

.gradient {  height: 50px;  width: 100%;}.srgb {  background-image: linear-gradient(in srgb to right, blue, red);}.oklab {  background-image: linear-gradient(in oklab to right, blue, red);}.oklch-longer {  background-image: linear-gradient(in oklch longer hue to right, blue, red);}

Ergebnis

Farbinterpolation in sich wiederholenden Gradienten

Das folgende Beispiel zeigt, wie ein Farbraum angegeben wird, wenn Farben in wiederholenden Gradienten interpoliert werden. Drei Boxen zeigen unterschiedliche Typen von sich wiederholenden Gradienten mit den Funktionenrepeating-conic-gradient(),repeating-linear-gradient() undrepeating-radial-gradient().Die erste Box verwendet den Lab-Farbraum zur Interpolation zwischen zwei Farbwerten.Die zweite und dritte Box verwenden OkLCh und geben zusätzlich eine<hue-interpolation-method> an, um anzugeben, wie zwischen Farben interpoliert werden soll.

HTML

<div>conic</div><div>linear</div><div>radial</div>

CSS

Wir haben dieselben zwei Farben in jedem Verlauf verwendet, um die unterschiedlichen Effekte von<hue-interpolation-method> undFarbraum auf die Farbinterpolation in Gradienten zu demonstrieren.

.gradient {  height: 200px;  width: 200px;  display: inline-block;  font-family: monospace;  margin: 10px;  font-size: 16px;}

.conic {  background-image: repeating-conic-gradient(    in lab,    burlywood,    blueviolet 120deg  );}.linear {  background-image: repeating-linear-gradient(    in oklch,    burlywood,    blueviolet 75px  );}.radial {  background-image: repeating-radial-gradient(    in oklch longer hue,    blueviolet 50px,    burlywood 100px  );}

Ergebnis

Der Vergleich der ersten und zweiten Box zeigt den Unterschied der Interpolation zwischen zwei Farben in verschiedenen Farbräumen.Der Vergleich der zweiten und dritten Box zeigt den Unterschied zwischen<hue-interpolation-method>s, wobei der lineare Verlauf die kürzere Methode (Standard) und der radiale Verlauf die längere Methode verwendet.

Spezifikationen

Browser-Kompatibilität

css.types.color.color-mix

css.types.color.color.display-p3-linear

Siehe auch

• <color>,<gradient>
• <hue-interpolation-method>