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; }
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ずつ足し引きされます。
10進数 | 0 | 51 | 102 | 153 | 204 | 255 |
---|---|---|---|---|---|---|
16進数 | 00 | 33 | 66 | 99 | CC | FF |
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) |