HTML基礎講座、色コード一覧基礎編です。
HTMLでは、各表示色を色コードまたは、色の名前で管理しますが、この名前はかなりわかり難い物が多い、一見色の名前の方が便利そうですが、実際に使ってみると、かえって判りにくくなってしまう、お勧めは、色コードによる指定方法です。
基礎編では、色名が設定されている140種を表示していますので、色探しにご利用下さい。
色のコード一覧表 上段は、色の名前、下段は色のコード 実際に設定してあります。
| floralwhite |
aliceblue |
honeydew |
lavenderblush |
whitesmoke |
linen |
| #fffaf0 |
#f0f8ff |
#f0fff0 |
#fff0f5 |
#f5f5f5 |
#faf0e6 |
| ghostwhite
| ivory |
seashell |
snow |
azure |
mintcream |
| #f8f8ff |
#fffff0 |
#fff5ee |
#fffafa |
#f0ffff |
#f5fffa |
| white |
lavender |
oldlace |
lightgoldenrodyellow |
moccasin |
bisque |
| #ffffff |
#e6e6fa |
#fdf5e6 |
#fafad2 |
#ffe4b5 |
#ffe4c4 |
| mistyrose |
lightyellow |
papayawhip |
antiquewhite |
blanchedalmond |
cornsilk |
| #ffe4e1 |
#ffffe0 |
#ffefd5 |
#faebd7 |
#ffebcd |
#fff8dc |
| beige |
lemonchiffon |
palegoldenrod |
khaki |
yellow |
gold |
| #f5f5dc |
#fffacd |
#eee8aa |
#f0e68c |
#ffff00 |
#ffd700 |
| orange |
darkorange |
goldenrod |
chocolate |
tomato |
orangered |
| #ffa500 |
#ff8c00 |
#daa520 |
#d2691e |
#ff6347 |
#ff4500 |
| firebrick |
brown |
saddlebrown |
sienna |
darkred |
maroon |
| #b22222 |
#a52a2a |
#8b4513 |
#a0522d |
#8b0000 |
#800000 |
| red |
crimson |
burlywood |
peachpuff |
wheat |
navajowhite |
| #ff0000 |
#dc143c |
#deb887 |
#ffdab9 |
#f5deb3 |
#ffdead |
| peru |
lightcoral |
deeppink |
sandybrown |
salmon |
coral |
| #cd853f |
#f08080 |
#ff1493 |
#f4a460 |
#fa8072 |
#ff7f50 |
| lightsalmon |
palevioletred |
darksalmon |
plum |
hotpink |
pink |
| #ffa07a |
#db7093 |
#e9967a |
#dda0dd |
#ff69b4 |
#ff3f34 |
| violet |
lightpink |
orchid |
magenta |
fuchsia |
darkmagenta |
| #ee82ee |
#ffb6c1 |
#da70d6 |
#ff00ff |
#ff00ff |
#8b008b |
| purple |
indigo |
mediumvioletred |
darkviolet |
indianred |
darkorchid |
| #800080 |
#4b0082 |
#c71585 |
#9400d3 |
#cd5c5c |
#9932cc |
| blueviolet |
olivedrab |
olive |
darkgoldenrod |
chartreuse |
lawngreen |
| #8a2be2 |
#6b8e23 |
#808000 |
#b8860b |
#7fff00 |
#7cfc00 |
| greenyellow |
yellowgreen |
springgreen |
lime |
green |
forestgreen |
| #adff2f |
#9acd32 |
#00ff7f |
#00ff00 |
#008000 |
#228b22 |
| darkgreen |
mediumseagreen |
seagreen |
limegreen |
darkcyan |
teal |
| #006400 |
#3cb371 |
#2e8b57 |
#32cd32 |
#008b8b |
#008080 |
| turquoise |
mediumaquamarine |
mediumturquoise |
deepskyblue |
lightseagreen |
aquamarine |
| #40e0d0 |
#66cdaa |
#48d1cc |
#00bfff |
#20b2aa |
#7fffd4 |
| paleturquoise |
lightcyan |
skyblue |
powderblue |
lightskyblue |
lightblue |
| #afeeee |
#e0ffff |
#87ceeb |
#b0e0e6 |
#87cefa |
#add8e6 |
| cornflowerblue |
mediumpurple |
mediumorchid |
aqua |
mediumspringgreen |
cyan |
| #6495ed |
#9370db |
#ba55d3 |
#00ffff |
#00fa9a |
#00ffff |
| darkturquoise |
royalblue |
dodgerblue |
mediumslateblue |
mediumblue |
blue |
| #00ced1 |
#4169e1 |
#1e90ff |
#7b68ee |
#0000cd |
#0000ff |
| darkslateblue |
navy |
darkblue |
midnightblue |
cadetblue |
steelblue |
| #483d8b |
#000080 |
#00008b |
#191970 |
#5f9ea0 |
#4682b4 |
| slateblue |
gray |
slategray |
dimgray |
lightslategray |
palegreen |
| #6a5acd |
#808080 |
#708090 |
#696969 |
#778899 |
#98fb98 |
| lightgreen |
darkseagreen |
darkgray |
rosybrown |
thistle |
lightsteelblue |
| #90ee90 |
#8fbc8f |
#a9a9a9 |
#bc8f8f |
#d8bfd8 |
#b0c4de |
| gainsboro |
darkkhaki |
silver |
tan |
lightgrey |
darkolivegreen |
| #dcdcdc |
#bdb76b |
#c0c0c0 |
#d2b48c |
#d3d3d3 |
#556b2f |
| darkslategray |
black |
|
|
|
|
| #2f4f4f |
#000000 |
|
|
|
|
文字色に、背景色の補色を設定して見ました、見難い部分もありますね、
ほとんど見えない物は黒色に変更しました。補色が必ずしも、見安くはならない例として、ご参考に。
|