<named-color>
=============

**`<named-color>`** は CSS のデータ型で、 `red`, `blue`, `black`, `lightseagreen` のような色の名前です。文法的には、 `<named-color>` は `<ident>` の一種です。

`<named-color>` 値は `<color>` が使用できる場所ではどこでも使用できます。

構文
--


```css
color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;
```

### 値

#### CSS Level 1 の値

CSS Level 1 では基本的な 16 色しか記載されておらず、 VGA グラフィックカードの表示可能な色の集合から取られたため、 VGA カラーと呼ばれています。

| キーワード | RGB 16 進値 | サンプル |
| --- | --- | --- |
| `black` | `#000000` |  |
| `silver` | `#c0c0c0` |  |
| `gray` | `#808080` |  |
| `white` | `#ffffff` |  |
| `maroon` | `#800000` |  |
| `red` | `#ff0000` |  |
| `purple` | `#800080` |  |
| `fuchsia` | `#ff00ff` |  |
| `green` | `#008000` |  |
| `lime` | `#00ff00` |  |
| `olive` | `#808000` |  |
| `yellow` | `#ffff00` |  |
| `navy` | `#000080` |  |
| `blue` | `#0000ff` |  |
| `teal` | `#008080` |  |
| `aqua` | `#00ffff` |  |

### CSS Level 2 の値

以下の値が CSS Level 2 で定義されています。

| キーワード | RGB 16 進値 | サンプル |
| --- | --- | --- |
| `orange` | `#ffa500` |  |

### CSS Level 3 の値

初期のブラウザーでは仕様にない様々な色（ほとんどは X11 colors list からの転用）が対応していましたが、正式に定義されたのは SVG 1.0 と CSS Colors Level 3 からでした。これらは、拡張色キーワード、 X11 カラー、SVG カラーと呼ばれます。

| キーワード | RGB 16 進値 | サンプル |
| --- | --- | --- |
| `aliceblue` | `#f0f8ff` |  |
| `antiquewhite` | `#faebd7` |  |
| `aquamarine` | `#7fffd4` |  |
| `azure` | `#f0ffff` |  |
| `beige` | `#f5f5dc` |  |
| `bisque` | `#ffe4c4` |  |
| `blanchedalmond` | `#ffebcd` |  |
| `blueviolet` | `#8a2be2` |  |
| `brown` | `#a52a2a` |  |
| `burlywood` | `#deb887` |  |
| `cadetblue` | `#5f9ea0` |  |
| `chartreuse` | `#7fff00` |  |
| `chocolate` | `#d2691e` |  |
| `coral` | `#ff7f50` |  |
| `cornflowerblue` | `#6495ed` |  |
| `cornsilk` | `#fff8dc` |  |
| `crimson` | `#dc143c` |  |
| `cyan`(synonym of `aqua`) | `#00ffff` |  |
| `darkblue` | `#00008b` |  |
| `darkcyan` | `#008b8b` |  |
| `darkgoldenrod` | `#b8860b` |  |
| `darkgray` | `#a9a9a9` |  |
| `darkgreen` | `#006400` |  |
| `darkgrey` | `#a9a9a9` |  |
| `darkkhaki` | `#bdb76b` |  |
| `darkmagenta` | `#8b008b` |  |
| `darkolivegreen` | `#556b2f` |  |
| `darkorange` | `#ff8c00` |  |
| `darkorchid` | `#9932cc` |  |
| `darkred` | `#8b0000` |  |
| `darksalmon` | `#e9967a` |  |
| `darkseagreen` | `#8fbc8f` |  |
| `darkslateblue` | `#483d8b` |  |
| `darkslategray` | `#2f4f4f` |  |
| `darkslategrey` | `#2f4f4f` |  |
| `darkturquoise` | `#00ced1` |  |
| `darkviolet` | `#9400d3` |  |
| `deeppink` | `#ff1493` |  |
| `deepskyblue` | `#00bfff` |  |
| `dimgray` | `#696969` |  |
| `dimgrey` | `#696969` |  |
| `dodgerblue` | `#1e90ff` |  |
| `firebrick` | `#b22222` |  |
| `floralwhite` | `#fffaf0` |  |
| `forestgreen` | `#228b22` |  |
| `gainsboro` | `#dcdcdc` |  |
| `ghostwhite` | `#f8f8ff` |  |
| `gold` | `#ffd700` |  |
| `goldenrod` | `#daa520` |  |
| `greenyellow` | `#adff2f` |  |
| `grey` | `#808080` |  |
| `honeydew` | `#f0fff0` |  |
| `hotpink` | `#ff69b4` |  |
| `indianred` | `#cd5c5c` |  |
| `indigo` | `#4b0082` |  |
| `ivory` | `#fffff0` |  |
| `khaki` | `#f0e68c` |  |
| `lavender` | `#e6e6fa` |  |
| `lavenderblush` | `#fff0f5` |  |
| `lawngreen` | `#7cfc00` |  |
| `lemonchiffon` | `#fffacd` |  |
| `lightblue` | `#add8e6` |  |
| `lightcoral` | `#f08080` |  |
| `lightcyan` | `#e0ffff` |  |
| `lightgoldenrodyellow` | `#fafad2` |  |
| `lightgray` | `#d3d3d3` |  |
| `lightgreen` | `#90ee90` |  |
| `lightgrey` | `#d3d3d3` |  |
| `lightpink` | `#ffb6c1` |  |
| `lightsalmon` | `#ffa07a` |  |
| `lightseagreen` | `#20b2aa` |  |
| `lightskyblue` | `#87cefa` |  |
| `lightslategray` | `#778899` |  |
| `lightslategrey` | `#778899` |  |
| `lightsteelblue` | `#b0c4de` |  |
| `lightyellow` | `#ffffe0` |  |
| `limegreen` | `#32cd32` |  |
| `linen` | `#faf0e6` |  |
| `magenta`(synonym of `fuchsia`) | `#ff00ff` |  |
| `mediumaquamarine` | `#66cdaa` |  |
| `mediumblue` | `#0000cd` |  |
| `mediumorchid` | `#ba55d3` |  |
| `mediumpurple` | `#9370db` |  |
| `mediumseagreen` | `#3cb371` |  |
| `mediumslateblue` | `#7b68ee` |  |
| `mediumspringgreen` | `#00fa9a` |  |
| `mediumturquoise` | `#48d1cc` |  |
| `mediumvioletred` | `#c71585` |  |
| `midnightblue` | `#191970` |  |
| `mintcream` | `#f5fffa` |  |
| `mistyrose` | `#ffe4e1` |  |
| `moccasin` | `#ffe4b5` |  |
| `navajowhite` | `#ffdead` |  |
| `oldlace` | `#fdf5e6` |  |
| `olivedrab` | `#6b8e23` |  |
| `orangered` | `#ff4500` |  |
| `orchid` | `#da70d6` |  |
| `palegoldenrod` | `#eee8aa` |  |
| `palegreen` | `#98fb98` |  |
| `paleturquoise` | `#afeeee` |  |
| `palevioletred` | `#db7093` |  |
| `papayawhip` | `#ffefd5` |  |
| `peachpuff` | `#ffdab9` |  |
| `peru` | `#cd853f` |  |
| `pink` | `#ffc0cb` |  |
| `plum` | `#dda0dd` |  |
| `powderblue` | `#b0e0e6` |  |
| `rosybrown` | `#bc8f8f` |  |
| `royalblue` | `#4169e1` |  |
| `saddlebrown` | `#8b4513` |  |
| `salmon` | `#fa8072` |  |
| `sandybrown` | `#f4a460` |  |
| `seagreen` | `#2e8b57` |  |
| `seashell` | `#fff5ee` |  |
| `sienna` | `#a0522d` |  |
| `skyblue` | `#87ceeb` |  |
| `slateblue` | `#6a5acd` |  |
| `slategray` | `#708090` |  |
| `slategrey` | `#708090` |  |
| `snow` | `#fffafa` |  |
| `springgreen` | `#00ff7f` |  |
| `steelblue` | `#4682b4` |  |
| `tan` | `#d2b48c` |  |
| `thistle` | `#d8bfd8` |  |
| `tomato` | `#ff6347` |  |
| `transparent` | See transparent. |  |
| `turquoise` | `#40e0d0` |  |
| `violet` | `#ee82ee` |  |
| `wheat` | `#f5deb3` |  |
| `whitesmoke` | `#f5f5f5` |  |
| `yellowgreen` | `#9acd32` |  |
|

