テキストやボーダーラインなどの色を指定します。
h1 { color: #f00; } h1 { color: #ff0000; } h1 { color: red; } h1 { color: rgb(255, 0, 0); } h1 { color: rgb(100%, 0%, 0%); } h1 { color: rgba(100%, 0%, 0%, 0.5); } h1 { color: hsl(0, 100%, 50%); } h1 { color: hsla(0, 100%, 50%, 0.5); } h1 { color: transparent; } h1 { color: currentColor; }
形式 | サポート |
---|---|
#RGB | C1.0/e3/Fx1.0/Ch1.0/Op3.5/Sa1.0 |
#RRGGBB | C1.0/e3/Fx1.0/Ch1.0/Op3.5/Sa1.0 |
colorName | C1.0/e3/Fx1.0/Ch1.0/Op3.5/Sa1.0 |
rgb(R, G, B) | C1.0/e4/Fx1.0/Ch1.0/Op3.5/Sa1.0 |
rgba(R, G, B, a) | C3.0/e9/Fx3.0/Ch1.0/Op10.0/Sa3.1 |
hsl(h, s, l) | C3.0/e9/Fx1.0/Ch1.0/Op9.5/Sa3.1 |
hsla(h, s, l, a) | C3.0/e9/Fx3.0/Ch1.0/Op10.0/Sa3.1 |
transparent | C3.0/e6/Fx3.0/Ch1.0/Op10.0/Sa3.1 |
currentColor | C3.0/e?/Fx1.5/Ch1.0/Op9.5/Sa4.0 |
#RGB の形式は、R(赤)、G(緑)、B(青)の色をそれぞれ 0~f の 1桁の 16進数で現します。#fb0 は #ffbb00 と同じ意味を持ちます。
h1 { color: #f00; }
#RRGGBB の形式は、R(赤)、G(緑)、B(青)の色をそれぞれ 00~ff の 2桁の 16進数で表します。ff は 10進数に直すと 255を意味します。
h1 { color: #ff0000; }
rgb(値, 値, 値)の形式は、R(赤)、G(緑)、B(青)の色をそれぞれ 0~255 の 10進数で現します。
h1 { color: rgb(255, 0, 0); }
rgb(割合, 割合, 割合)の形式は、R(赤)、G(緑)、B(青)の色をそれぞれ 0%~100% のパーセントで現します。
h1 { color: rgb(100%, 0%, 0%); }
CSS3 では、R, G, B に透明度α(alpha) を加えた rgba(R, G, B, A) が定義されました。透明度は 0.0~1.0 で指定します。
h1 { color: rgba(255, 0, 0, 0.1); }
色 | hsl(h, s, l) |
---|---|
rgba(255, 0, 0, 1.0) | |
rgba(255, 0, 0, 0.8) | |
rgba(255, 0, 0, 0.6) | |
rgba(255, 0, 0, 0.4) | |
rgba(255, 0, 0, 0.2) | |
rgba(255, 0, 0, 0.0) |
red や blue など、あらかじめ定義された色名を用いることができます。利用可能な色名については後述します。
h1 { color: red; }
CSS3 では、RGBよりも直感的な色の指定方法として、色相(hue)、彩度(saturation)、輝度(ligntness)による HSL指定がサポートされました。hsl(色相, 彩度, 輝度) で色を指定します。
h1 { color: hsl(0, 100%, 50%); }
色相は、赤(0°)、黄色(60°)、緑(120°)、シアン(180°)、青(240°)、マジェンダ(300°)など、0~360°の数値で指定します。
色 | 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%) |
彩度は 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%) |
輝度も 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%) |
rgba() と同様、透明度を加えた hsla(h, s, l, a)も利用できます。
色 | hsl(h, s, l) |
---|---|
hsla(0, 100%, 50%, 1.0) | |
hsla(0, 100%, 50%, 0.8) | |
hsla(0, 100%, 50%, 0.6) | |
hsla(0, 100%, 50%, 0.4) | |
hsla(0, 100%, 50%, 0.2) | |
hsla(0, 100%, 50%, 0.0) |
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 |