本サイトはアフィリエイト広告を利用しています

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

2024.04.102024.06.14

－スポンサーリンク－

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)

配色アイデア手帖めくって見つける新しいデザインの本［完全保存版］第2版 [ 桜井輝子 ]

楽天ブックス

Yahooショッピング

ポチップ

ビビット系

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

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

配色アイデア手帖日本の美しい色と言葉心に響く和のデザインがつくれる本［完全保存版］ [ 桜井輝子 ]

楽天ブックス

Yahooショッピング

ポチップ

色別

黒・灰色

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

見てわかる、迷わず決まる配色アイデア3色だけでセンスのいい色 [ ingectar-e ]

楽天ブックス

Yahooショッピング

ポチップ

ピンク系

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

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色PART2 （見てわかる迷わず決まる） [ ingectar-e ]

楽天ブックス

Yahooショッピング

ポチップ

赤系

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

配色アイデア手帖色とイラストかわいい世界観を作るヒントが詰まった本［完全保存版］ [ サタケシュンスケ ]

楽天ブックス

Yahooショッピング

ポチップ

オレンジ系

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

配色デザインインスピレーションブック [ Power　Design　Inc． ]

楽天ブックス

Yahooショッピング

ポチップ

シアン系

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

配色デザインインスピレーションブック（2） [ Power　Design　Inc． ]

楽天ブックス

Yahooショッピング

ポチップ

青系

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

配色デザインインスピレーションブック3 [ Power Design Inc. ]

楽天ブックス

Yahooショッピング

ポチップ

紫系

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

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