<color-interpolation-method>
Baseline 2023Newly available
Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Der <color-interpolation-method>
CSS Datentyp repräsentiert den Farbraum, der zur Interpolation zwischen <color>
-Werten verwendet wird. Es kann verwendet werden, um den Standard-Interpolations-Farbraum für farbbezogene funktionale Notationen wie color-mix()
und linear-gradient()
zu überschreiben.
Bei der Interpolation von <color>
-Werten ist der Standard-Interpolations-Farbraum Oklab.
Syntax
Das <color-interpolation-method>
gibt an, ob eine rechteckige oder ein polarer Farbraum mit einer optionalen Methode zur Farbtoninterpolation verwendet werden soll:
in <rectangular-color-space> // or in <polar-color-space>[ <hue-interpolation method>]
Werte
<rectangular-color-space>
-
Einer der Schlüsselwörter
srgb
,srgb-linear
,display-p3
,a98-rgb
,prophoto-rgb
,rec2020
,lab
,oklab
,xyz
,xyz-d50
oderxyz-d65
. <polar-color-space>
-
Einer der Schlüsselwörter
hsl
,hwb
,lch
oderoklch
. <hue-interpolation-method>
Optional-
Der Algorithmus zur Farbtoninterpolation. Standardmäßig wird
shorter hue
verwendet. <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>? ]
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
Beispiele
Vergleich von Interpolations-Farbräumen mit Gradienten
Das folgende Beispiel zeigt die Auswirkungen der Verwendung verschiedener Interpolations-Farbräume für linear-gradient()
.
HTML
<div>sRGB:</div>
<div class="gradient srgb"></div>
<div>Oklab:</div>
<div class="gradient oklab"></div>
<div>Oklch (with <code>longer hue</code>):</div>
<div class="gradient oklch-longer"></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 wiederholenden Gradienten
Das folgende Beispiel zeigt, wie ein Farbraum bei der Farbinterpolation in wiederholenden Gradienten angegeben wird.
Drei Kästchen zeigen unterschiedliche Arten von wiederholenden Gradienten unter Verwendung der Funktionen repeating-conic-gradient()
, repeating-linear-gradient()
und repeating-radial-gradient()
.
Das erste Kästchen verwendet den Lab-Farbraum, um zwischen zwei Farbwerten zu interpolieren.
Das zweite und dritte Kästchen verwenden Oklch und geben zusätzlich eine <hue-interpolation-method>
an, um zu spezifizieren, wie zwischen Farbtonwerten interpoliert werden soll.
HTML
<div class="gradient conic">conic</div>
<div class="gradient linear">linear</div>
<div class="gradient radial">radial</div>
CSS
Es wurden dieselben zwei Farben in jedem Gradienten verwendet, um die unterschiedlichen Effekte von <hue-interpolation-method>
und Farbraum auf die Farbinterpolation in Gradienten zu demonstrieren.
.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 des ersten und zweiten Kästchens zeigt den Unterschied bei der Interpolation zwischen zwei Farben in verschiedenen Farbräumen.
Der Vergleich des zweiten und dritten Kästchens zeigt den Unterschied zwischen <hue-interpolation-method>
s, wobei der lineare Gradient die kürzere Methode (Standard) und der radiale Gradient die längere Methode verwendet.
Spezifikationen
Specification |
---|
CSS Color Module Level 4 # interpolation-space |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
color-mix() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support