WEBサイトのフォントや背景などの色、どんな書き方で指定していますか?
カラーコード(「#ffffff」や「#000000」などの# + 16進数6桁のコード)を使っている方が多いですかね。
わたしもメインはカラーコードです。
透明を使いたいときも多いので、rgbaを使用する事も多くなりましたが。
でも今のCMSはたいていカラーピッカーが付いているので、カラーネームやカラーコードは意識しない方が多いのかもしれませんね。
実は、「カラーコード」の外に、「カラーネーム」での色指定もできます。「red」「blue」など、いくつかの色は色の名前で指定できるんです。
そこで今使える147色のカラーネームを調べて一覧にしてみました。
見やすいように色ごとに分け、なるべくグラデーションで表示するようにしています。
※モニタなどで見え方が変わります。
※aquaとcyan、fuchsiaとmagentaは別の名前ですが同じ色です。
WEBで使える147色のカラーネーム一覧
ピンク系のカラーネーム
色 | 名前 | HEX | RGB |
lightpink | #ffb6c1 | 255 182 193 | |
hotpink | #ff69b4 | 255 105 180 | |
deeppink | #ff1493 | 255 20 147 | |
palevioletred | #db7093 | 219 112 147 | |
mediumvioletred | #c71585 | 199 21 133 |
赤系のカラーネーム
色 | 名前 | HEX | RGB |
lightsalmon | #ffa07a | 255 160 122 | |
salmon | #fa8072 | 250 128 114 | |
darksalmon | #e9967a | 233 150 122 | |
lightcoral | #f08080 | 240 128 128 | |
indianred | #cd5c5c | 205 92 92 | |
crimson | #dc143c | 220 20 60 | |
firebrick | #b22222 | 178 34 34 | |
red | #ff0000 | 255 0 0 | |
darkred | #8b0000 | 139 0 0 |
オレンジ系のカラーネーム
色 | 名前 | HEX | RGB |
orangered | #ff4500 | 255 69 0 | |
tomato | #ff6347 | 255 99 71 | |
coral | #ff7f50 | 255 127 80 | |
orange | #ffa500 | 255 165 0 | |
darkorange | #ff8c00 | 255 140 0 |
黄色系のカラーネーム
色 | 名前 | HEX | RGB |
lightyellow | #ffffe0 | 255 255 224 | |
lemonchiffon | #fffacd | 255 250 205 | |
lightgoldenrodyellow | #fafad2 | 250 250 210 | |
papayawhip | #ffefd5 | 255 239 213 | |
moccasin | #ffe4b5 | 255 228 181 | |
peachpuff | #ffdab9 | 255 218 185 | |
palegoldenrod | #eee8aa | 238 232 170 | |
khaki | #f0e68c | 240 230 140 | |
yellow | #ffff00 | 255 255 0 | |
darkkhaki | #bdb76b | 189 183 107 | |
gold | #ffd700 | 255 215 0 |
ベージュ・茶色系のカラーネーム
色 | 名前 | HEX | RGB |
cornsilk | #fff8dc | 255 248 220 | |
blanchedalmond | #ffebcd | 255 235 205 | |
bisque | #ffe4c4 | 255 228 196 | |
navajowhite | #ffdead | 255 222 173 | |
wheat | #f5deb3 | 245 222 179 | |
burlywood | #deb887 | 222 184 135 | |
tan | #d2b48c | 210 180 140 | |
rosybrown | #bc8f8f | 188 143 143 | |
sandybrown | #f4a460 | 244 164 96 | |
goldenrod | #daa520 | 218 165 32 | |
darkgoldenrod | #b8860b | 184 134 11 | |
peru | #cd853f | 205 133 63 | |
chocolate | #d2691e | 210 105 30 | |
saddlebrown | #8b4513 | 139 69 19 | |
sienna | #a0522d | 160 82 45 | |
brown | #a52a2a | 165 42 42 | |
maroon | #800000 | 128 0 0 |
緑系のカラーネーム
色 | 名前 | HEX | RGB |
darkolivegreen | #556b2f | 85 107 47 | |
olive | #808000 | 128 128 0 | |
olivedrab | #6b8e23 | 107 142 35 | |
yellowgreen | #9acd32 | 154 205 50 | |
limegreen | #32cd32 | 50 205 50 | |
lime | #00ff00 | 0 255 0 | |
lawngreen | #7cfc00 | 124 252 0 | |
chartreuse | #7fff00 | 127 255 0 | |
greenyellow | #adff2f | 173 255 47 | |
springgreen | #00ff7f | 0 255 127 | |
mediumspringgreen | #00fa9a | 0 250 154 | |
lightgreen | #90ee90 | 144 238 144 | |
palegreen | #98fb98 | 152 251 152 | |
darkseagreen | #8fbc8f | 143 188 143 | |
mediumaquamarine | #66cdaa | 102 205 170 | |
mediumseagreen | #3cb371 | 60 179 113 | |
seagreen | #2e8b57 | 46 139 87 | |
forestgreen | #228b22 | 34 139 34 | |
green | #008000 | 0 128 0 | |
darkgreen | #006400 | 0 100 0 |
シアン系のカラーネーム
色 | 名前 | HEX | RGB |
aqua | #00ffff | 0 255 255 | |
cyan | #00ffff | 0 255 255 | |
lightcyan | #e0ffff | 224 255 255 | |
paleturquoise | #afeeee | 175 238 238 | |
aquamarine | #7fffd4 | 127 255 212 | |
turquoise | #40e0d0 | 64 224 208 | |
mediumturquoise | #48d1cc | 72 209 204 | |
darkturquoise | #00ced1 | 0 206 209 | |
lightseagreen | #20b2aa | 32 178 170 | |
cadetblue | #5f9ea0 | 95 158 160 | |
darkcyan | #008b8b | 0 139 139 | |
teal | #008080 | 0 128 128 |
青系のカラーネーム
色 | 名前 | HEX | RGB |
lightsteelblue | #b0c4de | 176 196 222 | |
powderblue | #b0e0e6 | 176 224 230 | |
lightblue | #add8e6 | 173 216 230 | |
skyblue | #87ceeb | 135 206 235 | |
lightskyblue | #87cefa | 135 206 250 | |
deepskyblue | #00bfff | 0 191 255 | |
dodgerblue | #1e90ff | 30 144 255 | |
cornflowerblue | #6495ed | 100 149 237 | |
steelblue | #4682b4 | 70 130 180 | |
royalblue | #41690 | 65 105 225 | |
blue | #0000ff | 0 0 255 | |
mediumblue | #0000cd | 0 0 205 | |
darkblue | #00008b | 0 0 139 | |
navy | #000080 | 0 0 128 | |
midnightblue | #191970 | 25 25 112 |
紫系のカラーネーム
色 | 名前 | HEX | RGB |
lavender | #e6e6fa | 230 230 250 | |
thistle | #d8bfd8 | 216 191 216 | |
plum | #dda0dd | 221 160 221 | |
violet | #ee82ee | 238 130 238 | |
orchid | #da70d6 | 218 112 214 | |
fuchsia | #ff00ff | 255 0 255 | |
magenta | #ff00ff | 255 0 255 | |
mediumorchid | #ba55d3 | 186 85 211 | |
mediumpurple | #9370db | 147 112 219 | |
blueviolet | #8a2be2 | 138 43 226 | |
darkviolet | #9400d3 | 148 0 211 | |
darkorchid | #9932cc | 153 50 204 | |
darkmagenta | #8b008b | 139 0 139 | |
purple | #800080 | 128 0 128 | |
indigo | #4b0082 | 75 0 130 | |
darkslateblue | #483d8b | 72 61 139 | |
slateblue | #6a5acd | 106 90 205 | |
mediumslateblue | #7b68ee | 123 104 238 |
白・薄い色系のカラーネーム
色 | 名前 | HEX | RGB |
white | #ffffff | 255 255 255 | |
snow | #fffafa | 255 250 250 | |
honeydew | #f0fff0 | 240 255 240 | |
mintcream | #f5fffa | 245 255 250 | |
azure | #f0ffff | 240 255 255 | |
aliceblue | #f0f8ff | 240 248 255 | |
ghostwhite | #f8f8ff | 248 248 255 | |
whitesmoke | #f5f5f5 | 245 245 245 | |
seashell | #fff5ee | 255 245 238 | |
beige | #f5f5dc | 245 245 220 | |
oldlace | #fdf5e6 | 253 245 230 | |
floralwhite | #fffaf0 | 255 250 240 | |
ivory | #fffff0 | 255 255 240 | |
antiquewhite | #faebd7 | 250 235 215 | |
linen | #faf0e6 | 250 240 230 | |
lavenderblush | #fff0f5 | 255 240 245 | |
mistyrose | #ffe4e1 | 255 228 225 |
灰色・黒系のカラーネーム
色 | 名前 | HEX | RGB |
gainsboro | #dcdcdc | 220 220 220 | |
lightgray | #d3d3d3 | 211 211 211 | |
silver | #c0c0c0 | 192 192 192 | |
darkgray | #a9a9a9 | 169 169 169 | |
gray | #808080 | 128 128 128 | |
dimgray | #696969 | 105 105 105 | |
lightslategray | #778899 | 119 136 153 | |
slategray | #708090 | 112 128 144 | |
darkslategray | #2f4f4f | 47 79 79 | |
black | #000000 | 0 0 0 |
カラーネームの使い方
・カラーネームで色指定
・カラーコードで色指定
・RGB値で色指定
カラーネーム、カラーコード、RGB値それぞれで指定してみました。
この3つはすべて同じ色です。
ソースはこちら。
HTML
・<span class="f_red01">カラーネームで色指定</span> ・<span class="f_red02">カラーコードで色指定</span> ・<span class="f_red03">RGB値で色指定</span>
CSS
.f_red01{color: red;} .f_red02{color: #ff0000;} .f_red03{color: rgb(255,0,0);}
WEBで使える147色のカラーネーム まとめ
わたしは、カラーコードより書くのが速いもの(plumとかgray)なんかは結構使っています。
いざ思い出そうとするとなかなか思い出せないんですもんコード。
ソース見たときもカラーネームだと色のイメージがわきますしね!
コメント