<hue>
<hue> は CSS のデータ型で、色の色相角を表します。
これは、色相を 1 つの値として受け入れる色関数、具体的には hsl()、 hwb()、lch()、oklch() 関数記法で使用されます。
構文
<hue> は <angle> または <number> のどちらかになります。
値
<angle> は周期的なので、 <hue> は範囲 [0deg, 360deg) に正規化されます。 480deg は 120deg と同じ、 -120deg は 240deg と同じ、 -1turn は 1turn と同じ、といった具合に暗黙のうちに折り返されます。
解説
上の色相環は sRGB 色空間におけるすべての角度の色相を表示させています。具体的な例では、赤は 0deg、黄は 60deg、ライムは 120deg、シアンは 180deg、青は 240deg、マゼンタは 300deg です。
特定の色相に対応する角度は色空間によって異なります。例えば、 sRGB の緑の色相角は、 sRGB 色空間では 120deg ですが、 CIELAB 色空間では 134.39deg です。
以下の表は、 sRGB （hsl() および hwb()）、 CIELAB （lch() で用いる）、 Oklab （oklch()）の色空間での主な色を示します。
| 0° | 60° | 120° | 180° | 240° | 300° | |
|---|---|---|---|---|---|---|
| sRGB | ||||||
| CIELAB | ||||||
| Oklab |
<hue> 値の補間
<hue> 値は <angle> 値として補間され、既定では shorter となります。色関連の CSS 関数の中には、<hue-interpolation-method> 成分によってこれを上書きできるものもあります。
形式文法
<hue> =
<number> |
<angle>
例
スライダーを使用して色の色相を変更
以下の例は、 hsl() 関数記法の hue 値を色に変更したときの効果を示しています。
HTML
<input type="range" min="0" max="360" value="0" id="hue-slider" />
<p>色相: <span id="hue-value">0deg</span></p>
<div id="box"></div>
CSS
#box {
background-color: hsl(0 100% 50%);
}
JavaScript
const hue = document.querySelector("#hue-slider");
const box = document.querySelector("#box");
hue.addEventListener("input", () => {
box.style.backgroundColor = `hsl(${hue.value} 100% 50%)`;
document.querySelector("#hue-value").textContent = `${hue.value}deg`;
});
結果
さまざまな色空間における赤の色相の近似値
次の例は、異なる色空間で同じような赤色を示しています。
lch() と oklch() 関数の値は読みやすいように丸めてあります。
HTML
<div data-color="hsl-red">hsl()</div>
<div data-color="hwb-red">hwb()</div>
<div data-color="lch-red">lch()</div>
<div data-color="oklch-red">oklch()</div>
CSS
[data-color="hsl-red"] {
/* hsl(<hue> <saturation> <lightness>) */
background-color: hsl(0 100% 50%);
}
[data-color="hwb-red"] {
/* hwb(<hue> <whiteness> <blackness>) */
background-color: hwb(0 0% 0%);
}
[data-color="lch-red"] {
/* lch(<lightness> <chroma> <hue>) */
background-color: lch(50 150 40);
}
[data-color="oklch-red"] {
/* oklch(<lightness> <chroma> <hue>) */
background-color: oklch(0.6 0.4 20);
}
結果
仕様書
| Specification |
|---|
| CSS Color Module Level 4 # typedef-hue |