CSS辞典 色(カラー)の指定方法

CSSのプロパティで色を指定する方法について解説

基本色のキーワード

W3C CSSカラーモジュールレベル3

W3C CSSカラーモジュールレベル4

W3C CSSカラーモジュールレベル5

要素の色を指定するキーワードは16色の基本色が使用できます。さらに147色のカラーネームが定義されています。

※大文字/小文字は区別されない

colorキーワードrgb16進数
black黒色rgb(0,0,0)#000000
white白色rgb(255,255,255)#ffffff
silver銀色rgb(192,192,192)#c0c0c0
gray灰色rgb(128,128,128)#808080
red赤色rgb(255,0,0)#ff0000
maroon赤茶色rgb(128,0,0)#800000
purplergb(128,0,128)#800080
fuchsia赤紫色rgb(255,0,255)#ff00ff
green緑色rgb(0,128,0)#008000
lime黄緑色rgb(0,255,0)#00ff00
yellow黄色rgb(255,255,0)#ffff00
olive暗い黄色rgb(128,128,0)#808000
blue青色rgb(0,0,255)#0000ff
navy濃い青色rgb(0,0,128)#000080
aqua水色rgb(0,255,255)#00ffff
teal青緑色rgb(0,128,128)#008080
transparent完全な透明
currentcolorcolorプロパティで指定されている色を参照

RGBモデル

RGBモデルは、赤(Red)、緑(Green)、青(Blue)の3つの値の組み合わせで色を指定します。「関数記法」と「16進記法」の2つの記法があります。

指定方法説明指定例
rgb()関数型の値です。0~255までの数値、また%値をカンマ(,)で区切って3つ指定します。
rgb(255,0,0)、rgb(100%,0%,0%)は赤になります。
color:rgb(255,255,0)
color:rgb(100%,100%,0%)
rgba()関数型の値です。rgb()に加えて、4つ目の値で透明度を指定できます。0が完全な透明で1が完全な不透明。
rgba(255,0,0,0.5)は透明度50%の赤です
color:rgba(255,255,0,0.5)
color:rgba(100%,100%,0%,0.5)
#RRGGBBシャープ(#)に続けて16進数(0~f)で6つの数値を指定します。「#ff0000」は赤です。
#RGBシャープ(#)に続けて3つの16進数を指定します。3桁の数値は2桁ずつ同値の「#RRGGBB」形式に変換されます。
「#f00」は「#ff0000」となり赤になります。

HSLモデル

HSLモデルは色の種類である「色相」(Hue)、鮮やかさである「彩度」(Saturation)、明るさである「明度」(Lightness)の3つの値の組み合わせで色を指定します。

指定方法説明指定例
hsl()関数型の値です。0~360までの数値で色相を、%値で彩度、明度をそれぞれカンマ(,)で区切って指定します。color:hsl(60,100%,50%)
hsla()関数型の値です。hsl()に加えて、4つ目の値で透明度を指定できます。
0が完全な透明で1が完全な不透明です。
color:hsla(60,100%,50%,0.5)

RGBAやHSLAの数値(透明度を表すアルファ値)対応していないブラウザでは、RGBAやHSLAによる色の指定は無視されます。

拡張カラーキーワード

colorカラー名和名rgb16進
aliceblueアリスブルー240,248,255#F0F8FF
antiquewhiteアンティークホワイト250,235,215#FAEBD7
aquaアクア0,255,255#00FFFF
aquamarineアクアマリン127,255,212#7FFFFD4
azure紺碧240,255,255#F0FFFF
beigeベージュ245,245,220#F5F5DC
bisqueビスク255,228,196#FFE4C4
black0,0,0#000000
blanchedalmondブランシェダルモンド255,235,205#FFEBCD
blue0,0,255#0000FF
blueviolet青紫色138,43,226#8A2BE2
brown茶色165,42,42#A52A2A
burlywoodバーリー・ウッド222,184,135#DEB887
cadetblueカデット・ブルー95,158,160#5F9EA0
chartreuseシャルトリューズ127,255,0#7FFF00
chocolateチョコレート210,105,30#D2691E
coralコーラル255,127,80#FF7F50
cornflowerblueコーンフラワーブルー100,149,237#6495ED
cornsilkトウモロコシの毛255,248,220#FFF8DC
crimson真紅220,20,60#DC143C
cyanシアン0,255,255#00FFFF
darkblue濃紺0,0,139#00008B
darkcyanダーク・シアン0,139,139#008B8B
darkgoldenrod

