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

構文

<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

longer

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

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

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

• θ1 < θ2 の場合は、時計回りの弧を使用します。
• θ1 > θ2 の場合は、反時計回りの弧を使用します。

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg

increasing

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

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg

decreasing

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

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg

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

• 0deg < θ2 - θ1 < 180deg または θ2 - θ1 < -180deg ならば、 shorter と increasing は等価で、longer と decreasing は等価です。
• -180deg < θ2 - θ1 < 0deg または θ2 - θ1 > 180deg ならば、shorter と decreasing は等価で、longer と increasing は等価です。

increasing と decreasing の特筆すべき特性は、トランジションやアニメーション中に色相角の差が 180deg を通って変化したとき、 shorter と longer のように弧が反対側にならないことです。

形式文法

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

例

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

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

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

div {
  border: 1px solid black;
  height: 50px;
  margin: 10px;
  width: 90%;
}
p {
  color: white;
  margin: 6px;
}

/* Fallback styles */
.hsl,
.hsl-shorter,
.hsl-named {
  background: linear-gradient(
    to right,
    hsl(39 100% 50%),
    hsl(46 100% 50%),
    hsl(53 100% 50%),
    hsl(60 100% 50%)
  );
}
.hsl-increasing {
  background: linear-gradient(
    to right,
    hsl(190 100% 50%),
    hsl(225 100% 50%),
    hsl(260 100% 50%),
    hsl(295 100% 50%),
    hsl(330 100% 50%),
    hsl(365 100% 50%),
    hsl(400 100% 50%),
    hsl(435 100% 50%),
    hsl(470 100% 50%),
    hsl(505 100% 50%),
    hsl(540 100% 50%)
  );
}
.hsl-decreasing,
.hsl-longer,
.hsl-named-longer {
  background: linear-gradient(
    to right,
    hsl(399 100% 50%),
    hsl(368 100% 50%),
    hsl(337 100% 50%),
    hsl(307 100% 50%),
    hsl(276 100% 50%),
    hsl(245 100% 50%),
    hsl(214 100% 50%),
    hsl(183 100% 50%),
    hsl(152 100% 50%),
    hsl(122 100% 50%),
    hsl(91 100% 50%),
    hsl(60 100% 50%)
  );
}

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

結果

仕様書

ブラウザーの互換性

関連情報

• <color-interpolation-method>
• <hue> データ型