<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
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
のように弧が反対側にならないことです。
形式文法
例
色相補間アルゴリズムの比較
次の例は、 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
.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
BCD tables only load in the browser
css.types.image.gradient.conic-gradient.hue_interpolation_method
BCD tables only load in the browser
css.types.image.gradient.linear-gradient.hue_interpolation_method
BCD tables only load in the browser
css.types.image.gradient.radial-gradient.hue_interpolation_method
BCD tables only load in the browser
css.types.image.gradient.repeating-conic-gradient.hue_interpolation_method
BCD tables only load in the browser
css.types.image.gradient.repeating-linear-gradient.hue_interpolation_method
BCD tables only load in the browser
css.types.image.gradient.repeating-radial-gradient.hue_interpolation_method
BCD tables only load in the browser