WEBセーフカラー
8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色をWEBセーフカラーといいます。 可能ならばページの背景色や文字色には、WEBセーフカラーを使用してください。 WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で作者の意図通りの色で表示させることができるからです。
8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色をWEBセーフカラーといいます。
WEBセーフカラーは、RGBの各色をそれぞれ6段階に分けて、それらの組み合わせでできる色です。 16進表記の場合は00、33、66、99、CC、FFの6段階、 0〜255の10進表記の場合は0、51、102、153、204、255の6段階、 パーセンテージ指定の場合は0%、20%、40%、60%、80%、100%の6段階の組み合わせでできる色は、全てWEBセーフカラーとなります。 6×6×6=216色です。
| #000000 0 0 0 |
#333333 51 51 51 |
#666666 102 102 102 |
|||
| #999999 153 153 153 |
#CCCCCC 204 204 204 |
#FFFFFF 255 255 255 |
|||
| #FFFFCC 255 255 204 |
#FFFF99 255 255 153 |
#FFFF66 255 25 102 |
|||
| #FFFF33 255 255 51 |
#FFFF00 255 255 0 |
#CCCC00 204 204 0 |
|||
| #FFCC66 255 20 102 |
#FFCC00 255 204 0 |
#FFCC33 255 204 51 |
|||
| #CC9900 204 153 0 |
#CC9933 204 153 51 |
#996600 153 102 0 |
|||
| #FF9900 255 153 0 |
#FF9933 255 153 53 |
#CC9966 204 153 102 |
|||
| #CC6600 204 102 0 |
#996633 153 102 51 |
#663300 102 51 0 |
|||
| #FFCC99 255 204 153 |
#FF9966 255 153 102 |
#FF6600 255 102 0 |
|||
| #CC6633 204 102 51 |
#993300 153 51 0 |
#990000 153 0 0 |
|||
| #FF6633 255 102 51 |
#CC3300 204 51 0 |
#FF3300 255 51 0 |
|||
| #FF0000 255 0 0 |
#CC0000 204 0 0 |
#660000 102 0 0 |
|||
| #FFCCCC 255 204 204 |
#CC9999 204 153 153 |
#FF9999 255 153 153 |
|||
| #CC6666 204 102 102 |
#FF6666 255 102 102 |
#FF3333 255 51 51 |
|||
| #FF0033 255 0 51 |
#CC0033 204 0 51 |
#CC3333 204 51 51 |
|||
| #993333 153 51 51 |
#990033 153 0 51 |
#330000 51 0 0 |
|||
| #FF6699 255 102 153 |
#FF3366 255 51 102 |
#FF0066 255 0 102 |
|||
| #CC3366 204 51 102 |
#996666 153 102 102 |
#663333 102 51 51 |
|||
| #FF99CC 255 153 204 |
#FF3399 255 51 153 |
#FF0099 255 0 153 |
|||
| #CC0066 204 0 102 |
#993366 153 51 102 |
#660033 102 0 51 |
|||
| #FF66CC 255 102 204 |
#FF00CC 255 0 204 |
#FF33CC 255 51 204 |
|||
| #CC6699 204 102 153 |
#CC0099 204 0 153 |
#990066 153 0 102 |
|||
| #FFCCFF 255 204 255 |
#FF99FF 255 153 255 |
#FF66FF 255 102 255 |
|||
| #FF33FF 255 51 255 |
#FF00FF 255 0 255 |
#CC3399 204 51 153 |
|||
| #CC99CC 204 153 204 |
#CC66CC 204 102 204 |
#CC00CC 204 0 204 |
|||
| #CC33CC 204 51 204 |
#990099 153 0 153 |
#993399 153 51 153 |
|||
| #CC66FF 204 102 255 |
#CC33FF 204 51 255 |
#CC00FF 204 0 255 |
|||
| #9900CC 153 0 204 |
#9900CC 153 102 153 |
#660066 102 0 102 |
|||
| #CC99FF 204 153 255 |
#9933FF 153 51 255 |
#9900FF 153 0 255 |
|||
| #9933CC 153 51 204 |
#660099 102 0 153 |
#663366 102 51 102 |
|||
| #9966CC 153 102 204 |
#9966FF 153 102 255 |
#6600CC 102 0 204 |
|||
| #6633CC 102 51 204 |
#663399 102 51 153 |
#330033 51 0 51 |
|||
| #CCCCFF 204 204 255 |
#9999FF 153 153 255 |
#6633FF 102 51 255 |
|||
| #6600FF 102 0 255 |
#330099 51 0 153 |
#330066 51 0 102 |
|||
| #9966CC 153 102 204 |
#9966FF 153 102 255 |
#6600CC 102 0 204 |
|||
| #3333FF 51 51 255 |
#3300FF 51 0 255 |
#3300CC 51 0 204 |
|||
| #3333CC 51 51 204 |
#000099 0 0 204 |
#000066 0 0 102 |
|||
| #6699FF 102 153 255 |
#3366FF 102 102 255 |
#0000FF 0 0 255 |
|||
| #0000CC 0 0 204 |
#0033CC 0 51 204 |
#000033 0 0 51 |
|||
| #0066FF 0 102 255 |
#0066CC 0 102 204 |
#3366CC 51 102 204 |
|||
| #0033FF 0 51 255 |
#003399 0 51 153 |
#003366 0 51 102 |
|||
| #99CCFF 153 153 204 |
#6699CC 102 153 204 |
#3399FF 51 153 255 |
|||
| #0099FF 0 153 255 |
#336699 51 102 153 |
#006699 0 102 153 |
|||
| #66CCFF 102 204 255 |
#33CCFF 51 204 255 |
#00CCFF 0 204 255 |
|||
| #3399CC 51 153 204 |
#0099CC 0 153 204 |
#99CCCC 153 204 204 |
|||
| #CCFFFF 204 255 255 |
#66CCCC 102 204 204 |
#669999 102 153 153 |
|||
| #339999 51 153 153 |
#006666 0 102 102 |
#336666 51 102 102 |
|||
| #99FFFF 153 255 255 |
#66FFFF 102 255 255 |
#33FFFF 51 255 255 |
|||
| #00FFFF 0 255 255 |
#00CCCC 0 204 204 |
#99FFCC 153 255 204 |
|||
| #66FFCC 102 255 204 |
#33FFCC 51 255 204 |
#00FFCC 0 255 204 |
|||
| #33CCCC 51 204 204 |
#009999 0 153 153 |
#66CC99 102 204 153 |
|||
| #33CC99 51 204 153 |
#00CC99 0 204 153 |
#009966 0 153 102 |
|||
| #339966 51 153 102 |
#006633 0 102 51 |
#003333 0 51 51 |
|||
| #66FF99 102 255 153 |
#33FF99 51 255 153 |
#00FF99 0 255 153 |
|||
| #33CC66 51 204 102 |
#00CC66 0 204 102 |
#009933 0 153 51 |
|||
| #99FF99 153 255 153 |
#66FF66 102 255 102 |
#33FF66 51 255 102 |
|||
| #00FF66 0 255 102 |
#339933 51 153 51 |
#006600 0 102 0 |
|||
| #CCFFCC 204 255 204 |
#99CC99 153 204 153 |
#669966 102 153 102 |
|||
| #66CC66 102 204 102 |
#336633 51 102 51 |
#003300 0 51 0 |
|||
| #33FF33 51 255 51 |
#00FF33 0 255 51 |
#00FF00 0 255 0 |
|||
| #00CC00 0 204 0 |
#33CC33 51 204 51 |
#00CC00 0 204 0 |
|||
| #66FF00 102 255 0 |
#66FF33 102 255 51 |
#33FF00 51 255 0 |
|||
| #33CC00 51 204 0 |
#339900 51 153 0 |
#009900 0 153 0 |
|||
| #CCFF99 204 255 153 |
#99FF66 153 255 102 |
#66CC00 102 204 0 |
|||
| #66CC33 102 204 51 |
#669933 102 153 51 |
#336600 51 102 0 |
|||
| #99FF00 153 255 0 |
#99FF33 153 255 51 |
#99CC66 153 204 102 |
|||
| #99CC00 153 204 0 |
#99CC33 153 204 51 |
#669900 102 153 0 |
|||
| #CCFF66 204 255 102 |
#CCFF00 204 255 0 |
#CCFF33 204 255 51 |
|||
| #CCCC99 204 204 153 |
#666633 102 102 51 |
#333300 51 51 0 |
|||
| #CCCC66 204 204 102 |
#CCCC33 204 204 51 |
#999966 153 153 102 |
|||
| #999933 153 153 51 |
#999900 153 153 0 |
#666600 102 102 0 |
HTMLでは16進表記の他にカラーネームで色を指定することができます。 以下のリファレンスの左側はカラーネームで指定したもの、右側は16進表記で指定したものです。
カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあるので注意してください。 左右の色を見比べて、二つが同じ色で表示されていれば、今ご覧になっている環境では正しく表示されると考えて良いでしょう。
| aliceblue #F0F8FF |
lightsalmon #FFA07A |
||||
| antiquewhite #FAEBD7 |
lightseagreen #20B2AA |
||||
| aqua #00FFFF |
lightskyblue #87CEFA |
||||
| aquamarine #7FFFD4 |
lightslategray #778899 |
||||
| azure #F0FFFF |
lightsteelblue #B0C4DE |
||||
| beige #F5F5DC |
lightyellow #FFFFE0 |
||||
| bisque #FFE4C4 |
lime #00FF00 |
||||
| black #000000 |
limegreen #32CD32 |
||||
| blanchedalmond #FFEBCD |
linen #FAF0E6 |
||||
| blue #0000FF |
magenta #FF00FF |
||||
| blueviolet #8A2BE2 |
maroon #800000 |
||||
| brown #A52A2A |
mediumaquamarine #66CDAA |
||||
| burlywood #DEB887 |
mediumblue #0000CD |
||||
| cadetblue #5F9EA0 |
mediumorchid #BA55D3 |
||||
| chartreuse #7FFF00 |
mediumpurple #9370DB |
||||
| chocolate #D2691E |
mediumseagreen #3CB371 |
||||
| coral #FF7F50 |
mediumslateblue #7B68EE |
||||
| cornflowerblue #6495ED |
mediumspringgreen #00FA9A |
||||
| cornsilk #FFF8DC |
mediumturquoise #48D1CC |
||||
| crimson #DC143C |
mediumvioletred #C71585 |
||||
| cyan #00FFFF |
midnightblue #191970 |
||||
| darkblue #00008B |
mintcream #F5FFFA |
||||
| darkcyan #008B8B |
mistyrose #FFE4E1 |
||||
| darkgoldenrod #B8860B |
moccasin #FFE4B5 |
||||
| darkgray #A9A9A9 |
navajowhite #FFDEAD |
||||
| darkgreen #006400 |
navy #000080 |
||||
| darkkhaki #BDB76B |
oldlace #FDF5E6 |
||||
| darkmagenta #8B008B |
olive #808000 |
||||
| darkolivegreen #556B2F |
olivedrab #6B8E23 |
||||
| darkorange #FF8C00 |
orange #FFA500 |
||||
| darkorchid #9932CC |
orangered #FF4500 |
||||
| darkred #8B0000 |
orchid #DA70D6 |
||||
| darksalmon #E9967A |
palegoldenrod #EEE8AA |
||||
| darkseagreen #8FBC8F |
palegreen #98FB98 |
||||
| darkslateblue #483D8B |
paleturquoise #AFEEEE |
||||
| darkslategray #2F4F4F |
palevioletred #DB7093 |
||||
| darkturquoise #00CED1 |
papayawhip #FFEFD5 |
||||
| darkviolet #9400D3 |
peachpuff #FFDAB9 |
||||
| deeppink #FF1493 |
peru #CD853F |
||||
| deepskyblue #00BFFF |
pink #FFC0CB |
||||
| dimgray #696969 |
plum #DDA0DD |
||||
| dodgerblue #1E90FF |
powderblue #B0E0E6 |
||||
| firebrick #B22222 |
purple #800080 |
||||
| floralwhite #FFFAF0 |
red #FF0000 |
||||
| forestgreen #228B22 |
rosybrown #BC8F8F |
||||
| fuchsia #FF00FF |
royalblue #4169E1 |
||||
| gainsboro #DCDCDC |
saddlebrown #8B4513 |
||||
| ghostwhite #F8F8FF |
salmon #FA8072 |
||||
| gold #FFD700 |
sandybrown #F4A460 |
||||
| goldenrod #DAA520 |
seagreen #2E8B57 |
||||
| gray #808080 |
seashell #FFF5EE |
||||
| green #008000 |
sienna #A0522D |
||||
| greenyellow #ADFF2F |
silver #C0C0C0 |
||||
| honeydew #F0FFF0 |
skyblue #87CEEB |
||||
| hotpink #FF69B4 |
slateblue #6A5ACD |
||||
| indianred #CD5C5C |
slategray #708090 |
||||
| indigo #4B0082 |
snow #FFFAFA |
||||
| ivory #FFFFF0 |
springgreen #00FF7F |
||||
| khaki #F0E68C |
steelblue #4682B4 |
||||
| lavender #E6E6FA |
tan #D2B48C |
||||
| lavenderblush #FFF0F5 |
teal #008080 |
||||
| lawngreen #7CFC00 |
thistle #D8BFD8 |
||||
| lemonchiffon #FFFACD |
tomato #FF6347 |
||||
| lightblue #ADD8E6 |
turquoise #40E0D0 |
||||
| lightcoral #F08080 |
violet #EE82EE |
||||
| lightcyan #E0FFFF |
wheat #F5DEB3 |
||||
| lightgoldenrodyellow #FAFAD2 |
white #FFFFFF |
||||
| lightgreen #90EE90 |
whitesmoke #F5F5F5 |
||||
| lightgrey #D3D3D3 |
yellow #FFFF00 |
||||
| lightpink #FFB6C1 |
yellowgreen #9ACD32 |
HTML4.01とXHTML1.0、CSS2で共通して正式に使用できる色名は次の16色(上の表で*印を付けた色)です。
| aqua #00FFFF |
navy #000080 |
||
| black #000000 |
olive #808000 |
||
| blue #0000FF |
purple #800080 |
||
| fuchsia #FF00FF |
red #FF0000 |
||
| gray #808080 |
silver #C0C0C0 |
||
| green #008000 |
teal #008080 |
||
| lime #00FF00 |
white #FFFFFF |
||
| maroon #800000 |
yellow #FFFF00 |