<color>
=======

**`<color>`** は CSS のデータ型で、一つの色を表します。
 `<color>` はアルファチャネルの*透過値*を含むことがあり、この色を背景とどれだけ混合するかを示すこともできます。

**メモ:** `<color>` の色は詳細に定義されていますが、出力機器によって（時には著しく）違って見えるかもしれません。出力機器の大半は色補正がされておらず、ブラウザーによっては出力機器の色プロファイルに対応していないからです。

構文
--


```css
/\* 名前付きの色 \*/
rebeccapurple
aliceblue

/\* RGB 16 進値 \*/
#f09
#ff0099

/\* RGB (Red, Green, Blue) \*/
rgb(255 0 153)
rgb(255 0 153 / 80%)

/\* HSL (Hue, Saturation, Lightness) \*/
hsl(150 30% 60%)
hsl(150 30% 60% / 0.8)

/\* HWB (Hue, Whiteness, Blackness) \*/
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/\* LAB (Lightness, A-axis, B-axis) \*/
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/\* LCH (Lightness, Chroma, Hue) \*/
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/\* Oklab (Lightness, A-axis, B-axis) \*/
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/\* Oklch (Lightness, Chroma, Hue) \*/
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/\* light-dark \*/
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))
```


`<color>` は以下の何れかの方法で定義することができます。

* キーワード: `<named-color>` （`blue` や `pink` など）、`<system-color>`、`currentcolor`
* 16 進記法: `<hex-color>` （`#ff0000` など）
* 色空間の引数を関数記法を使用して:
    + sRGB 色空間: `hsl()`, `hwb()`, `rgb()`
    + CIELAB 色空間: `lab()`, `lch()`
    + Oklab 色空間: `oklab()`, `oklch()`
    + その他の色空間: `color()`
* 2 色の混合: `color-mix()`
* 2 つの色の指定。 1 つ目の色は明るいカラースキームに、 2 つ目は暗いカラースキームに使用: `light-dark()`
### currentcolor キーワード

`currentcolor` キーワードは、要素の `color` プロパティの値を表します。これで `color` の値をプロパティが既定で受け取らなくても利用することができます。

`currentcolor` が `color` プロパティの値として使用された場合、 `color` プロパティが継承した値が使用されます。


```html
<div style="color: blue; border: 1px dashed currentcolor;">
  この文字列の色は青です。
  <div style="background: currentcolor; height:9px;"></div>
  このブロックは青い境界線で囲まれています。
</div>
```

### 色成分の欠落

CSS 色関数の各成分（古いカンマ区切り文字を使用するものを除く）は、キーワード `none` を指定することで、欠落成分として指定することができます。

色の補間 では、一部の色成分を補間したいが他の色成分は補間したくない場合に、欠落成分を明示的に指定するのに有益です。ほかはすべて、欠落した成分は適切な単位で値がゼロになります（`0`、`0%`、`0deg` など）。例えば、次の例は補間以外で使用しても等価な色です。


```css
/\* これらは等価 \*/
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);

/\* これらは等価 \*/
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);
```

補間
--

色の補間はグラデーション、トランジション、アニメーションで発生します。

`<color>` 値を補完する場合、まずは色が指定された色空間へ変換され、その計算値のそれぞれの成分が直線状に補間され、補間の速度はトランジションやアニメーションではイージング関数で定められます。
 補間色空間の既定値は Oklab ですが、一部の色関連の関数記法では `<color-interpolation-method>` で上書きできます。

### 成分が欠落した補間

#### 同じ色空間での色の補間

 補間色空間内に正確に収まる色を補間するときは、一方の色から欠落している部品は、他の色から持っ ている同じ成分の値に置き換えられます。
 例えば、 次の 2 つの表現は等価です。


```css
color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))
```


**メモ:** 両方の色から成分が欠落している場合、この成分は補間後に欠落します。

#### 異なる色空間からの色の補間: 類似成分

補間される色が補間色空間にない場合は、以下の表に記述されているように、同じカテゴリーの**類似成分**に基づいて、その欠落した成分が変換後の色に変換されます。

| カテゴリー | 類似成分 |
| --- | --- |
| 赤 | `R`, `X` |
| 緑 | `G`, `Y` |
| 青 | `B`, `Z` |
| 明度 | `L` |
| 彩度 | `C`, `S` |
| 色相 | `H` |
| a | `a` |
| b | `b` |

例

* `color(xyz 0.2 0.1 0.6)` における `X` (`0.2`) は `rgb(50% 70% 30%)` における `R` (`50%`) の類似です。
* `hsl(0deg 100% 80%)` における `H` (`0deg`) は `oklch(80% 0.1 140)` における `H` (`140`) の類似です。

補間色空間として Oklch を使用し、下記の 2 色を例とします。


```css
lch(80% 30 none)
color(display-p3 0.7 0.5 none)
```


前処理の手順は次の通りです。

1. 両方の色で欠けている成分をゼロ値で置き換えます。

```css
lch(80% 30 0)
color(display-p3 0.7 0.5 0)
```

2. 両方の色を補間色空間に変換します。

```css
oklch(83.915% 0.0902 0.28)
oklch(63.612% 0.1522 78.748)
```

3. 変換された色の成分が、対応する元の色の欠落した成分と類似している場合は、欠落した成分としてリセットします。

