<color-interpolation-method>
Baseline 2023
Newly available
Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
<color-interpolation-method>
は CSS のデータ型で、 <color>
値間の補間に使用する色空間を表します。これを使用すると、 color-mix()
や linear-gradient()
のような色関連の関数記法における既定の補間色空間を上書きすることができます。
<color>
値を補間する場合、補間色空間は Oklab が既定値です。
構文
<color-interpolation-method>
は、補間に矩形色空間を使用するか、極座標色空間とオプションの色相補間を使用するかを指定します。
in <rectangular-color-space> // または in <polar-color-space>[ <hue-interpolation method>]
値
<rectangular-color-space>
-
srgb
、srgb-linear
、lab
、oklab
、xyz
、xyz-d50
、xyz-d65
のいずれかのキーワードです。 <polar-color-space>
-
hsl
、hwb
、lch
、oklch
のいずれかです。 <hue-interpolation-method>
省略可-
色相補間のアルゴリズム。既定値は
shorter hue
です。
形式文法
<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
例
グラデーションを使用する補間色空間の比較
次の例は、 linear-gradient()
にさまざまな補間色空間を使用した場合の効果を示しています。
HTML
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
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);
}
結果
仕様書
Specification |
---|
CSS Color Module Level 4 # interpolation-space |
ブラウザーの互換性
BCD tables only load in the browser