<hue>
<hue>
は CSS のデータ型で、色の色相角を表します。
これは、色相を 1 つの値として受け入れる色関数、具体的には hsl()
、 hwb()
、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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
hsl() (HSL color model) | ||||||||||||
Alpha parameter | ||||||||||||
Mix <percentage> and <number> in parameters | ||||||||||||
Relative HSL colors | ||||||||||||
Space-separated parameters |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Has more compatibility info.
css.types.color.hwb
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
hwb() (HWB color model) | ||||||||||||
Mix <percentage> and <number> in parameters | ||||||||||||
Relative HWB colors |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Has more compatibility info.
css.types.color.lch
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
lch() (LCH color model) | ||||||||||||
Mix <percentage> and <number> in parameters | ||||||||||||
Relative LCH colors |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Has more compatibility info.
css.types.color.oklch
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
oklch() (OKLCH color model) | ||||||||||||
Mix <percentage> and <number> in parameters | ||||||||||||
Relative Oklch colors |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Has more compatibility info.