WEBツール・一覧表
WEB カラーチャート

投稿 | | カテゴリー WEBツール・一覧表, CSS, ホームページ制作

HTML、CSSの色見本です。Web Safeカラーやカラーネーム、RGB値など各種色指定用のカラーチャートです。

基本的なカラー・キーワード 
Basic color keywords

HTML(HTML)、CSS2で共通して使える、W3Cで色名称が定義されたカラー・キーワードとそれに対応するRGB値です。色名は大文字小文字どちらでもOKです。

CSSでのカラー指定のサンプル
body { color: black; background: white; }
black #000000 (0,0,0)
silver #C0C0C0 (192,192,192)
gray #808080 (128,128,128)
white #FFFFFF (255,255,255)
maroon #800000 (128,0,0)
red #FF0000 (255,0,0)
purple #800080 (128,0,128)
fuchsia #FF00FF (255,0,255)
green #008000 (0,128,0)
lime #00FF00 (0,255,0)
olive #808000 (128,128,0)
yellow #FFFF00 (255,255,0)
navy #000080 (0,0,128)
blue #0000FF (0,0,255)
teal #008080 (0,128,128)
aqua #00FFFF (0,255,255)

拡張カラー・キーワード 
Extended color keywords

拡張カラー・キーワードは、一般的に使われているブラウザによってサポートされているX11の色名(X11COLORS)に基づいたカラー・キーワードです(異なる箇所もあります)。HTML、CSSでのキーワード指定は基本的な16色と同じように大文字小文字どちらでも使用できます。

CSSでのカラー指定のサンプル
/* gray|grey のように色名に変更が加えられ重複しているものもあります。 */
body { color: gray; background: ivory; }
カラーネームのABC順
aliceblue #f0f8ff (240,248,255)
antiquewhite #faebd7 (250,235,215)
aqua #00ffff (0,255,255)
aquamarine #7fffd4 (127,255,212)
azure #f0ffff (240,255,255)
beige #f5f5dc (245,245,220)
bisque #ffe4c4 (255,228,196)
black #000000 (0,0,0)
blanchedalmond #ffebcd (255,235,205)
blue #0000ff (0,0,255)
blueviolet #8a2be2 (138,43,226)
brown #a52a2a (165,42,42)
burlywood #deb887 (222,184,135)
cadetblue #5f9ea0 (95,158,160)
chartreuse #7fff00 (127,255,0)
chocolate #d2691e (210,105,30)
coral #ff7f50 (255,127,80)
cornflowerblue #6495ed (100,149,237)
cornsilk #fff8dc (255,248,220)
crimson #dc143c (220,20,60)
cyan #00ffff (0,255,255)
darkblue #00008b (0,0,139)
darkcyan #008b8b (0,139,139)
darkgoldenrod #b8860b (184,134,11)
darkgray #a9a9a9 (169,169,169)
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)
darkslategrey #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)
dimgrey #696969 (105,105,105)
dodgerblue #1e90ff (30,144,255)
firebrick #b22222 (178,34,34)
floralwhite #fffaf0 (255,250,240)
forestgreen #228b22 (34,139,34)
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)
lightgrey #d3d3d3 (211,211,211)
lightpink #ffb6c1 (255,182,193)
lightsalmon #ffa07a (255,160,122)
lightseagreen #20b2aa (32,178,170)
lightskyblue #87cefa (135,206,250)
lightslategray #778899 (119,136,153)
lightslategrey #778899 (119,136,153)
lightsteelblue #b0c4de (176,196,222)
lightyellow #ffffe0 (255,255,224)
lime #00ff00 (0,255,0)
limegreen #32cd32 (50,205,50)
linen #faf0e6 (250,240,230)
magenta #ff00ff (255,0,255)
maroon #800000 (128,0,0)
mediumaquamarine #66cdaa (102,205,170)
mediumblue #0000cd (0,0,205)
mediumorchid #ba55d3 (186,85,211)
mediumpurple #9370db (147,112,219)
mediumseagreen #3cb371 (60,179,113)
mediumslateblue #7b68ee (123,104,238)
mediumspringgreen #00fa9a (0,250,154)
mediumturquoise #48d1cc (72,209,204)
mediumvioletred #c71585 (199,21,133)
midnightblue #191970 (25,25,112)
mintcream #f5fffa (245,255,250)
mistyrose #ffe4e1 (255,228,225)
moccasin #ffe4b5 (255,228,181)
navajowhite #ffdead (255,222,173)
navy #000080 (0,0,128)
oldlace #fdf5e6 (253,245,230)
olive #808000 (128,128,0)
olivedrab #6b8e23 (107,142,35)
orange #ffa500 (255,165,0)
orangered #ff4500 (255,69,0)
orchid #da70d6 (218,112,214)
palegoldenrod #eee8aa (238,232,170)
palegreen #98fb98 (152,251,152)
paleturquoise #afeeee (175,238,238)
palevioletred #db7093 (219,112,147)
papayawhip #ffefd5 (255,239,213)
peachpuff #ffdab9 (255,218,185)
peru #cd853f (205,133,63)
pink #ffc0cb (255,192,203)
plum #dda0dd (221,160,221)
powderblue #b0e0e6 (176,224,230)
purple #800080 (128,0,128)
red #ff0000 (255,0,0)
rosybrown #bc8f8f (188,143,143)
royalblue #4169e1 (65,105,225)
saddlebrown #8b4513 (139,69,19)
salmon #fa8072 (250,128,114)
sandybrown #f4a460 (244,164,96)
seagreen #2e8b57 (46,139,87)
seashell #fff5ee (255,245,238)
sienna #a0522d (160,82,45)
silver #c0c0c0 (192,192,192)
skyblue #87ceeb (135,206,235)
slateblue #6a5acd (106,90,205)
slategray #708090 (112,128,144)
slategrey #708090 (112,128,144)
snow #fffafa (255,250,250)
springgreen #00ff7f (0,255,127)
steelblue #4682b4 (70,130,180)
tan #d2b48c (210,180,140)
teal #008080 (0,128,128)
thistle #d8bfd8 (216,191,216)
tomato #ff6347 (255,99,71)
turquoise #40e0d0 (64,224,208)
violet #ee82ee (238,130,238)
wheat #f5deb3 (245,222,179)
white #ffffff (255,255,255)
whitesmoke #f5f5f5 (245,245,245)
yellow #ffff00 (255,255,0)
yellowgreen #9acd32 (154,205,50)

