<hue>

The <hue>CSSデータ型で、色の色相角を表します。 これは、色相を 1 つの値として受け入れる色関数、具体的には hsl() で使用します、 hwb()](/ja/docs/Web/CSS/color_value/hwb)、[lch()](/ja/docs/Web/CSS/color_value/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

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

関連情報