CSSのプロパティで色を指定するには、キーワードまたはカラーコードを記述します。

キーワード

要素の色を指定するキーワードには、以下の16色の基本色が定義されています。また、透明色、色の継承を表すキーワードが定義されています。

CSS Color Module Level 3では基本色の他に、Webにおける画像の記述方法を規定する仕様であるSVG1.0（Scalable Vector Graphics 1.0）に対応した147色のカラーネームを定義しています。多くのブラウザーはこれらのキーワードに対応しており、値として指定可能です。

black	黒色です。rgb(0,0,0)、#000000と同じです。
white	要素のフォントサイズに対応した単位です。親要素のフォントサイズが16pxであれば、1emは16pxと同じサイズになります。
silver	銀色です。rgb(192,192,192）、#c0c0c0と同じです。
gray	灰色です。rgb(128,128,128)、#808080と同じです。
red	赤色です。rgb(255,0,0)、#ff0000と同じです。
maroon	赤茶色です。rgb(128,0,0)、#800000と同じです。
purple	紫色です。rgb(128,0,128)、#800080と同じです。
fuchsia	赤紫色です。rgb(255,0,255)、#ff00ffと同じです。
green	緑色です。rgb(0,128,0)、#008000と同じです。
lime	黄緑色です。rgb(0,255,0)、#00ff00と同じです。
yellow	黄色です。rgb(255,255,0)、#ffff00と同じです。
olive	暗い黄色です。rgb(128,128,0)、#808000と同じです。
bule	青色です。rgb(0,0,255)、#0000ffと同じです。
navy	濃い青色です。rgb(0,0,128)、#000080と同じです。
aqua	水色です。rgb(0,255,255)、#00ffffと同じです。
teal	青緑色です。rgb(0,128,128)、#008080と同じです。
transparent	完全な透明を表します。
currentcolor	colorプロパティで指定されている色を参照します。box-shadowプロパティやborder系、outline系、background系のプロパティで使用できます。

RGBモデル

RGBモデルは、赤（Red）、緑(Green)、青(Blue)の３つの値の組み合わせで色を指定します。「関数記法」と「16進記法」の2つの記法があります。

rgb()	関数型の値です。0～255までの数値、または％値をカンマ（,）で区切って3つ指定します。rgb(255,0,0）、rgb(100%,0%,0%）は赤となります。
rgba()	関数型の値です。rgb()に加えて、4つ目の値で透明度を指定できます。0が完全な透明で、1が完全な不透明です。rgba(255,0,0,0.5)は、透明度50%の赤です。
#RRGGBB	シャープ（#）に続けて16進数（0～f）で6つの数値を指定します。「#ff0000」は赤となります。
#RGB	シャープ（#）に続けて3つの16進数を指定します。3桁の数値は2桁ずつ同値の「#RRGGBB」形式に変換されます。「#f00」は「#ff0000」となり、赤となります。

HSLモデル

HSLモデルは色の種類である「色相」（Hue）、鮮やかさである「彩度」（Saturation）、明るさである「明度」（Lightness）の3つの値の組み合わせで色を指定します。

HSLモデルにおける色相は色相環（赤を0度として時計回りに黄、緑、青紫、赤の順に360度で変化する）に対応しています。おおよその色の対応は、赤：0度、黄：90度、緑：180度、青紫：270度です。彩度は0%に近づくほど色がくすんで見え、100%に近づくほどはっきりして見えます。また、明度は0%に近づくほど色が暗く見え、100%に近づくほど明るく見えます。

hsl()	関数型の値です。0～360までの数値で色相を、%値で彩度、明度をそれぞれカンマ（,）で区切って指定します。
hsla()	関数型の値です。hsl()に加えて、4つ目の値で透明度を指定できます。0が完全な透明で、1が完全な不透明です。

関連記事

• CSSにおける単位付きの数値の指定方法