HTML色見本

HTMLやCSSで使用できるカラーネーム・カラーコードの一覧表です。

###raw center
<table summary="HTML色見本 140色" style="margin:auto;"> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#000000">

black #000000
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#f0f8ff">
aliceblue #f0f8ff
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#008b8b">
darkcyan #008b8b
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ffffe0">
lightyellow #ffffe0
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ff7f50">
coral #ff7f50
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#696969">
dimgray #696969
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#e6e6fa">
lavender #e6e6fa
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#008080">
teal #008080
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#fafad2">
lightgoldenrodyellow #fafad2
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ff6347">
tomato #ff6347
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#808080">
gray #808080
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#b0c4de">
lightsteelblue #b0c4de
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#2f4f4f">
darkslategray #2f4f4f
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#fffacd">
lemonchiffon #fffacd
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ff4500">
orangered #ff4500
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#a9a9a9">
darkgray #a9a9a9
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#778899">
lightslategray #778899
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#006400">
darkgreen #006400
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#f5deb3">
wheat #f5deb3
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ff0000">
red #ff0000
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#c0c0c0">
silver #c0c0c0
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#708090">
slategray #708090
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#008000">
green #008000
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#deb887">
burlywood #deb887
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#dc143c">
crimson #dc143c
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#d3d3d3">
lightgrey #d3d3d3
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#4682b4">
steelblue #4682b4
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#228b22">
forestgreen #228b22
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#d2b48c">
tan #d2b48c
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#c71585">
mediumvioletred #c71585
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#dcdcdc">
gainsboro #dcdcdc
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#4169e1">
royalblue #4169e1
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#2e8b57">
seagreen #2e8b57
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#f0e68c">
khaki #f0e68c
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ff1493">
deeppink #ff1493
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#f5f5f5">
whitesmoke #f5f5f5
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#191970">
midnightblue #191970
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#3cb371">
mediumseagreen #3cb371
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ffff00">
yellow #ffff00
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ff69b4">
hotpink #ff69b4
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#ffffff">
white #ffffff
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#000080">
navy #000080
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#66cdaa">
mediumaquamarine #66cdaa
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ffd700">
gold #ffd700
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#db7093">
palevioletred #db7093
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#fffafa">
snow #fffafa
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#00008b">
darkblue #00008b
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#8fbc8f">
darkseagreen #8fbc8f
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ffa500">
orange #ffa500
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ffc0cb">
pink #ffc0cb
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#f8f8ff">
ghostwhite #f8f8ff
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#0000cd">
mediumblue #0000cd
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#7fffd4">
aquamarine #7fffd4
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#f4a460">
sandybrown #f4a460
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ffb6c1">
lightpink #ffb6c1
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#fffaf0">
floralwhite #fffaf0
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#0000ff">
blue #0000ff
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#98fb98">
palegreen #98fb98
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ff8c00">
darkorange #ff8c00
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#d8bfd8">
thistle #d8bfd8
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#faf0e6">
linen #faf0e6
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#1e90ff">
dodgerblue #1e90ff
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#90ee90">
lightgreen #90ee90
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#daa520">
goldenrod #daa520
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ff00ff">
magenta #ff00ff
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#faebd7">
antiquewhite #faebd7
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#6495ed">
cornflowerblue #6495ed
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#00ff7f">
springgreen #00ff7f
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#cd853f">
peru #cd853f
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ff00ff">
fuchsia #ff00ff
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#ffefd5">
papayawhip #ffefd5
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#00bfff">
deepskyblue #00bfff
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#00fa9a">
mediumspringgreen #00fa9a
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#b8860b">
darkgoldenrod #b8860b
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ee82ee">
violet #ee82ee
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#ffebcd">
blanchedalmond #ffebcd
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#87cefa">
lightskyblue #87cefa
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#7cfc00">
lawngreen #7cfc00
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#d2691e">
chocolate #d2691e
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#dda0dd">
plum #dda0dd
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#ffe4c4">
bisque #ffe4c4
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#87ceeb">
skyblue #87ceeb
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#7fff00">
chartreuse #7fff00
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#a0522d">
sienna #a0522d
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#da70d6">
orchid #da70d6
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#ffe4b5">
moccasin #ffe4b5
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#add8e6">
lightblue #add8e6
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#adff2f">
greenyellow #adff2f
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#8b4513">
saddlebrown #8b4513
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ba55d3">
mediumorchid #ba55d3
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#ffdead">
navajowhite #ffdead
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#b0e0e6">
powderblue #b0e0e6
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#00ff00">
lime #00ff00
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#800000">
maroon #800000
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#9932cc">
darkorchid #9932cc
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#ffdab9">
peachpuff #ffdab9
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#afeeee">
paleturquoise #afeeee
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#32cd32">
limegreen #32cd32
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#8b0000">
darkred #8b0000
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#9400d3">
darkviolet #9400d3
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#ffe4e1">
mistyrose #ffe4e1
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#e0ffff">
lightcyan #e0ffff
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#9acd32">
yellowgreen #9acd32
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#a52a2a">
brown #a52a2a
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#8b008b">
darkmagenta #8b008b
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#fff0f5">
lavenderblush #fff0f5
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#00ffff">
cyan #00ffff
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#556b2f">
darkolivegreen #556b2f
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#b22222">
firebrick #b22222
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#800080">
purple #800080
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#fff5ee">
seashell #fff5ee
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#00ffff">
aqua #00ffff
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#6b8e23">
olivedrab #6b8e23
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#cd5c5c">
indianred #cd5c5c
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#4b0082">
indigo #4b0082
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#fdf5e6">
oldlace #fdf5e6
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#40e0d0">
turquoise #40e0d0
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#808000">
olive #808000
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#bc8f8f">
rosybrown #bc8f8f
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#483d8b">
darkslateblue #483d8b
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#fffff0">
ivory #fffff0
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#48d1cc">
mediumturquoise #48d1cc
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#bdb76b">
darkkhaki #bdb76b
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#e9967a">
darksalmon #e9967a
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#8a2be2">
blueviolet #8a2be2
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#f0fff0">
honeydew #f0fff0
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#00ced1">
darkturquoise #00ced1
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#eee8aa">
palegoldenrod #eee8aa
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#f08080">
lightcoral #f08080
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#9370db">
mediumpurple #9370db
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#f5fffa">
mintcream #f5fffa
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#20b2aa">
lightseagreen #20b2aa
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#fff8dc">
cornsilk #fff8dc
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#fa8072">
salmon #fa8072
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#6a5acd">
slateblue #6a5acd
</td>
</tr> 
<tr> 
<td style="font-size:9pt;padding:5px 10px;background-color:#f0ffff">
azure #f0ffff
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#5f9ea0">
cadetblue #5f9ea0
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#f5f5dc">
beige #f5f5dc
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#ffa07a">
lightsalmon #ffa07a
</td>
<td style="font-size:9pt;padding:5px 10px;background-color:#7b68ee">
mediumslateblue #7b68ee
</td>

</tr> 
</table>

wakatta 記法

このコンテンツを見る