Webで使えるカラーネームと、そのカラーコード・RGB値一覧

Webサイトを作るとき、通常色の指定にはカラーコードを記述しますが、決められた色名称を使うこともできます。色を自分で一から探すより、リストの中から選ぶ方がイメージにあう色が探しやすいよなぁ…という場面があったり、単純に色の名前からカラーコードやRGB値を知りたいということが時々あったので、一覧にまとめました。新たに加わった「rebeccapurple」も一覧に入れていますよ。

↑私が10年以上利用している会計ソフト!

追記:カラーコードをRGB値に変換するツール作りました→「Quick HEX to RGB

覚えやすい・使いやすい色

Webサイトの制作途中やテスト段階では、手軽に「とりあえず」色をつける…ということもあります。そんな時は短くてスペルの簡単な色名称を覚えておくと便利です。よくある「red」や「blue」だと彩度が高すぎて使いにくい、ということも。まずは私がよく使う、覚えやすくて使いやすい色を並べておきます!

色見本 カラーネーム カラーコード RGB
pink #ffc0cb rgb(255, 192, 203)
tomato #ff6347 rgb(255, 99, 71)
orange #ffa500 rgb(255, 165, 0)
plum #dda0dd rgb(221, 160, 221)
tan #d2b48c rgb(210, 180, 140)

赤系の色

色見本 カラーネーム カラーコード RGB
indianred #cd5c5c rgb(205, 92, 92)
lightcoral #f08080 rgb(240, 128, 128)
salmon #fa8072 rgb(250, 128, 114)
darksalmon #e9967a rgb(233, 150, 122)
lightsalmon #ffa07a rgb(255, 160, 122)
crimson #dc143c rgb(220, 20, 60)
red #ff0000 rgb(255, 0, 0)
firebrick #b22222 rgb(178, 34, 34)
darkred #8b0000 rgb(139, 0, 0)

ピンク系の色

色見本 カラーネーム カラーコード RGB
pink #ffc0cb rgb(255, 192, 203)
lightpink #ffb6c1 rgb(255, 182, 193)
hotpink #ff69b4 rgb(255, 105, 180)
deeppink #ff1493 rgb(255, 20, 147)
mediumvioletred #c71585 rgb(199, 21, 133)
palevioletred #db7093 rgb(219, 112, 147)

オレンジ系の色

色見本 カラーネーム カラーコード RGB
lightsalmon #ffa07a rgb(255, 160, 122)
coral #ff7f50 rgb(255, 127, 80)
tomato #ff6347 rgb(255, 99, 71)
orangered #ff4500 rgb(255, 69, 0)
darkorange #ff8c00 rgb(255, 140, 0)
orange #ffa500 rgb(255, 165, 0)

黄系の色

色見本 カラーネーム カラーコード RGB
gold #ffd700 rgb(255, 215, 0)
yellow #ffff00 rgb(255, 255, 0)
lightyellow #ffffe0 rgb(255, 255, 224)
lemonchiffon #fffacd rgb(255, 250, 205)
lightgoldenrodyellow #fafad2 rgb(250, 250, 210)
papayawhip #ffefd5 rgb(255, 239, 213)
moccasin #ffe4b5 rgb(255, 228, 181)
peachpuff #ffdab9 rgb(255, 218, 185)
palegoldenrod #eee8aa rgb(238, 232, 170)
khaki #f0e68c rgb(240, 230, 140)
darkkhaki #bdb76b rgb(189, 183, 107)

緑系の色

色見本 カラーネーム カラーコード RGB
greenyellow #adff2f rgb(173, 255, 47)
chartreuse #7fff00 rgb(127, 255, 0)
lawngreen #7cfc00 rgb(124, 252, 0)
lime #00ff00 rgb(0, 255, 0)
limegreen #32cd32 rgb(50, 205, 50)
palegreen #98fb98 rgb(152, 251, 152)
lightgreen #90ee90 rgb(144, 238, 144)
mediumspringgreen #00fa9a rgb(0, 250, 154)
springgreen #00ff7f rgb(0, 255, 127)
mediumseagreen #3cb371 rgb(60, 179, 113)
seagreen #2e8b57 rgb(46, 139, 87)
forestgreen #228b22 rgb(34, 139, 34)
green #008000 rgb(0, 128, 0)
darkgreen #006400 rgb(0, 100, 0)
yellowgreen #9acd32 rgb(154, 205, 50)
olivedrab #6b8e23 rgb(107, 142, 35)
olive #808000 rgb(128, 128, 0)
darkolivegreen #556b2f rgb(85, 107, 47)
mediumaquamarine #66cdaa rgb(102, 205, 170)
darkseagreen #8fbc8b rgb(143, 188, 139)
lightseagreen #20b2aa rgb(32, 178, 170)
darkcyan #008b8b rgb(0, 139, 139)
teal #008080 rgb(0, 128, 128)

青系の色

