<hue-interpolation-method>

<hue-interpolation-method>CSSデータ型で、 <hue> 値間の補間に用いるアルゴリズムを表します。 補間方法は、色相環に基づいて 2 つの色相値の中間点を探す方法を指定します。 これは <color-interpolation-method> データ型の成分として使用します。

<hue> 値を補間する場合、色相補間アルゴリズムは shorter が既定値です。

構文

<hue-interpolation-method> 値は色相補間アルゴリズムの名前にリテラルトークン hue が続くものです。

shorter hue
longer hue
increasing hue
decreasing hue

任意の色相角の組は色相環上の 2 つの半径に対応し、円周を補間可能な 2 つの弧に切り分けます。どちらの弧も最初の半径で始まり 2 つ目の半径で終わりますが、一方は時計回りに、もう一方は反時計回りに進みます。

メモ: 以下の説明と図は、色相角が時計回りに増加する色相環に基づいています。角度の増加が反時計回りの処理になる色相環があることに注意してください。

色相角 θ1θ2 のペアは範囲 [0deg, 360deg) に正規化され、 θ1 から θ2 への補間時にどの円弧を使用するかを決定するアルゴリズムが 4 つあります。

shorter

短い方の弧を使用します。 2 つの角が一致すると、弧は単一の点に収れんします。両方の円弧の長さが同じ場合は次のようになります。

  • θ1 < θ2 の場合は、時計回りの弧を使用します。
  • θ1 > θ2 の場合は、反時計回りの弧を使用します。
θ1 = 45deg, θ2 = 135deg θ1 = 135deg, θ2 = 45deg
shorter with θ1 = 45deg and θ2 = 135deg shorter with θ1 = 135deg and θ2 = 45deg
longer

長い方の弧を使用します。 2 つの角が一致した場合は次のようになります。

  • θ1 ≤ θ2の場合、弧は時計回りの方向で全周となります。
  • θ1 > θ2 の場合、弧は反時計回りの方向で全周となります。

両方の弧の長さが同じである場合は次のようになります。

  • θ1 < θ2 の場合は、時計回りの弧を使用します。
  • θ1 > θ2 の場合は、反時計回りの弧を使用します。
θ1 = 45deg, θ2 = 135deg θ1 = 135deg, θ2 = 45deg
longer with θ1 = 45deg and θ2 = 135deg longer with θ1 = 135deg and θ2 = 45deg
increasing

時計回りの弧を使用します。 2 つの角が一致すると、弧は単一の点に収れんします。

θ1 = 45deg, θ2 = 135deg θ1 = 135deg, θ2 = 45deg
increasing with θ1 = 45deg and θ2 = 135deg increasing with θ1 = 135deg and θ2 = 45deg
decreasing

反時計回りの弧を使用します。 2 つの角が一致すると、弧は単一の点に収れんします。

θ1 = 45deg, θ2 = 135deg θ1 = 135deg, θ2 = 45deg
decreasing with θ1 = 45deg and θ2 = 135deg decreasing with θ1 = 135deg and θ2 = 45deg

選べる弧が 2 つしかないため、これらのアルゴリズムはある状況下では対等です。特に次の場合です。

  • 0deg < θ2 - θ1 < 180deg または θ2 - θ1 < -180deg ならば、 shorterincreasing は等価で、longerdecreasing は等価です。
  • -180deg < θ2 - θ1 < 0deg または θ2 - θ1 > 180deg ならば、shorterdecreasing は等価で、longerincreasing は等価です。

increasingdecreasing の特筆すべき特性は、トランジションやアニメーション中に色相角の差が 180deg を通過するとき、 shorterlonger のように弧が反対側にならないことです。

形式文法

<hue-interpolation-method> = 
[ shorter | longer | increasing | decreasing ] hue

色相補間アルゴリズムの比較

次の例は、 linear-gradient() で様々な色相補間アルゴリズムを使用した場合の効果を示しています。

HTML

html
<div class="hsl">
  <p>HSL</p>
</div>
<div class="hsl-increasing">
  <p>HSL increasing</p>
</div>
<div class="hsl-decreasing">
  <p>HSL decreasing</p>
</div>
<div class="hsl-shorter">
  <p>HSL shorter</p>
</div>
<div class="hsl-longer">
  <p>HSL longer</p>
</div>
<div class="hsl-named">
  <p>HSL named</p>
</div>
<div class="hsl-named-longer">
  <p>HSL named (longer)</p>
</div>

CSS

css
.hsl {
  background: linear-gradient(
    to right in hsl,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right in hsl increasing hue,
    hsl(190deg 100% 50%),
    hsl(180deg 100% 50%)
  );
}
.hsl-decreasing {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-shorter {
  background: linear-gradient(
    to right in hsl shorter hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-longer {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(39deg 100% 50%),
    hsl(60deg 100% 50%)
  );
}
.hsl-named {
  background: linear-gradient(to right in hsl, orange, yellow);
}
.hsl-named-longer {
  background: linear-gradient(to right in hsl longer hue, orange, yellow);
}

結果

仕様書

Specification
CSS Color Module Level 4
# hue-interpolation

ブラウザーの互換性

css.types.color.color-mix

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
color-mix()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

css.types.image.gradient.conic-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.conic-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

css.types.image.gradient.linear-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.linear-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

css.types.image.gradient.radial-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.radial-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

css.types.image.gradient.repeating-conic-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.repeating-conic-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

css.types.image.gradient.repeating-linear-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.repeating-linear-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

css.types.image.gradient.repeating-radial-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.repeating-radial-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

関連情報