<hue>
=====

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

![sRGB 色相環](/ja/docs/Web/CSS/hue/color_wheel.svg)

上の色相環は 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


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


```
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 |

ブラウザーの互換性
---------

### css.types.color.hsl

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.types.color.hwb

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.types.color.lch

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.types.color.oklch

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<color>`
* `<hue-interpolation-method>`