ウェブ制作の色指定
ウェブページの色指定はCSSの<color>
データ値で扱える、キーワード、16進数(hex)、RGB色空間(rgb, hsl)などの形式を使って行います。基本的には、デジタルで表現可能な全ての色を指定できます。
最も一般的に使われているのは16進数の形式で、ハッシュ記号(#
)のあとに続く0〜f
の6桁の英数字で表します。ここでは、キーワードおよび16進数で表現できるカラーコードの一覧を紹介します。
Web標準カラー・キーワード一覧
見本 | キーワード | 16進数 |
---|---|---|
aliceblue | #f0f8ff |
|
antiquewhite | #faebd7 |
|
aqua | #00ffff |
|
aquamarine | #7fffd4 |
|
azure | #f0ffff |
|
beige | #f5f5dc |
|
bisque | #ffe4c4 |
|
black | #000000 |
|
blanchedalmond | #ffebcd |
|
blue | #0000ff |
|
blueviolet | #8a2be2 |
|
brown | #a52a2a |
|
burlywood | #deb887 |
|
cadetblue | #5f9ea0 |
|
chartreuse | #7fff00 |
|
chocolate | #d2691e |
|
coral | #ff7f50 |
|
cornflowerblue | #6495ed |
|
cornsilk | #fff8dc |
|
crimson | #dc143c |
|
cyan | #00ffff |
|
darkblue | #00008b |
|
darkcyan | #008b8b |
|
darkgoldenrod | #b8860b |
|
darkgray | #a9a9a9 |
|
darkgreen | #006400 |
|
darkgrey | #a9a9a9 |
|
darkkhaki | #bdb76b |
|
darkmagenta | #8b008b |
|
darkolivegreen | #556b2f |
|
darkorange | #ff8c00 |
|
darkorchid | #9932cc |
|
darkred | #8b0000 |
|
darksalmon | #e9967a |
|
darkseagreen | #8fbc8f |
|
darkslateblue | #483d8b |
|
darkslategray | #2f4f4f |
|
darkslategrey | #2f4f4f |
|
darkturquoise | #00ced1 |
|
darkviolet | #9400d3 |
|
deeppink | #ff1493 |
|
deepskyblue | #00bfff |
|
dimgray | #696969 |
|
dimgrey | #696969 |
|
dodgerblue | #1e90ff |
|
firebrick | #b22222 |
|
floralwhite | #fffaf0 |
|
forestgreen | #228b22 |
|
fuchsia | #ff00ff |
|
gainsboro | #dcdcdc |
|
ghostwhite | #f8f8ff |
|
gold | #ffd700 |
|
goldenrod | #daa520 |
|
gray | #808080 |
|
green | #008000 |
|
greenyellow | #adff2f |
|
grey | #808080 |
|
honeydew | #f0fff0 |
|
hotpink | #ff69b4 |
|
indianred | #cd5c5c |
|
indigo | #4b0082 |
|
ivory | #fffff0 |
|
khaki | #f0e68c |
|
lavender | #e6e6fa |
|
lavenderblush | #fff0f5 |
|
lawngreen | #7cfc00 |
|
lemonchiffon | #fffacd |
|
lightblue | #add8e6 |
|
lightcoral | #f08080 |
|
lightcyan | #e0ffff |
|
lightgoldenrodyellow | #fafad2 |
|
lightgray | #d3d3d3 |
|
lightgreen | #90ee90 |
|
lightgrey | #d3d3d3 |
|
lightpink | #ffb6c1 |
|
lightsalmon | #ffa07a |
|
lightseagreen | #20b2aa |
|
lightskyblue | #87cefa |
|
lightslategray | #778899 |
|
lightslategrey | #778899 |
|
lightsteelblue | #b0c4de |
|
lightyellow | #ffffe0 |
|
lime | #00ff00 |
|
limegreen | #32cd32 |
|
linen | #faf0e6 |
|
magenta | #ff00ff |
|
maroon | #800000 |
|
mediumaquamarine | #66cdaa |
|
mediumblue | #0000cd |
|
mediumorchid | #ba55d3 |
|
mediumpurple | #9370db |
|
mediumseagreen | #3cb371 |
|
mediumslateblue | #7b68ee |
|
mediumspringgreen | #00fa9a |
|
mediumturquoise | #48d1cc |
|
mediumvioletred | #c71585 |
|
midnightblue | #191970 |
|
mintcream | #f5fffa |
|
mistyrose | #ffe4e1 |
|
moccasin | #ffe4b5 |
|
navajowhite | #ffdead |
|
navy | #000080 |
|
oldlace | #fdf5e6 |
|
olive | #808000 |
|
olivedrab | #6b8e23 |
|
orange | #ffa500 |
|
orangered | #ff4500 |
|
orchid | #da70d6 |
|
palegoldenrod | #eee8aa |
|
palegreen | #98fb98 |
|
paleturquoise | #afeeee |
|
palevioletred | #db7093 |
|
papayawhip | #ffefd5 |
|
peachpuff | #ffdab9 |
|
peru | #cd853f |
|
pink | #ffc0cb |
|
plum | #dda0dd |
|
powderblue | #b0e0e6 |
|
purple | #800080 |
|
rebeccapurple | #663399 |
|
red | #ff0000 |
|
rosybrown | #bc8f8f |
|
royalblue | #4169e1 |
|
saddlebrown | #8b4513 |
|
salmon | #fa8072 |
|
sandybrown | #f4a460 |
|
seagreen | #2e8b57 |
|
seashell | #fff5ee |
|
sienna | #a0522d |
|
silver | #c0c0c0 |
|
skyblue | #87ceeb |
|
slateblue | #6a5acd |
|
slategray | #708090 |
|
slategrey | #708090 |
|
snow | #fffafa |
|
springgreen | #00ff7f |
|
steelblue | #4682b4 |
|
tan | #d2b48c |
|
teal | #008080 |
|
thistle | #d8bfd8 |
|
tomato | #ff6347 |
|
transparent | ※透明 | |
turquoise | #40e0d0 |
|
violet | #ee82ee |
|
wheat | #f5deb3 |
|
white | #ffffff |
|
whitesmoke | #f5f5f5 |
|
yellow | #ffff00 |
|
yellowgreen | #9acd32 |
Webセーフカラー・一覧
#000000 | #003300 | #006600 | #009900 | #00CC00 | #00FF00 |
#000033 | #003333 | #006633 | #009933 | #00CC33 | #00FF33 |
#000066 | #003366 | #006666 | #009966 | #00CC66 | #00FF66 |
#000099 | #003399 | #006699 | #009999 | #00CC99 | #00FF99 |
#0000CC | #0033CC | #0066CC | #0099CC | #00CCCC | #00FFCC |
#0000FF | #0033FF | #0066FF | #0099FF | #00CCFF | #00FFFF |
#330000 | #333300 | #336600 | #339900 | #33CC00 | #33FF00 |
#330033 | #333333 | #336633 | #339933 | #33CC33 | #33FF33 |
#330066 | #333366 | #336666 | #339966 | #33CC66 | #33FF66 |
#330099 | #333399 | #336699 | #339999 | #33CC99 | #33FF99 |
#3300CC | #3333CC | #3366CC | #3399CC | #33CCCC | #33FFCC |
#3300FF | #3333FF | #3366FF | #3399FF | #33CCFF | #33FFFF |
#660000 | #663300 | #666600 | #669900 | #66CC00 | #66FF00 |
#660033 | #663333 | #666633 | #669933 | #66CC33 | #66FF33 |
#660066 | #663366 | #666666 | #669966 | #66CC66 | #66FF66 |
#660099 | #663399 | #666699 | #669999 | #66CC99 | #66FF99 |
#6600CC | #6633CC | #6666CC | #6699CC | #66CCCC | #66FFCC |
#6600FF | #6633FF | #6666FF | #6699FF | #66CCFF | #66FFFF |
#990000 | #993300 | #996600 | #999900 | #99CC00 | #99FF00 |
#990033 | #993333 | #996633 | #999933 | #99CC33 | #99FF33 |
#990066 | #993366 | #996666 | #999966 | #99CC66 | #99FF66 |
#990099 | #993399 | #996699 | #999999 | #99CC99 | #99FF99 |
#9900CC | #9933CC | #9966CC | #9999CC | #99CCCC | #99FFCC |
#9900FF | #9933FF | #9966FF | #9999FF | #99CCFF | #99FFFF |
#CC0000 | #CC3300 | #CC6600 | #CC9900 | #CCCC00 | #CCFF00 |
#CC0033 | #CC3333 | #CC6633 | #CC9933 | #CCCC33 | #CCFF33 |
#CC0066 | #CC3366 | #CC6666 | #CC9966 | #CCCC66 | #CCFF66 |
#CC0099 | #CC3399 | #CC6699 | #CC9999 | #CCCC99 | #CCFF99 |
#CC00CC | #CC33CC | #CC66CC | #CC99CC | #CCCCCC | #CCFFCC |
#CC00FF | #CC33FF | #CC66FF | #CC99FF | #CCCCFF | #CCFFFF |
#FF0000 | #FF3300 | #FF6600 | #FF9900 | #FFCC00 | #FFFF00 |
#FF0033 | #FF3333 | #FF6633 | #FF9933 | #FFCC33 | #FFFF33 |
#FF0066 | #FF3366 | #FF6666 | #FF9966 | #FFCC66 | #FFFF66 |
#FF0099 | #FF3399 | #FF6699 | #FF9999 | #FFCC99 | #FFFF99 |
#FF00CC | #FF33CC | #FF66CC | #FF99CC | #FFCCCC | #FFFFCC |
#FF00FF | #FF33FF | #FF66FF | #FF99FF | #FFCCFF | #FFFFFF |