CSSで使えるカラーネームを使いやすくグループ分け

CSSでは、colorやbackgroundなどの色指定にカラーネームが使えます。カラーネームはCSS3で147色が定義されています。

カラーネームを使うと色の印象が想像しやすいので便利なのですが、ネットなどで調べると、名前をアルファベット順に並べた一覧が多い印象です。

アルファベット順では、同じトーンや同系色から複数の色を選びたい時に使いにくいので、先にグループ分けしてみることにしました。

タイプ別

やさしい色

カラーネーム	カラーサンプル	カラーコード	RGB
snow		#FFFFF0	rgb(255, 255, 240)
pink		#FFC0CB	rgb(255, 192, 203)
salmon		#FA8072	rgb(250, 128, 114)
plum		#DDA0DD	rgb(221, 160, 221)
thistle		#D8BFD8	rgb(216, 191, 216)
lightblue		#ADD8E6	rgb(173, 216, 230)
powderblue		#B0E0E6	rgb(176, 224, 230)
lightgreen		#90EE90	rgb(144, 238, 144)
palegreen		#98FB98	rgb(152, 251, 152)
tan		#D2B48C	rgb(210, 180, 140)
rosybrown		#BC8F8F	rgb(188, 143, 143)

Light系

名前の前に「light」を持つものリスト。

カラーネーム	カラーサンプル	カラーコード	RGB
lightgray		#FFFFF0	rgb(255, 255, 240)
lightslategray		#FFC0CB	rgb(255, 192, 203)
lightpink		#FA8072	rgb(250, 128, 114)
lightcoral		#F08080	rgb(240, 128, 128)
lightsalmon		#DDA0DD	rgb(221, 160, 221)
lightyellow		#FFFFE0	rgb(255, 255, 224)
lightgoldenrodyellow		#FAFAD2	rgb(250, 250, 210)
lightgreen		#90EE90	rgb(144, 238, 144)
lightseagreen		#20B2AA	rgb(32, 178, 170)
lightcyan		#E0FFFF	rgb(224, 255, 255)
lightblue		#ADD8E6	rgb(173, 216, 230)
lightsteelblue		#B0C4DE	rgb(176, 196, 222)
lightskyblue		#87CEFA	rgb(135, 206, 250)

ビビット系

淡い色と比較するための鮮やかな色リスト。

カラーネーム	カラーサンプル	カラーコード	RGB
red		#FF0000	rgb(255, 0, 0)
purple		#800080	rgb(128, 0, 128)
blueviolet		#8A2BE2	rgb(138, 43, 226)
deeppink		#FF1493	rgb(255, 20, 147)
fuchsia		#FF00FF	rgb(255, 0, 255)
lime		#00FF00	rgb(0, 255, 0)
yellow		#FFFF00	rgb(255, 255, 0)
blue		#0000FF	rgb(0, 0, 255)
aqua		#00FFFF	rgb(0, 255, 255)
orange		#FFA500	rgb(255, 165, 0)

ダーク系

名前の前に「dark」を持つものから抜粋。

カラーネーム	カラーサンプル	16進数	RGB
darkcyan		#008B8B	rgb(0, 139, 139)
darkgoldenrod		#B8860B	rgb(184, 134, 11)
darkgray		#A9A9A9	rgb(169, 169, 169)
darkgreen		#006400	rgb(0, 100, 0)
darkkhaki		#BDB76B	rgb(189, 183, 107)
darkmagenta		#8B008B	rgb(139, 0, 139)
darkolivegreen		#556B2F	rgb(85, 107, 47)
darkorange		#FF8C00	rgb(255, 140, 0)
darkred		#8B0000	rgb(139, 0, 0)
darksalmon		#E9967A	rgb(233, 150, 122)
darkseagreen		#8FBC8F	rgb(143, 188, 139)
darkslateblue		#483D8B	rgb(72, 61, 139)
darkslategray		#2F4F4F	rgb(47, 79, 79)
dimgray		#696969	rgb(105, 105, 105)

色別

黒・灰色

カラーネーム	カラーサンプル	カラーコード	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)

白系

カラーネーム	カラーサンプル	カラーコード	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
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)
salmon		#FA8072	rgb(250, 128, 114)
darksalmon		#E9967A	rgb(233, 150, 122)
lightcoral		#F08080	rgb(240, 128, 128)
indianred		#CD5C5C	rgb(205, 92, 92)
crimson		#DC143C	rgb(220, 20, 60)
firebrick		#B22222	rgb(178, 34, 34)
darkred		#8B0000	rgb(139, 0, 0)
red		#FF0000	rgb(255, 0, 0)

オレンジ系

カラーネーム	カラーサンプル	カラーコード	RGB
orangered		#FF4500	rgb(255, 69, 0)
tomato		#FF6347	rgb(255, 99, 71)
coral		#FF7F50	rgb(255, 127, 80)
darkorange		#FF8C00	rgb(255, 140, 0)
orange		#FFA500	rgb(255, 165, 0)

黄色系

カラーネーム	カラーサンプル	カラーコード	RGB
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)
gold		#FFD700	rgb(255, 215, 0)

茶系

カラーネーム	カラーサンプル	カラーコード	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
darkolivegreen		#556B2F	rgb(85, 107, 47)
olive		#808000	rgb(128, 128, 0)
olivedrab		#6B8E23	rgb(107, 142, 35)
yellowgreen		#9ACD32	rgb(154, 205, 50)
limegreen		#32CD32	rgb(50, 205, 50)
lime		#00FF00	rgb(0, 255, 0)
lawngreen		#7CFC00	rgb(124, 252, 0)
chartreuse		#7FFF00	rgb(127, 255, 0)
greenyellow		#ADFF2F	rgb(173, 255, 47)
springgreen		#00FF7F	rgb(0, 255, 127)
mediumspringgreen		#00FA9A	rgb(0, 250, 154)
lightgreen		#90EE90	rgb(144, 238, 144)
palegreen		#98FB98	rgb(152, 251, 152)
darkseagreen		#8FBC8B	rgb(143, 188, 139)
mediumaquamarine		#66CDAA	rgb(102, 205, 170)
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)

シアン系

カラーネーム	カラーサンプル	カラーコード	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)
lightseagreen		#20B2AA	rgb(32, 178, 170)
cadetblue		#5F9EA0	rgb(95, 158, 160)
darkcyan		#008B8B	rgb(0, 139, 139)
teal		#008080	rgb(0, 128, 128)

青系

カラーネーム	カラーサンプル	カラーコード	RGB
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)
steelblue		#4682B4	rgb(70, 130, 180)
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)
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)
rebeccapurple		#663399	rgb(102, 51, 153)
indigo		#4B0082	rgb(75, 0, 130)
darkslateblue		#483D8B	rgb(72, 61, 139)
slateblue		#6A5ACD	rgb(106, 90, 205)
mediumslateblue		#7B68EE	rgb(123, 104, 238)