<named-color>

CSS Level 1 の値

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

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

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

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

すべての名前は、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> を構成要素とするデータ型です。