<named-color>

名前付きの色は標準色、transparent、currentcolor のキーワードです。

標準色

基本色には、標準的で覚えやすい名前があります。

この 16 色に加えて、これに関する約 150 色にキーワードがあります。

当初、 CSS Level 1 では 16 の基本色のみが定義され、 CSS Level 2 では orange が追加されました。ウェブデザイナーはこのリストが短すぎることに気づき、ブラウザーベンダーは X11の色名をもとに多数の色の名前を追加しました。 SVG 1.0、そして CSS Colors Level 3 で、これらの名前は標準化され、正式に定義され、統一されました（これで別名となった異なる綴りのものもあります）。これらは拡張色キーワード、X11 色、SVG 色と呼ばれます。

CSS Colors Level 4 では、ウェブのパイオニア Eric Meyer に敬意を表して、 rebeccapurple という色が追加されました。

transparent

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

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

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

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

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

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

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

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

HTML

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

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

結果

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