CSS - <color>

• トップ
• CSSリファレンス
• <color>

• 説明
• サポート状況
• 色名指定
• 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])
• light-dark(L, D)
• 特別な色名
• 色名
  • 基本色名(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; }

RGB(Red-Green-Blue)-A(Aplha-value)指定

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

rgb(R G B [/ A])

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

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

色	rgb(R G B)
	rgb(255 0 0)
	rgb(255 255 0)
	rgb(0 255 0)
	rgb(0 255 255)
	rgb(0 0 255)
	rgb(255 0 255)

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

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

色	rgb(r g b)
	rgb(255 0 0 / 100%)
	rgb(255 0 0 / 80%)
	rgb(255 0 0 / 60%)
	rgb(255 0 0 / 40%)
	rgb(255 0 0 / 20%)
	rgb(255 0 0 / 0%)

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

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

hsl(H S L [/ A])

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

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

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

色	hsl(H S L)
	hsl(0 100% 50%)
	hsl(60 100% 50%)
	hsl(120 100% 50%)
	hsl(180 100% 50%)
	hsl(240 100% 50%)
	hsl(300 100% 50%)

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

色	hsl(H S L)
	hsl(0 100% 50%)
	hsl(0 80% 50%)
	hsl(0 60% 50%)
	hsl(0 40% 50%)
	hsl(0 20% 50%)
	hsl(0 0% 50%)

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

色	hsl(H S L)
	hsl(0 100% 100%)
	hsl(0 100% 75%)
	hsl(0 100% 50%)
	hsl(0 100% 25%)
	hsl(0 100% 0%)

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

色	hsl(H S L / A)
	hsl(0 100% 50% / 100%)
	hsl(0 100% 50% / 80%)
	hsl(0 100% 50% / 60%)
	hsl(0 100% 50% / 40%)
	hsl(0 100% 50% / 20%)
	hsl(0 100% 50% / 0%)

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

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

hwb(H W B [/ A])

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

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

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

色	hwb(H W B)
	hwb(0 0% 0%)
	hwb(60 0% 0%)
	hwb(120 0% 0%)
	hwb(180 0% 0%)
	hwb(240 0% 0%)
	hwb(300 0% 0%)

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

色	hwb(H W B)
	hwb(0 0% 0%)
	hwb(0 20% 0%)
	hwb(0 40% 0%)
	hwb(0 60% 0%)
	hwb(0 80% 0%)
	hwb(0 100% 0%)

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

色	hwb(H W B)
	hwb(0 0% 0%)
	hwb(0 0% 20%)
	hwb(0 0% 40%)
	hwb(0 0% 60%)
	hwb(0 0% 80%)
	hwb(0 0% 100%)

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

色	hwb(H W B / A)
	hwb(0 0% 0% / 1.0)
	hwb(0 0% 0% / 0.8)
	hwb(0 0% 0% / 0.6)
	hwb(0 0% 0% / 0.4)
	hwb(0 0% 0% / 0.2)
	hwb(0 0% 0% / 0.0)

lab(L a b [/ A])

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

lch(L C H [/ A])

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(L a b [/ A])

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

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

oklch(L C H [/ A])

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

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

color(CS C1 C2 C3 [/ A])

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

color-mix(M, C1[ P1], C2[ P2])

M で指定したメソッド(Method)で、C1 色と C2 色の間の色を生成します。P1, P2 は C1, C2 の割合で省略時は 50% とみなします。メソッドは下記の書式で指定します。

<method> = in [ <rect-color-space> | <polar-color-space> <hue-method>? ]
<rect-color-space> = srgb | srgb-liner | display-p3 | a98-rgb | prophoto-rgb |
                     rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
<polar-color-space> = hsl | hwb | lch | oklch
<hue-method> = [ shorter | longer | increasing | decreasing ] hue