#### transparent

`transparent` は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密には、`transparent` は `rgba(0,0,0,0)` のショートカットです。

`グラデーション`の場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は `transparent` をアルファ乗算色空間で計算するように定めています。しかし、古いブラウザーはアルファチャンネルが `0` の値である黒として扱うかもしれません。

`transparent` キーワードは CSS Level 2 (Revision 1) では色ではありませんでした。これは `background` プロパティと `border` プロパティの 2 つにおいて、通常の `<color>` の代わりに使用することができた特殊なキーワードでした。基本的に、継承された色を開発者が上書きすることができるように追加されたものです。 CSS Colors Level 3 でアルファチャンネルが出現し、 `transparent` は色として再定義されました。 `<color>` の値を使用することができる場所ならば、どこでも使用することができるようになりました。

### CSS Level 4 の値

CSS Colors Level 4 では、 `rebeccapurple` キーワードが追加されました（ウェブの先達であるエリックメイヤーに敬意を表して）。

| キーワード | RGB 16 進値 | サンプル |
| --- | --- | --- |
| `rebeccapurple` | `#663399` |  |

解説
--

すべての名前は、sRGB 色空間における色を指定します。名前は多かれ少なかれそれぞれの色を記述していますが、使用される用語の背後にある厳密な根拠はなく、基本的に人為的なものです。

色のキーワードはすべて透明度のない無地の色を表します。

一部のキーワードは、他にも別名があります。

* `aqua` / `cyan`
* `fuchsia` / `magenta`
* `darkgray` / `darkgrey`
* `darkslategray` / `darkslategrey`
* `dimgray` / `dimgrey`
* `lightgray` / `lightgrey`
* `lightslategray` / `lightslategrey`
* `gray` / `grey`
* `slategray` / `slategrey`

多くのキーワードは X11 のものを保有していますが、メーカーが X11 の色を特定のハードウェアに合わせて調整することがあるため、その RGB 値は X11 システム上の対応する色とは異なる場合があります。

例
-

### 色キーワードの使用

#### HTML


```html
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>
```


#### CSS


```css
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Color Module Level 4 # named-colors |

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

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

関連情報
----

* `<color>`: その定義である `<named-color>` を構成要素とするデータ型です。