ダーク・ゴールデン

ロッド

184,134,11#B8860B
darkgray暗灰色169,169,169#A9A9A9
darkgreen濃い緑色#0064000,100,0
darkgrey濃い灰色#A9A9A9169,169,169
darkkhakiダーク・カーキ#BDB76B189,183,107
darkmagentaダーク・マゼンタ#8B008B139,0,139
darkolivegreen

ダーク・オリーブ

グリーン

#556B2F85,107,47
darkorangeダークオレンジ#FF8C00255,140,0
darkorchidダーク・オーキッド#9932CC153,50,204
darkred暗赤色#8B0000139,0,0
darksalmonダークサーモン#E9967A233,150,122
darkseagreen

ダークシー

グリーン

#8FBC8F143,188,143
darkslateblueダークスレート・ブルー#483D8B72,61,139
darkslategrayダークスレート・グレイ#2F4F4F47,79,79
darkturquoiseダークターコイズ#00CED10,206,209
darkvioletダークバイオレット#9400D3148,0,211
deeppink深いピンク#FF1493255,20,147
deepskyblueディープスカイブルー#00BFFF0,191,255
dimgray薄暗い灰色#696969105,105,105
dodgerblueドジャーブルー#1E90FF30,144,255
firebrick耐火レンガ#B22222178,34,34
floralwhiteフローラルホワイト#FFFAF0255,250,240
forestgreenフォレストグリーン#228B22#228B22
fuchsiaフクシア#FF00FF255,0,255
gainsboroゲインズボロ#DCDCDC220,220,220
ghostwhiteゴースト・ホワイト#F8F8FF248,248,255
gold#FFD700255,215,0
goldenrodアキノキリンソウ#DAA520218,165,32
grayグレー#808080128,128,128
green#0080000,128,0
greenyellow黄緑#ADFF2F173,255,47
greyグレー#808080128,128,128
honeydew甘露#F0FFF0240,255,240
hotpinkホトピンク#FF69B4255,105,180
indianredインディアンレッド#CD5C5C205,92,92
indigoインデゴ#4B008275,0,130
ivory象牙#FFFFF0255,255,240
khakiカーキ#F0E68C240,230,140
lavenderラベンダー#E6E6FA230,230,250
lavenderblushラベンダーブラッシュ#FFF0F5255,240,245
lawngreenローングリーン#7CFC00124,252,0
lemonchiffonレモンシフォン#FFFACD255,250,205
lightblueライトブルー#ADD8E6173,216,230
lightcoralライトコーラル#F08080240,128,128
lightcyanライト・シアン#E0FFFF224,255,255
lightgoldenrodyellow

ライトゴールデン

ロッドイエロー

#FAFAD2250,250,210
lightgrayライトグレー#D3D3D3211,211,211
lightgreenライトグリーン#90EE90144,238,144

colorカラー名和名rgb16進
lightpinkライトピンク255,182,193#FFB6C1
lightsalmonライトサーモン255,160,122#FFA07A
lightseagreenライトシーグリーン32,178,170#20B2AA
lightskyblueライトスカイブルー135,206,250#87CEFA
lightslategreyライトスレートグレー119,136,153#778899
lightsteelblueライトスチールブルー176,196,222#B0C4DE
lightyellow淡黄色255,255,224#FFFFE0
limeライム0,255,0#00FF00
limegreenライムグリーン50,205,50#32CD32
linenリネン250,240,230#FAF0E6
magenta赤紫色255,0,255#FF00FF
maroonあずき色128,0,0#800000
mediumaquamarineミディアムアクアマリン102,205,170#66CDAA
mediumblueミディアムブルー0,0,205#0000CD
mediumorchidミディアムオーキッド186,85,211#BA55D3
mediumpurpleミディアムパープル147,112,219#9370DB
mediumseagreenミディアムシーグリーン60,179,113#3CB371
mediumslateblueミディアムスレートブルー123,104,238#7B68EE
mediumspringgreen

ミディアムスプリング

グリーン

0,250,154#00FA9A
mediumturquoiseミディアムターコイズ72,209,204#48D1CC
mediumvioletred