色見本 カラーネーム カラーコード RGB
aqua #00ffff rgb(0, 255, 255)
cyan #00ffff rgb(0, 255, 255)
lightcyan #e0ffff rgb(224, 255, 255)
paleturquoise #afeeee rgb(175, 238, 238)
aquamarine #7fffd4 rgb(127, 255, 212)
turquoise #40e0d0 rgb(64, 224, 208)
mediumturquoise #48d1cc rgb(72, 209, 204)
darkturquoise #00ced1 rgb(0, 206, 209)
cadetblue #5f9ea0 rgb(95, 158, 160)
steelblue #4682b4 rgb(70, 130, 180)
lightsteelblue #b0c4de rgb(176, 196, 222)
powderblue #b0e0e6 rgb(176, 224, 230)
lightblue #add8e6 rgb(173, 216, 230)
skyblue #87ceeb rgb(135, 206, 235)
lightskyblue #87cefa rgb(135, 206, 250)
deepskyblue #00bfff rgb(0, 191, 255)
dodgerblue #1e90ff rgb(30, 144, 255)
cornflowerblue #6495ed rgb(100, 149, 237)
mediumslateblue #7b68ee rgb(123, 104, 238)
royalblue #4169e1 rgb(65, 105, 225)
blue #0000ff rgb(0, 0, 255)
mediumblue #0000cd rgb(0, 0, 205)
darkblue #00008b rgb(0, 0, 139)
navy #000080 rgb(0, 0, 128)
midnightblue #191970 rgb(25, 25, 112)

紫系の色

色見本 カラーネーム カラーコード RGB
lavender #e6e6fa rgb(230, 230, 250)
thistle #d8bfd8 rgb(216, 191, 216)
plum #dda0dd rgb(221, 160, 221)
violet #ee82ee rgb(238, 130, 238)
orchid #da70d6 rgb(218, 112, 214)
fuchsia #ff00ff rgb(255, 0, 255)
magenta #ff00ff rgb(255, 0, 255)
mediumorchid #ba55d3 rgb(186, 85, 211)
mediumpurple #9370db rgb(147, 112, 219)
rebeccapurple #663399 rgb(102, 51, 153)
blueviolet #8a2be2 rgb(138, 43, 226)
darkviolet #9400d3 rgb(148, 0, 211)
darkorchid #9932cc rgb(153, 50, 204)
darkmagenta #8b008b rgb(139, 0, 139)
purple #800080 rgb(128, 0, 128)
indigo #4b0082 rgb(75, 0, 130)
slateblue #6a5acd rgb(106, 90, 205)
darkslateblue #483d8b rgb(72, 61, 139)
mediumslateblue #7b68ee rgb(123, 104, 238)

茶系の色

色見本 カラーネーム カラーコード RGB
cornsilk #fff8dc rgb(255, 248, 220)
blanchedalmond #ffebcd rgb(255, 235, 205)
bisque #ffe4c4 rgb(255, 228, 196)
navajowhite #ffdead rgb(255, 222, 173)
wheat #f5deb3 rgb(245, 222, 179)
burlywood #deb887 rgb(222, 184, 135)
tan #d2b48c rgb(210, 180, 140)
rosybrown #bc8f8f rgb(188, 143, 143)
sandybrown #f4a460 rgb(244, 164, 96)
goldenrod #daa520 rgb(218, 165, 32)
darkgoldenrod #b8860b rgb(184, 134, 11)
peru #cd853f rgb(205, 133, 63)
chocolate #d2691e rgb(210, 105, 30)
saddlebrown #8b4513 rgb(139, 69, 19)
sienna #a0522d rgb(160, 82, 45)
brown #a52a2a rgb(165, 42, 42)
maroon #800000 rgb(128, 0, 0)

白系の色

色見本 カラーネーム カラーコード RGB
white #ffffff rgb(255, 255, 255)
snow #fffafa rgb(255, 250, 250)
honeydew #f0fff0 rgb(240, 255, 240)
mintcream #f5fffa rgb(245, 255, 250)
azure #f0ffff rgb(240, 255, 255)
aliceblue #f0f8ff rgb(240, 248, 255)
ghostwhite #f8f8ff rgb(248, 248, 255)
whitesmoke #f5f5f5 rgb(245, 245, 245)
seashell #fff5ee rgb(255, 245, 238)
beige #f5f5dc rgb(245, 245, 220)
oldlace #fdf5e6 rgb(253, 245, 230)
floralwhite #fffaf0 rgb(255, 250, 240)
ivory #fffff0 rgb(255, 255, 240)
antiquewhite #faebd7 rgb(250, 235, 215)
linen #faf0e6 rgb(250, 240, 230)
lavenderblush #fff0f5 rgb(255, 240, 245)
mistyrose #ffe4e1 rgb(255, 228, 225)

黒系の色

色見本 カラーネーム カラーコード RGB
gainsboro #dcdcdc rgb(220, 220, 220)
lightgray #d3d3d3 rgb(211, 211, 211)
silver #c0c0c0 rgb(192, 192, 192)
darkgray #a9a9a9 rgb(169, 169, 169)
gray #808080 rgb(128, 128, 128)
dimgray #696969 rgb(105, 105, 105)
lightslategray #778899 rgb(119, 136, 153)
slategray #708090 rgb(112, 128, 144)
darkslategray #2f4f4f rgb(47, 79, 79)
black #000000 rgb(0, 0, 0)

CSSでの記述方法

カラーネームはカラーコードやRGB値と同様、そのまま記述すれば色の指定ができます。

例:

.box1 {
  color: hotpink;
}
.box2 {
  color: #ff69b4;
}
.box3 {
  color: rgb(255, 105, 180);
}

これはどれも同じピンク色が指定されます。


色や、その色名って見ているだけでわくわくしちゃいます。Web以外の色も見てみると、新たなひらめきにつながるかも?『色の名前事典507』ではいろんな色の成り立ちや名前の由来も知れて楽しめますよ!

著者 福田邦夫
発売日 2017年2月24日
世界中で使われている色を集めた本。見やすくて美しい色見本に加え、歴史、雑学も紹介しているので、見て楽しく、読んでためになる1冊です。

『色の名前事典507』を購入する

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)