logo
コーディングインスピレーション

更新日

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

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

新たに加わった「rebeccapurple」も一覧に入れていますよ。

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

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』ではいろんな色の成り立ちや名前の由来も知れて楽しめますよ！

世界中で使われている色を集めた本。見やすくて美しい色見本に加え、歴史、雑学も紹介しているので、見て楽しく、読んでためになる1冊です。