テキストやボーダーラインなどの色を指定します。
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: transparent; } h1 { color: currentcolor; }
hwb() は IE ではサポートされていません。その他は大半のモダンブラウザでサポート済です。
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; }
rgb(R G B)の形式は、R(赤)、G(緑)、B(青)の色をそれぞれ 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) は 色相(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(色相:Hue)、W(白色度:Whiteness)、B(黒色度: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() は CIE 1976 L*a*b* 色空間で色を指定します。
lab(L a b) Lab(L a b / A)
L(CIE明度:CIE Lightness)は、0% だと黒色、100% だと白色になります。a は緑から赤/マゼンタ方向の色を、b は 青から黄色方向の色を指定します。a や b に上限値や下限値はありませんが、-160~160 程度を指定します。A(透明度:Alpha-value)は 0~1 で透明度を指定します。
h1 { color: lab(20% 160 0); } h1 { color: lab(20% 160 0 / 0.5); }
lch() は L(CIE明度:CIE Lightness)、C(彩度:Chroma)、H(色相:Hue) で色を指定します。
lch(L C H) lch(L C H / A)
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 の範囲で指定します。
oklab(L a b) oklab(L a b / A)
h1 { color: oklab(20% 0.2 0); }
oklch() は lch() と同様ですが、C を 0 から 0.4 の範囲で指定します。
oklch(L C H) oklch(L C H / A)
h1 { color: oklch(50% 0.2 180); } h1 { color: oklch(50% 0.2 180 / 0.5); }
transparent は透過色を意味します。
h1 { color: transparent; }
currentcolor は現在の color プロパティの色を意味します。下記の例では、ボーダーカラーとして文字と同じ色を指定しています。
h1 { border: 1px solid currentcolor; }
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 |
CSS3 では下記 147色の拡張色名が定義されています。
|
|
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 | ウィンドウ内のテキストの色 |
#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 |