ホーム  >  CSS辞典 / WEB

CSS辞典 色（カラー）の指定方法

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

目次
  1. 基本色のキーワード
  2. RGBモデル
  3. HSLモデル
  4. 拡張カラーキーワード
  5. システムカラーによる指定

基本色のキーワード

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
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完全な透明
currentcolorcolorプロパティで指定されている色を参照

RGBモデル

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

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

HSLモデル

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

指定方法説明指定例
hsl()関数型の値です。0～360までの数値で色相を、%値で彩度、明度をそれぞれカンマ（,）で区切って指定します。color:hsl(60,100%,50%)
hsla()関数型の値です。hsl()に加えて、４つ目の値で透明度を指定できます。
0が完全な透明で１が完全な不透明です。		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
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濃い緑色#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
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ウィンドウのテキストの色

カテゴリー:CSS辞典​WEB