```css
oklch(83.915% 0.0902 none)
oklch(63.612% 0.1522 78.748)
```

4. 欠落している部品は、他の変換された色の同じ部品で置き換えます。

```css
oklch(83.915% 0.0902 78.748)
oklch(63.612% 0.1522 78.748)
```

アクセシビリティの考慮
-----------

色を見分けることが難しい人がいます。 WCAG 2.2 (en-US) 勧告では、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは色と色のコントラスト (en-US)をご覧ください。

形式文法
----
```

<color> =   
  <absolute-color-base>  |  
  currentcolor           |  
  <system-color>           
  
<absolute-color-base> =   
  <hex-color>                |  
  <absolute-color-function>  |  
  <named-color>              |  
  transparent                  
  
<absolute-color-function> =   
  <rgb()>    |  
  <rgba()>   |  
  <hsl()>    |  
  <hsla()>   |  
  <hwb()>    |  
  <lab()>    |  
  <lch()>    |  
  <oklab()>  |  
  <oklch()>  |  
  <color()>    
  
<rgb()> =   
  <legacy-rgb-syntax>  |  
  <modern-rgb-syntax>    
  
<rgba()> =   
  <legacy-rgba-syntax>  |  
  <modern-rgba-syntax>    
  
<hsl()> =   
  <legacy-hsl-syntax>  |  
  <modern-hsl-syntax>    
  
<hsla()> =   
  <legacy-hsla-syntax>  |  
  <modern-hsla-syntax>    
  
<hwb()> =   
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<lab()> =   
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<lch()> =   
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<oklab()> =   
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<oklch()> =   
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<color()> =   
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )    
  
<legacy-rgb-syntax> =   
  rgb( <percentage>#{3} , <alpha-value>? )  |  
  rgb( <number>#{3} , <alpha-value>? )        
  
<modern-rgb-syntax> =   
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )    
  
<legacy-rgba-syntax> =   
  rgba( <percentage>#{3} , <alpha-value>? )  |  
  rgba( <number>#{3} , <alpha-value>? )        
  
<modern-rgba-syntax> =   
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )    
  
<legacy-hsl-syntax> =   
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )    
  
<modern-hsl-syntax> =   
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<legacy-hsla-syntax> =   
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )    
  
<modern-hsla-syntax> =   
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<hue> =   
  <number>  |  
  <angle>     
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
<colorspace-params> =   
  <predefined-rgb-params>  |  
  <xyz-params>               
  
<predefined-rgb-params> =   
  <predefined-rgb> [ <number> | <percentage> | none ]{3}    
  
<xyz-params> =   
  <xyz-space> [ <number> | <percentage> | none ]{3}    
  
<predefined-rgb> =   
  srgb          |  
  srgb-linear   |  
  display-p3    |  
  a98-rgb       |  
  prophoto-rgb  |  
  rec2020         
  
<xyz-space> =   
  xyz      |  
  xyz-d50  |  
  xyz-d65    
  
```

例
-

### 色の値のテスター

この例では、 `<div>` とテキスト入力を用意しています。入力欄に有効な色を入力すると、 `<div>` にその色が採用され、色の値をテストすることができます。

#### HTML


```html
<div></div>
<hr />
<label for="color">有効な色の値を入力してください:</label>
<input type="text" id="color" />
```


```
div {
  height: 200px;
  width: 200px;
}
```


```
const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "inherit" || stringToTest === "transparent") {
    return false;
  }

  const div = document.createElement("div");
  div.style.color = stringToTest;
  return !!div.style.color;
}

inputElem.addEventListener("input", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.removeAttribute("style");
    divElem.textContent = "Invalid color value";
  }
});
```


#### 結果

### 彩度最高の色

この例では、 sRGB 色空間で彩度が最高の sRGB 色を表示させています。

#### HTML


```html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```


#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}
```



```css
div:nth-child(1) {
  background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
  background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
  background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
  background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
  background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
  background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
  background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
  background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
  background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
  background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
  background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
  background-color: hsl(330 100% 50%);
}
```


#### 結果

### さまざまな明度の赤

この例では、 sRGB 色空間で様々な明度の赤を表示しています。

#### HTML


```html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```


#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  box-sizing: border-box;
  height: 80px;
  margin: 10px;
  width: 80px;
}
```



```css
div:nth-child(1) {
  background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
  background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
  background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
  background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
  background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 100%);
  border: solid;
}
```


#### 結果

### 様々な彩度の赤

この例では、 sRGB 色空間でさまざまな彩度の赤を表示させています。

#### HTML


```html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```


#### CSS
```

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  height: 80px;
  margin: 10px;
  width: 80px;
}
```



```css
div:nth-child(1) {
  background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
  background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
  background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
  background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
  background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
  background-color: hsl(0 100% 50%);
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # color-syntax |

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

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

関連情報
----

* `opacity` プロパティは要素レベルで色の透明度を定義できます。
* `<hue>` データ型は色を色相関で表します。
* このデータ型を使用するよく使われるプロパティ: `color`, `background-color`, `border-color`, `box-shadow`, `outline-color`, `text-shadow`
* CSS を使った HTML の要素への色の適用
* New functions, gradients, and hues in CSS colors (Level 4) (MDN blog, 2023)