ミディアムバイオレット

レッド

199,21,133#C71585
midnightblueミッドナイトブルー25,25,112#191970
mintcreamミントクリーム245,255,250#F5FFFA
mistyroseミスティローズ255,228,225#FFE4E1
moccasinモカシン255,228,181#FFE4B5
navajowhiteナバホ・ホワイト255,222,173#FFDEAD
navy海軍0,0,128#000080
oldlaceサイドレース253,245,230#FDF5E6
oliveオリーブ128,128,0#808000
olivedrabオリーブドラブ107,142,35#6B8E23
orangeオレンジ255,165,0#FFA500
orangeredオレンジレッド255,69,0#FF4500
orchid218,112,214#DA70D6
palegoldenrod淡いゴールデンロッド238,232,170#EEE8AA
palegreen薄緑色152,251,152#98FB98
paleturquoise淡いターコイズ175,238,238#AFEEEE
palevioletred淡い紫219,112,147#DB7093
papayawhipパパイヤ・ホイップ255,239,213#FFEFD5
peachpuffピーチパフ255,218,185#FFDAB9
peruペルー205,133,63#CD853F
pinkピンク255,192,203#FFC0CB
plum221,160,221#DDA0DD
powderblueパウダーブルー176,224,230#B0E0E6
purple128,0,128#800080
red255,0,0#FF0000
rosybrownロージー・ブラウン188,143,143#BC8F8F
royalblueロイヤルブルー65,105,225#4169E1
saddlebrownサドルブラウン139,69,19#8B4513
salmonサーモン250,128,114#FA8072
sandybrownサンディブラウン244,164,96#F4A460
seagreen海の緑46,139,87#2E8B57
seashell貝殻255,245,238#FFF5EE
siennaシエナ160,82,45#A0522D
silver192,192,192#C0C0C0
skyblue135,206,235#87CEEB
slateblueスレートブルー106,90,205#6A5ACD
slategreyスレートグレイ112,128,144#708090
snow255,250,250#FFFAFA
springgreenスプリンググリーン0,255,127#00FF7F
steelblueスティールブルー70,130,180#4682B4
tan日焼け210,180,140#D2B48C
tealティール0,128,128#008080
thistleアザミ216,191,216#D8BFD8
tomatoトマト255,99,71#FF6347
turquoiseターコイズ64,224,208#40E0D0
violetバイオレット238,130,238#EE82EE
wheat小麦245,222,179#F5DEB3
white白い255,255,255#FFFFFF
whitesmoke白い煙245,245,245#F5F5F5
yellow黄色255,255,0#FFFF00
yellowgreen黄緑154,205,50#9ACD32

システムカラーによる指定

CSS3では非推奨

スタイルシートでは、WindowsやMacOSのシステムカラーを指定することができます。ページの閲覧者にOS環境に合わせた色を見せることができます。

ActiveBorderアクティブなウィンドウの枠の色
ActiveCaptionアクティブなウィンドウのタイトルバーの色
AppWorkspaceアプリケーション内のウィンドウの背景色
BackGroundデスクトップの背景色
ButtonFace立体的なボタンの表面の色
ButtonHighlight立体的なボタンの光のあたっている面の色
ButtonShadow立体的なボタンの影になってる面の色
ButtonText立体的なボタンのテキストの色
CaptionTextタイトルバーのテキストの色
GrayText選択できないテキストの色
Highlight選択している状態の色
HighlightText選択しているテキストの色
InactiveBorderアクティブでないウィンドウの枠の色
InactiveCaptionアクティブでないウィンドウのタイトルバーの色
InactiveCaptionTextアクティブでないウィンドウのタイトルバーのテキストの色
InfoBackgroundツールチップの背景色
InfoTextツールチップのテキストの色
Menuメニューの背景色
MenuTextメニューのテキストの色
Scrollbarスクロールバーの色
ThreeDDarkShadow立体的に表示される部分の暗い影の色
ThreeDFace立体的に表示される部分の表面の色
ThreeDHighlight立体的に表示される部分の光の当たっている面の色
ThreeDLightShadow立体的に表示される部分の明るい影の色
ThreeDShadow立体的に表示される部分の影の色
Windowウィンドウの背景色
WindowFrameウィンドウのフレーム色
WindowTextウィンドウのテキストの色