<hue>

<hue>CSSデータ型で、色の色相角を表します。 これは、色相を 1 つの値として受け入れる色関数、具体的には hsl()hwb()lch()oklch() 関数記法で使用されます。

sRGB 色相環

上の色相環は sRGB 色空間におけるすべての角度の色相を表示させています。具体的な例では、赤は 0deg、黄は 60deg、ライムは 120deg、シアンは 180deg、青は 240deg、マゼンタは 300deg です。

メモ: 具体的な色相に対応する角度は色空間によって異なります。例えば、 sRGB の緑の色相角は、 sRGB 色空間では 120deg ですが、 CIELAB 色空間では 134.39deg です。

以下の表は、 sRGB (hsl() および hwb())、 CIELAB (lch() で用いる)、 Oklab (oklch())の色空間での主な色を示します。

60° 120° 180° 240° 300°
sRGB
CIELAB
Oklab

構文

<hue><angle> または <number> のどちらかになります。

<angle>

deggradradturn をそれぞれ使用して、度、グラジアン、ラジアン、回転で表される角度。

<number>

色相角の度数を表す実数。

<angle> は周期的なので、 <hue> は範囲 [0deg, 360deg) に正規化されます。 480deg120deg と同じ、 -120deg240deg と同じ、 -1turn1turn と同じ、といった具合に暗黙のうちに折り返されます。

補間

<hue> 値は <angle> 値として補間され、既定では shorter となります。色関連の CSS 関数の中には、<hue-interpolation-method> 成分によってこれを上書きできるものもあります。

形式文法

<hue> = 
<number> |
<angle>

スライダーを使用して色の色相を変更

以下の例は、 hsl() 関数記法の hue 値を色に変更したときの効果を示しています。

HTML

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

css
#box {
  background-color: hsl(0 100% 50%);
}

JavaScript

js
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

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

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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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.

関連情報