1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. 値
  5. <hue>

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

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

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>
この構文は CSS Color Module Level 4 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

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

以下の例は、 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

css.types.color.hwb

css.types.color.lch

css.types.color.oklch

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

AltStyle によって変換されたページ (->オリジナル) /