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

css辞典 CSS辞典
この記事は約14分で読めます。

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

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

CSS Color Module Level 3

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

CSS Color Module Level 4

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

CSS Color Module Level 5

基本色のキーワード

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

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

color キーワード rgb 16進数
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
purple rgb(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 完全な透明
currentcolor colorプロパティで指定されている色を参照

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 カラー名 和名 rgb 16進
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
black 0,0,0 #000000
blanchedalmond ブランシェダルモンド 255,235,205 #FFEBCD
blue 0,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 濃い緑色 #006400 0,100,0
darkgrey 濃い灰色 #A9A9A9 169,169,169
darkkhaki ダーク・カーキ #BDB76B 189,183,107
darkmagenta ダーク・マゼンタ #8B008B 139,0,139
darkolivegreen

ダーク・オリーブ

グリーン

#556B2F 85,107,47
darkorange ダークオレンジ #FF8C00 255,140,0
darkorchid ダーク・オーキッド #9932CC 153,50,204
darkred 暗赤色 #8B0000 139,0,0
darksalmon ダークサーモン #E9967A 233,150,122
darkseagreen

ダークシー

グリーン

#8FBC8F 143,188,143
darkslateblue ダークスレート・ブルー #483D8B 72,61,139
darkslategray ダークスレート・グレイ #2F4F4F 47,79,79
darkturquoise ダークターコイズ #00CED1 0,206,209
darkviolet ダークバイオレット #9400D3 148,0,211
deeppink 深いピンク #FF1493 255,20,147
deepskyblue ディープスカイブルー #00BFFF 0,191,255
dimgray 薄暗い灰色 #696969 105,105,105
dodgerblue ドジャーブルー #1E90FF 30,144,255
firebrick 耐火レンガ #B22222 178,34,34
floralwhite フローラルホワイト #FFFAF0 255,250,240
forestgreen フォレストグリーン #228B22 #228B22
fuchsia フクシア #FF00FF 255,0,255
gainsboro ゲインズボロ #DCDCDC 220,220,220
ghostwhite ゴースト・ホワイト #F8F8FF 248,248,255
gold #FFD700 255,215,0
goldenrod アキノキリンソウ #DAA520 218,165,32
gray グレー #808080 128,128,128
green #008000 0,128,0
greenyellow 黄緑 #ADFF2F 173,255,47
grey グレー #808080 128,128,128
honeydew 甘露 #F0FFF0 240,255,240
hotpink ホトピンク #FF69B4 255,105,180
indianred インディアンレッド #CD5C5C 205,92,92
indigo インデゴ #4B0082 75,0,130
ivory 象牙 #FFFFF0 255,255,240
khaki カーキ #F0E68C 240,230,140
lavender ラベンダー #E6E6FA 230,230,250
lavenderblush ラベンダーブラッシュ #FFF0F5 255,240,245
lawngreen ローングリーン #7CFC00 124,252,0
lemonchiffon レモンシフォン #FFFACD 255,250,205
lightblue ライトブルー #ADD8E6 173,216,230
lightcoral ライトコーラル #F08080 240,128,128
lightcyan ライト・シアン #E0FFFF 224,255,255
lightgoldenrodyellow

ライトゴールデン

ロッドイエロー

#FAFAD2 250,250,210
lightgray ライトグレー #D3D3D3 211,211,211
lightgreen ライトグリーン #90EE90 144,238,144

color カラー名 和名 rgb 16進
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
orchid 218,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
plum 221,160,221 #DDA0DD
powderblue パウダーブルー 176,224,230 #B0E0E6
purple 128,0,128 #800080
red 255,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
silver 192,192,192 #C0C0C0
skyblue 135,206,235 #87CEEB
slateblue スレートブルー 106,90,205 #6A5ACD
slategrey スレートグレイ 112,128,144 #708090
snow 255,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ウィンドウのテキストの色

コメント

タイトルとURLをコピーしました