<hue>
The <hue>
は CSS のデータ型で、色の色相角を表します。
これは、色相を 1 つの値として受け入れる色関数、具体的には hsl()
で使用します、 hwb()](/ja/docs/Web/CSS/color_value/hwb)、[
lch()](/ja/docs/Web/CSS/color_value/lch)、[
oklch()` 関数記法で使用されます。
上の色相環は 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>
は <angle>
または <number>
のどちらかになります。
値
補間
<hue>
値は <angle>
値として補間され、既定では shorter
となります。色関連の CSS 関数の中には、<hue-interpolation-method>
成分によってこれを上書きできるものもあります。
形式文法
例
スライダーを使用して色の色相を変更
以下の例は、 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 |
ブラウザーの互換性
css.types.color.hsl
BCD tables only load in the browser
css.types.color.hwb
BCD tables only load in the browser
css.types.color.lch
BCD tables only load in the browser
css.types.color.oklch
BCD tables only load in the browser