色	hwb(H W B)
	color-mix(in srgb, #f00 90%, #fff 10%)
	color-mix(in srgb, #f00 70%, #fff 30%)
	color-mix(in srgb, #f00 50%, #fff 50%)
	color-mix(in srgb, #f00 30%, #fff 70%)
	color-mix(in srgb, #f00 10%, #fff 90%)

light-dark(L, D)

Chrome 123, Safari 17.5 以降では light-dark() 関数も使用できるようになりました。

:root { color-scheme: light dark; }
body { color: light-dark(#333, #ccc); }

特別な色名

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

h1 { color: transparent; }

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

h1 { border: 1px solid currentcolor; }

色名

基本色名(16色)

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

色	基本色名	#rrggbb表記
	black	#000000
	silver	#c0c0c0
	gray	#808080
	white	#ffffff
	maroon	#800000
	red	#ff0000
	purple	#800080
	fuchsia	#ff00ff
	green	#008000
	lime	#00ff00
	olive	#808000
	yellow	#ffff00
	navy	#000080
	blue	#0000ff
	teal	#008080
	aqua	#00ffff

拡張色名(147色)

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

レベッカパープル(rebeccapurple)

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

色	拡張色名	#rrggbb表記
	rebeccapurple	#663399

システムカラー

CSS2.1 では、下記のシステムカラーが定義されています。ただし、CSS3 では appearanceプロパティがサポートされるため、システムカラーは deprecated(廃止予定)と位置づけられています。

色	色名	#rrggbb表記
	ActiveBorder	アクティブなウィンドウのボーダー色
	ActiveCaption	アクティブなウィンドウのキャプション色
	AppWorkspace	複数ドキュメントインタフェースの背景色
	Background	デスクトップの背景色
	ButtonFace	立体的なボタンの表面色
	ButtonHighlight	立体的なボタンの明るい方のボーダー色
	ButtonShadow	立体的なボタンの暗い方のボーダー色
	ButtonText	ボタンのテキスト色
	CaptionText	キャプションのテキスト色
	GrayText	非活性化されたテキスト色
	Highlight	コントロール内で選択されたアイテムの色
	HighlightText	コントロール内で選択されたテキストの色
	InactiveBorder	インアクティブなウィンドウのボーダー色
	InactiveCaption	インアクティブなウィンドウのキャプション色
	InactiveCaptionText	インアクティブなキャプションのテキスト色
	InfoBackground	ツールチップの背景色
	InfoText	ツールチップのテキスト色
	Menu	メニューの背景色
	MenuText	メニューのテキスト色
	Scrollbar	スクロールバーのグレー部分の色
	ThreeDFace	立体要素の表面の色
	ThreeDHighlight	立体要素の光源から近い側のボーダーの明るい方の色
	ThreeDLightShadow	立体要素の光源から近い側のボーダーの暗い方の色
	ThreeDShadow	立体要素の光源から遠い側のボーダーの明るい方の色
	ThreeDDarkShadow	立体要素の光源から遠い側のボーダーの暗い方の色
	Window	ウィンドウの背景色
	WindowFrame	ウィンドウのフレーム色
	WindowText	ウィンドウ内のテキストの色

Webセーフカラー(216色)

#00, #33, #66, #99, #cc, #ff を組み合わせてできる 216色は、256色モードのディスプレイでも、Windowsや Macintoshでも色の差異が少なく、Webで利用する上で安全な色とされています。

#--00--	#--33--	#--66--	#--99--	#--cc--	#--ff--
#000000	#003300	#006600	#009900	#00cc00	#00ff00
#000033	#003333	#006633	#009933	#00cc33	#00ff33
#000066	#003366	#006666	#009966	#00cc66	#00ff66
#000099	#003399	#006699	#009999	#00cc99	#00ff99
#0000cc	#0033cc	#0066cc	#0099cc	#00cccc	#00ffcc
#0000ff	#0033ff	#0066ff	#0099ff	#00ccff	#00ffff

#330000	#333300	#336600	#339900	#33cc00	#33ff00
#330033	#333333	#336633	#339933	#33cc33	#33ff33
#330066	#333366	#336666	#339966	#33cc66	#33ff66
#330099	#333399	#336699	#339999	#33cc99	#33ff99
#3300cc	#3333cc	#3366cc	#3399cc	#33cccc	#33ffcc
#3300ff	#3333ff	#3366ff	#3399ff	#33ccff	#33ffff

#660000	#663300	#666600	#669900	#66cc00	#66ff00
#660033	#663333	#666633	#669933	#66cc33	#66ff33
#660066	#663366	#666666	#669966	#66cc66	#66ff66
#660099	#663399	#666699	#669999	#66cc99	#66ff99
#6600cc	#6633cc	#6666cc	#6699cc	#66cccc	#66ffcc
#6600ff	#6633ff	#6666ff	#6699ff	#66ccff	#66ffff

#990000	#993300	#996600	#999900	#99cc00	#99ff00
#990033	#993333	#996633	#999933	#99cc33	#99ff33
#990066	#993366	#996666	#999966	#99cc66	#99ff66
#990099	#993399	#996699	#999999	#99cc99	#99ff99
#9900cc	#9933cc	#9966cc	#9999cc	#99cccc	#99ffcc
#9900ff	#9933ff	#9966ff	#9999ff	#99ccff	#99ffff

#cc0000	#cc3300	#cc6600	#cc9900	#cccc00	#ccff00
#cc0033	#cc3333	#cc6633	#cc9933	#cccc33	#ccff33
#cc0066	#cc3366	#cc6666	#cc9966	#cccc66	#ccff66
#cc0099	#cc3399	#cc6699	#cc9999	#cccc99	#ccff99
#cc00cc	#cc33cc	#cc66cc	#cc99cc	#cccccc	#ccffcc
#cc00ff	#cc33ff	#cc66ff	#cc99ff	#ccccff	#ccffff

#ff0000	#ff3300	#ff6600	#ff9900	#ffcc00	#ffff00
#ff0033	#ff3333	#ff6633	#ff9933	#ffcc33	#ffff33
#ff0066	#ff3366	#ff6666	#ff9966	#ffcc66	#ffff66
#ff0099	#ff3399	#ff6699	#ff9999	#ffcc99	#ffff99
#ff00cc	#ff33cc	#ff66cc	#ff99cc	#ffcccc	#ffffcc
#ff00ff	#ff33ff	#ff66ff	#ff99ff	#ffccff	#ffffff

---