<hue>

Baseline 2023

Newly available

Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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()）の色空間での主な色を示します。

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

構文

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

値

<angle>: deg、grad、rad、turn をそれぞれ使用して、度、グラジアン、ラジアン、回転で表される角度。
<number>: 色相角の度数を表す実数。

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

補間

<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

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}
p {
  font-family: sans-serif;
}
span {
  font-family: monospace;
  background: rgb(0 0 0 / 0.1);
  padding: 3px;
}
#hue-slider {
  width: 90%;
}

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

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);
}

div {
  font-family: monospace;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
  display: inline-block;
}

結果

仕様書

Specification
CSS Color Module Level 4 # typedef-hue

<hue>

Baseline 2023

構文

値

補間

形式文法

例

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

HTML

CSS

JavaScript

結果

さまざまな色空間における赤の色相の近似値

HTML

CSS

結果

仕様書

ブラウザーの互換性

css.types.color.hsl

css.types.color.hwb

css.types.color.lch

css.types.color.oklch

関連情報