HTMLとCSS入門メニュー戻る

ウェブ色見本
Web Color Sample

ホームページ/ウェブサイトの背景色や文字色をHTMLやCSSで指定する際に便利なカラーサンプルとカラーコードの一覧です。
フォント集はこちら→フォント集


原色7色・虹色


#e60012

#f39800

#fff100

#32cd32

#1e90ff

#0000cd

#800073


基本16色

black #000000 gray #808080 silver #c0c0c0 white #ffffff
navy #000080 teal #008080 blue #0000ff aqua #00ffff
green #008000 olive #808000 lime #00ff00 yellow #ffff00
maroon #800000 purple #800080 red #ff0000 fuchsia #ff00ff

SPONSORED LINK

拡張147色

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

SPONSORED LINK

セーフカラー216色

#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


PageTop
メニューページ
戻る


SPONSORED LINK