CSS - <color>

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

目次

説明

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

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

RGB(Red-Green-Blue)指定

#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)

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)

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 W B)

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(L a b)

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); }
L 50%
a 160
b 0

lch(L C H)

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); }
L 50%
C 230
H 180

oklab(L a b)

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

oklab(L a b)
oklab(L a b / A)
h1 { color: oklab(20% 0.2 0); }
L 50%
a 0.5
b 0

oklch(L C H)

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); }
L 50%
C 0.2
H 180

特別な色名

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色の拡張色名が定義されています。

拡張色名#rrggbb表記
aliceblue#f0f8ff
antiquewhite#faebd7
aqua#00ffff
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
black#000000
blanchedalmond#ffebcd
blue#0000ff
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
fuchsia#ff00ff
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
gray#808080
green#008000
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
拡張色名#rrggbb表記
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
lime#00ff00
limegreen#32cd32
linen#faf0e6
magenta#ff00ff
maroon#800000
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
navy#000080
oldlace#fdf5e6
olive#808000
olivedrab#6b8e23
orange#ffa500
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
purple#800080
red#ff0000
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
silver#c0c0c0
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
teal#008080
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
white#ffffff
whitesmoke#f5f5f5
yellow#ffff00
yellowgreen#9acd32
システムカラー

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

Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年9月27日
http://www.tohoho-web.com/css/value/color.htm