このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<hue-interpolation-method>
Baseline 2024Newly available
Since June 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
<hue-interpolation-method> はCSS のデータ型で、<hue> 値間の補間に用いるアルゴリズムを表します。補間方法は、色相環に基づいて 2 つの色相値の中間点を探す方法を指定します。これは<color-interpolation-method> データ型の成分として使用します。
<hue> 値を補間する場合、色相補間アルゴリズムはshorter が既定値です。
構文
<hue-interpolation-method> 値は色相補間アルゴリズムの名前にリテラルトークンhue が続くものです。
shorter huelonger hueincreasing huedecreasing 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 = 45degdecreasing反時計回りの弧を使用します。 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> <p>HSL</p></div><div> <p>HSL increasing</p></div><div> <p>HSL decreasing</p></div><div> <p>HSL shorter</p></div><div> <p>HSL longer</p></div><div> <p>HSL named</p></div><div> <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);}結果
仕様書
| Specification |
|---|
| CSS Color Module Level 4 # hue-interpolation |