CSS <color-interpolation-method> データ型

構文

<color-interpolation-method> は、補間に矩形色空間を使用するか、極座標色空間とオプションの色相補間を使用するかを指定します。

in <rectangular-color-space>
// または
in <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 hue です。

<custom-color-space>

<dashed-ident> で、カスタム @color プロファイルを参照します。

形式文法

<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  

例

グラデーションを使用する補間色空間の比較

次の例は、 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);
}

結果

反復グラデーションでの色の補間

次の例は、反復グラデーションの色を補間処理する際に、色空間を指定する方法を示しています。 3 つのボックスには、repeating-conic-gradient()、 repeating-linear-gradient()、repeating-radial-gradient() の各関数を使用した、異なる種類の反復グラデーションを表示します。 最初のボックスでは、Lab 色空間を使用して 2 つの色値の間を補間処理します。 2 つ目と 3 つ目のボックスでは OkLCh を使用しており、さらに色相値間の補間処理を指定するための <hue-interpolation-method> も指定しています。

HTML

<div class="gradient conic">conic</div>
<div class="gradient linear">linear</div>
<div class="gradient radial">radial</div>

CSS

それぞれのグラデーションで同じ 2 色を使用し、グラデーションにおける色の補間処理に対して、<hue-interpolation-method> と色空間が及ぼす異なる効果を示しました。

.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
  );
}

結果

1 つ目のボックスと 2 つ目のボックスを比較すると、異なる色空間における 2 つの色間の補間処理の違いがわかります。 2 つ目と 3 つ目のボックスを比較すると、<hue-interpolation-method> の違いが示されています。線形グラデーションでは短い方（デフォルト）が使用され、放射グラデーションでは長い方が使用されています。

仕様書

ブラウザーの互換性

css.types.color.color-mix

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

関連情報

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