• 説明
• サポート状況
• 色名指定
• RGB(Red-Green-Blue)-A(Aplha-value)指定
• rgb(R G B [/ A])
• hsl(H S L [/ A])
• hwb(H W B [/ A])
• lab(L a b [/ A])
• lch(L C H [/ A])
• oklab(L a b [/ A])
• oklch(L C H [/ A])
• color(CS C1 C2 C3 [/ A])
• color-mix(M, C1[ P1], C2[ P2])
• 特別な色名
• 色名
  • 基本色名(16色)
  • 拡張色名(147色)
  • レベッカパープル(rebeccapurple)
  • システムカラー
  • Webセーフカラー(216色)

テキストやボーダーラインなどの色を指定します。

h1 { color: red; }
h1 { color: #f00; }
h1 { color: #f000; }
h1 { color: #ff0000; }
h1 { color: #ff000000; }
h1 { color: rgb(255 0 0); }
h1 { color: rgb(255 0 0 / 0.5); }
h1 { color: hsl(0 100% 50%); }
h1 { color: hsl(0 100% 50% / 0.5); }
h1 { color: hwb(90 100% 50%); }
h1 { color: hwb(90 100% 50% / 0.5); }
h1 { color: lab(20% 160 0); }
h1 { color: lab(20% 160 0 / 0.5); }
h1 { color: lch(50% 230 180); }
h1 { color: lch(50% 230 180 / 0.5); }
h1 { color: oklab(50% 0.5 0.5); }
h1 { color: oklab(50% 0.5 0.5 / 0.5); }
h1 { color: oklch(50% 0.2 180); }
h1 { color: oklch(50% 0.2 180 / 0.5); }
h1 { color: color(display-p3 0.1 0.2 0.3); }
h1 { color: transparent; }
h1 { color: currentcolor; }

IE を除くほぼすべてのモダンブラウザでサポートされています。

• rgb()
• hsl()
• hwb()
• lab(), lch()
• oklab()
• oklch()
• color()
• color-mix()

red や blue など、あらかじめ定義された色名を用いることができます。利用可能な色名については後述します。

h1 { color: red; }

#RRGGBB の形式は、R(赤)、G(緑)、B(青)の色をそれぞれ 00～ff の 2桁の 16進数で表します。ff は 10進数に直すと 255を意味します。

h1 { color: #ff0000; }

#RGB の形式は、R(赤)、G(緑)、B(青)の色をそれぞれ 0～f の 1桁の 16進数で現します。#fb0 は #ffbb00 と同じ意味を持ちます。

h1 { color: #fb0; }

#RGBA や #RRGGBBAA の形式は、0～FF の範囲で透明度(Alpha-value)を指定します。

h1 { color: #fb08; }       # ffbb0088 と同義
h1 { color: #ffbb0088; }

R(red)、G(green)、B(blue)の色をそれぞれ 0～255 の 10進数、または、0%～100% のパーセンテージで表します。

h1 { color: rgb(255 0 0); }
h1 { color: rgb(100% 0% 0%); }

オプションとして A(透明度:Alpha-value)を指定することもできます。透明度は 0 だと完全不透明、1 だと完全透明になります。

h1 { color: rgb(255 0 0 / 10%); }

古い仕様では rgb() の引数は空白ではなくカンマで区切っていました。また、透明度(Alpha-value)を指定する際は rgb() の代わりに rgba() を使用していました。

rgb(R, G, B)
rbba(R, G, B, A)

色相(Hue)、彩度(Saturation)、輝度(Ligntness) で色を指定します。

h1 { color: hsl(0 100% 50%); }

色相(Hue)は 赤(0°)、黄色(60°)、緑(120°)、シアン(180°)、青(240°)、マジェンダ(300°)など、0～360°の角度で指定します。<angle> の単位を指定しますが、単位を省略した場合は deg と見なされます。

彩度(Saturation)は 0%～100% の割合で指定します。100% が一番原色に近く、0% になると灰色になります。

輝度(Lightness)は 0%～100% の割合で指定します。50% が一番原色に近く、0% に近づくほど黒くなり、100% に近づくほど白くなります。

オプションとして A(透明度:Alpha-value)を指定することもできます。透明度は 0 だと完全不透明、1 だと完全透明になります。

古い仕様では hsl() の引数は空白ではなくカンマで区切っていました。また、透明度(Alpha-value)を指定する際は hsl() の代わりに hsla() を使用していました。

hsl(H, S, L)
hsla(H, S, L, A)

色相(Hue)、白色度(Whiteness)、黒色度(Blackness) によって色を指定します。

h1 { color: hwb(0 0% 0%); }

H(色相:Hue)は 赤(0°)、黄色(60°)、緑(120°)、シアン(180°)、青(240°)、マジェンダ(300°)など、0～360°の角度で指定します。<angle> の単位を指定しますが、単位を省略した場合は deg と見なされます。

W(白色度:Whiteness)は、0% だと原色、100% だと白色になります。

B(黒色度:Blackness)は、0% だと原色、100% だと黒色になります。

オプションとして A(透明度:Alpha-value)を指定することもできます。透明度は 0 だと完全不透明、1 だと完全透明になります。

CIE 1976 L*a*b* 色空間で色を指定します。L(CIE明度:CIE Lightness)は、0% だと黒っぽい色、100% だと白っぽい色になります。a は緑から赤/マゼンタ方向の色を、b は 青から黄色方向の色を指定します。a や b に上限値や下限値はありませんが、-160～160 程度を指定します。A(透明度:Alpha-value)は 0～1 で透明度を指定します。オプションで A(透明度:Alpha-value) も指定できます。

h1 { color: lab(20% 160 0); }
h1 { color: lab(20% 160 0 / 0.5); }

CIE明度(CIE Lightness)、彩度(Chroma)、色相(Hue) で色を指定します。L は 0%～100%、C は上限値はありませんが 0～230 程度を指定します。H は 0°～360° を指定します。オプションで A(透明度:Alpha-value) も指定できます。

h1 { color: lch(50% 230 180); }
h1 { color: lch(50% 230 180 / 0.5); }

oklab() は lab() と同様ですが、a や b を -0.5～0.5 の範囲で指定します。

h1 { color: oklab(20% 0.2 0); }

oklch() は lch() と同様ですが、C を 0 から 0.4 の範囲で指定します。

h1 { color: oklch(50% 0.2 180); }
h1 { color: oklch(50% 0.2 180 / 0.5); }

sRGB 以外の色空間を指定することができます。CS(色空間:Color Space) には色空間名を指定します。例えば Apple が提供する display-p3 色空間では sRGB よりも多彩な赤、緑の色を指定することができます。C1, C2, C3 には R・G・B の色度合いを 0.0～1.0 の数値で示します。display-p3 を表示するには、iPhone 11以降＋Safari など、ハードウェアとブラウザの両方が対応している必要があります。自分の環境が対応しているか否かは こちら に掲載されている画像で確認することができます。

h1 { color: color(display-p3 0.1 0.2 0.3); }

transparent は透過色を意味します。

h1 { color: transparent; }

currentcolor は現在の color プロパティの色を意味します。下記の例では、ボーダーカラーとして文字と同じ色を指定しています。

h1 { border: 1px solid currentcolor; }

CSS3 では、下記 16個の基本色名が定義されています。

CSS3 では下記 147色の拡張色名が定義されています。

レベッカパープル(rebeccapurple)

CSS4 では上記の147色に加えて rebeccapurple (#663399) が追加されました。CSS の仕様策定に尽力された Eric Meyer さんの娘 Rebecca さんが難病のため6才で亡くなったことを追悼して加えられたそうです。詳細は「レベッカパープル(rebeccapurple)」を参照してください。

システムカラー

Webセーフカラー(216色)