Web Safe カラー 
Web Safe color

Web Safe カラーは、256色しか表示できないカラーモニターの時代にMacintoshやWindowsなど異なるシステムで共通していた216色のカラーチャートです。
RGBの赤(R)緑(G)青(B)の各値を6段階にして掛け合わせた色で構成されます。
10進数のRGB値であれば0, 51, 102, 153, 204, 255のように51ずつ足し引きされます。

Web Safe カラーで使用される各色の値
10進数 051102153204255
16進数 00336699CCFF
RGBの% 0%20%40%60%80%100%
CSSでのカラー指定のサンプル
/* WebSafeカラーのように、16進数で各桁を二つ繰り返した色値は3桁に短縮して指定することができます。*/
body {
  color: #000; background: #fff; /* それぞれ #000000#ffffffと同じ */
}
#000000
(0,0,0)
#000033
(0,0,51)
#000066
(0,0,102)
#000099
(0,0,153)
#0000CC
(0,0,204)
#0000FF
(0,0,255)
#003300
(0,51,0)
#003333
(0,51,51)
#003366
(0,51,102)
#003399
(0,51,153)
#0033CC
(0,51,204)
#0033FF
(0,51,255)
#006600
(0,102,0)
#006633
(0,102,51)
#006666
(0,102,102)
#006699
(0,102,153)
#0066CC
(0,102,204)
#0066FF
(0,102,255)
#009900
(0,153,0)
#009933
(0,153,51)
#009966
(0,153,102)
#009999
(0,153,153)
#0099CC
(0,153,204)
#0099FF
(0,153,255)
#00CC00
(0,204,0)
#00CC33
(0,204,51)
#00CC66
(0,204,102)
#00CC99
(0,204,153)
#00CCCC
(0,204,204)
#00CCFF
(0,204,255)
#00FF00
(0,255,0)
#00FF33
(0,255,51)
#00FF66
(0,255,102)
#00FF99
(0,255,153)
#00FFCC
(0,255,204)
#00FFFF
(0,255,255)
#330000
(51,0,0)
#330033
(51,0,51)
#330066
(51,0,102)
#330099
(51,0,153)
#3300CC
(51,0,204)
#3300FF
(51,0,255)
#333300
(51,51,0)
#333333
(51,51,51)
#333366
(51,51,102)
#333399
(51,51,153)
#3333CC
(51,51,204)
#3333FF
(51,51,255)
#336600
(51,102,0)
#336633
(51,102,51)
#336666
(51,102,102)
#336699
(51,102,153)
#3366CC
(51,102,204)
#3366FF
(51,102,255)
#339900
(51,153,0)
#339933
(51,153,51)
#339966
(51,153,102)
#339999
(51,153,153)
#3399CC
(51,153,204)
#3399FF
(51,153,255)
#33CC00
(51,204,0)
#33CC33
(51,204,51)
#33CC66
(51,204,102)
#33CC99
(51,204,153)
#33CCCC
(51,204,204)
#33CCFF
(51,204,255)
#33FF00
(51,255,0)
#33FF33
(51,255,51)
#33FF66
(51,255,102)
#33FF99
(51,255,153)
#33FFCC
(51,255,204)
#33FFFF
(51,255,255)
#660000
(102,0,0)
#660033
(102,0,51)
#660066
(102,0,102)
#660099
(102,0,153)
#6600CC
(102,0,204)
#6600FF
(102,0,255)
#663300
(102,51,0)
#663333
(102,51,51)
#663366
(102,51,102)
#663399
(102,51,153)
#6633CC
(102,51,204)
#6633FF
(102,51,255)
#666600
(102,102,0)
#666633
(102,102,51)
#666666
(102,102,102)
#666699
(102,102,153)
#6666CC
(102,102,204)
#6666FF
(102,102,255)
#669900
(102,153,0)
#669933
(102,153,51)
#669966
(102,153,102)
#669999
(102,153,153)
#6699CC
(102,153,204)
#6699FF
(102,153,255)
#66CC00
(102,204,0)
#66CC33
(102,204,51)
#66CC66
(102,204,102)
#66CC99
(102,204,153)
#66CCCC
(102,204,204)
#66CCFF
(102,204,255)
#66FF00
(102,255,0)
#66FF33
(102,255,51)
#66FF66
(102,255,102)
#66FF99
(102,255,153)
#66FFCC
(102,255,204)
#66FFFF
(102,255,255)
#990000
(153,0,0)
#990033
(153,0,51)
#990066
(153,0,102)
#990099
(153,0,153)
#9900CC
(153,0,204)
#9900FF
(153,0,255)
#993300
(153,51,0)
#993333
(153,51,51)
#993366
(153,51,102)
#993399
(153,51,153)
#9933CC
(153,51,204)
#9933FF
(153,51,255)
#996600
(153,102,0)
#996633
(153,102,51)
#996666
(153,102,102)
#996699
(153,102,153)
#9966CC
(153,102,204)
#9966FF
(153,102,255)
#999900
(153,153,0)
#999933
(153,153,51)
#999966
(153,153,102)
#999999
(153,153,153)
#9999CC
(153,153,204)
#9999FF
(153,153,255)
#99CC00
(153,204,0)
#99CC33
(153,204,51)
#99CC66
(153,204,102)
#99CC99
(153,204,153)
#99CCCC
(153,204,204)
#99CCFF
(153,204,255)
#99FF00
(153,255,0)
#99FF33
(153,255,51)
#99FF66
(153,255,102)
#99FF99
(153,255,153)
#99FFCC
(153,255,204)
#99FFFF
(153,255,255)
#CC0000
(204,0,0)
#CC0033
(204,0,51)
#CC0066
(204,0,102)
#CC0099
(204,0,153)
#CC00CC
(204,0,204)
#CC00FF
(204,0,255)
#CC3300
(204,51,0)
#CC3333
(204,51,51)
#CC3366
(204,51,102)
#CC3399
(204,51,153)
#CC33CC
(204,51,204)
#CC33FF
(204,51,255)
#CC6600
(204,102,0)
#CC6633
(204,102,51)
#CC6666
(204,102,102)
#CC6699
(204,102,153)
#CC66CC
(204,102,204)
#CC66FF
(204,102,255)
#CC9900
(204,153,0)
#CC9933
(204,153,51)
#CC9966
(204,153,102)
#CC9999
(204,153,153)
#CC99CC
(204,153,204)
#CC99FF
(204,153,255)
#CCCC00
(204,204,0)
#CCCC33
(204,204,51)
#CCCC66
(204,204,102)
#CCCC99
(204,204,153)
#CCCCCC
(204,204,204)
#CCCCFF
(204,204,255)
#CCFF00
(204,255,0)
#CCFF33
(204,255,51)
#CCFF66
(204,255,102)
#CCFF99
(204,255,153)
#CCFFCC
(204,255,204)
#CCFFFF
(204,255,255)
#FF0000
(255,0,0)
#FF0033
(255,0,51)
#FF0066
(255,0,102)
#FF0099
(255,0,153)
#FF00CC
(255,0,204)
#FF00FF
(255,0,255)
#FF3300
(255,51,0)
#FF3333
(255,51,51)
#FF3366
(255,51,102)
#FF3399
(255,51,153)
#FF33CC
(255,51,204)
#FF33FF
(255,51,255)
#FF6600
(255,102,0)
#FF6633
(255,102,51)
#FF6666
(255,102,102)
#FF6699
(255,102,153)
#FF66CC
(255,102,204)
#FF66FF
(255,102,255)
#FF9900
(255,153,0)
#FF9933
(255,153,51)
#FF9966
(255,153,102)
#FF9999
(255,153,153)
#FF99CC
(255,153,204)
#FF99FF
(255,153,255)
#FFCC00
(255,204,0)
#FFCC33
(255,204,51)
#FFCC66
(255,204,102)
#FFCC99
(255,204,153)
#FFCCCC
(255,204,204)
#FFCCFF
(255,204,255)
#FFFF00
(255,255,0)
#FFFF33
(255,255,51)
#FFFF66
(255,255,102)
#FFFF99
(255,255,153)
#FFFFCC
(255,255,204)
#FFFFFF
(255,255,255)