
初めに
RGBカラーコードで色を指定する方法でもいくつかの色の例は紹介させていただきましたが、最低限の紹介だったため、見たい色が無かった方も多いと思います。
今回は、ウェブ上で扱える色のうち、名前がついているものの一覧をご紹介いたします。
RGBカラーコード色サンプル
以下に色名とRGBカラーコード、表示される色を色名のアルファベット順に示します。
なお、以下の色はRGBカラーコードの代わりに色名を入れることで、HTMLで文字や背景の色の指定が可能です。状況に応じて活用ください。
色名 | RGBカラーコード | 文字色 | 背景色 |
---|---|---|---|
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 | サンプル | |
turquoise | #40e0d0 | サンプル | |
violet | #ee82ee | サンプル | |
wheat | #f5deb3 | サンプル | |
white | #ffffff | サンプル | |
whitesmoke | #f5f5f5 | サンプル | |
yellow | #ffff00 | サンプル | |
yellowgreen | #9acd32 | サンプル |
違う名前でも同じ色を示す例
また、次の色は違う名前でも同じ色を示します。
色名1 | 色名2 | RGBカラーコード | 文字色 | 背景色 |
---|---|---|---|---|
aqua | cyan | #00ffff | サンプル | |
dimgray | dimgrey | #696969 | サンプル | |
darkgray | darkgrey | #a9a9a9 | サンプル | |
darkslategray | darkslategrey | #2f4f4f | サンプル | |
fuchsia | magenta | #ff00ff | サンプル | |
gray | grey | #808080 | サンプル | |
lightgray | lightgrey | #d3d3d3 | サンプル | |
lightslategray | lightslategrey | #778899 | サンプル | |
slategray | slategrey | #708090 | サンプル |
まとめ
以上、名前の付いた色のサンプルをご紹介させていただきました。
名前がついた色だけでもこれだけあるので、気に入った色を見つけ出すのは難しいかもしれません。皆さんもいろいろな色を試してみて、使いたい色を見出してください。