CSS の色は、次の方法で指定することができます：
16進カラーの値は、主要なすべてのブラウザがサポートしてています。
16進カラーは、#RRGGBBで指定します。RR (赤)、GG (緑)、BB (青) は、16進数で色の成分を指定します。 すべての値は、0 と FF の間になければなりません。
例えば、#0000ff は、青の成分が最も大きな値 (ff) で、その他が 0 に設定されているため、青色で表示されます。
いろいろな HEX カラーの定義：
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Try it Yourself ❯
RGB カラー値は、主要なすべてのブラウザがサポートしています。
RGB カラー値は、rgb(red, green, blue) で指定します。各パラメータ (red、green、blue) は色の強度を定義し、 0〜255 またはパーセント値（0％〜100％）を指定することができます。
例えば、rgb(0,0,255) は、青のパラメータが最も大きな値（256）に、その他が0に設定されているため、 青色で表示されます。
また、rgb(0,0,255) と rgb(0%,0%,100%) は同じ色を定義しています。
いろいろな RGB カラーの定義：
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
Try it Yourself ❯
RGBA カラー値は、IE9+、Firefox 3+、Chrome、Safari、Opera 10+ がサポートしています。
RGBA カラー値は、アルファチャンネル（オブジェクトの不透明度を指定する）で RGB カラー値を拡張したものです。
RGBA カラー値は、rgba(red, green, blue, alpha) で指定します。 alpha パラメータは、0.0（完全に透明）～1.0（完全に不透明）の間の数です。
不透明度を持ついろいろな RGB カラーの定義：
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
Try it Yourself ❯
HSL カラー値は、IE9+、Firefox、Chrome、Safari、Opera10+ がサポートしています。
HSL は、hue（色相）、saturation（彩度）、lightness（明度）の略です - 色の円筒座標表現を表します。
HSL カラー値は、hsl(hue, saturation, lightness) で指定します。
hue（色相）は、カラーホイール（色相環、0〜360）上の度数です - 0 (または 360) は赤、 120 は緑、240 は青です。Saturation（彩度）は、パーセント値で、0％ はモノクロを、100% はフルカラーを意味します。 Lightness（明度）も、パーセント値で、 0% は黒、100% は白です。
いろいろな HSL カラーの定義：
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Try it Yourself ❯
HSLA カラー値は、IE9+、Firefox 3+、Chrome、Safari、Opera 10+ がサポートしています。
HSLA カラー値は、アルファチャンネル（オブジェクトの不透明度を指定する）でHSL カラー値を拡張したものです。
HSLA カラー値は、hsla(hue, saturation, lightness, alpha) で指定します。alpha パラメータは不透明度を定義します。 alpha パラメータは0.0（完全に透明）から1.0（完全に不透明）の間の数です。
不透明度を持ついろいろな HSL カラーの定義：
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
Try it Yourself ❯
140 の色名は、HTML と CSS カラー仕様で事前に定義されています。 定義済み色名をご覧ください。