Gutenberg、だいぶ使いやすくなったので移行中です

WEBで使える147色のカラーネーム一覧

WEB

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)なんかは結構使っています。
いざ思い出そうとするとなかなか思い出せないんですもんコード。

ソース見たときもカラーネームだと色のイメージがわきますしね!

コメント

タイトルとURLをコピーしました