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

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

- スポンサーリンク -

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

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

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

タイプ別

やさしい色

カラーネームカラーサンプルカラーコードRGB
snow#FFFFF0rgb(255, 255, 240)
pink#FFC0CBrgb(255, 192, 203)
salmon#FA8072rgb(250, 128, 114)
plum#DDA0DDrgb(221, 160, 221)
thistle#D8BFD8rgb(216, 191, 216)
lightblue#ADD8E6rgb(173, 216, 230)
powderblue#B0E0E6rgb(176, 224, 230)
lightgreen#90EE90rgb(144, 238, 144)
palegreen#98FB98rgb(152, 251, 152)
tan#D2B48C
rgb(210, 180, 140)
rosybrown#BC8F8Frgb(188, 143, 143)

Light系

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

カラーネームカラーサンプルカラーコードRGB
lightgray#FFFFF0rgb(255, 255, 240)
lightslategray#FFC0CBrgb(255, 192, 203)
lightpink#FA8072rgb(250, 128, 114)
lightcoral#F08080rgb(240, 128, 128)
lightsalmon#DDA0DDrgb(221, 160, 221)
lightyellow#FFFFE0rgb(255, 255, 224)
lightgoldenrodyellow#FAFAD2rgb(250, 250, 210)
lightgreen#90EE90rgb(144, 238, 144)
lightseagreen#20B2AArgb(32, 178, 170)
lightcyan#E0FFFFrgb(224, 255, 255)
lightblue#ADD8E6rgb(173, 216, 230)
lightsteelblue#B0C4DErgb(176, 196, 222)
lightskyblue#87CEFArgb(135, 206, 250)

ビビット系

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

カラーネームカラーサンプルカラーコードRGB
red#FF0000rgb(255, 0, 0)
purple#800080rgb(128, 0, 128)
blueviolet#8A2BE2rgb(138, 43, 226)
deeppink#FF1493rgb(255, 20, 147)
fuchsia#FF00FFrgb(255, 0, 255)
lime#00FF00rgb(0, 255, 0)
yellow#FFFF00rgb(255, 255, 0)
blue#0000FFrgb(0, 0, 255)
aqua#00FFFFrgb(0, 255, 255)
orange#FFA500rgb(255, 165, 0)

ダーク系

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

カラーネームカラーサンプル16進数RGB
darkcyan#008B8Brgb(0, 139, 139)
darkgoldenrod#B8860Brgb(184, 134, 11)
darkgray#A9A9A9rgb(169, 169, 169)
darkgreen#006400rgb(0, 100, 0)
darkkhaki#BDB76Brgb(189, 183, 107)
darkmagenta#8B008Brgb(139, 0, 139)
darkolivegreen#556B2Frgb(85, 107, 47)
darkorange#FF8C00rgb(255, 140, 0)
darkred#8B0000rgb(139, 0, 0)
darksalmon#E9967Argb(233, 150, 122)
darkseagreen#8FBC8Frgb(143, 188, 139)
darkslateblue#483D8Brgb(72, 61, 139)
darkslategray#2F4F4Frgb(47, 79, 79)
dimgray#696969rgb(105, 105, 105)

色別

黒・灰色

カラーネームカラーサンプルカラーコードRGB
gainsboro#DCDCDCrgb(220, 220, 220)
lightgray#D3D3D3rgb(211, 211, 211)
silver#C0C0C0rgb(192, 192, 192)
darkgray#A9A9A9rgb(169, 169, 169)
gray#808080rgb(128, 128, 128)
dimgray#696969rgb(105, 105, 105)
lightslategray#778899rgb(119, 136, 153)
slategray#708090rgb(112, 128, 144)
darkslategray#2F4F4Frgb(47, 79, 79)
black#000000rgb(0, 0, 0)

白系

カラーネームカラーサンプルカラーコードRGB
white#FFFFFFrgb(255, 255, 255)
snow#FFFAFArgb(255, 250, 250)
honeydew#F0FFF0rgb(240, 255, 240)
mintcream#F5FFFArgb(245, 255, 250)
azure#F0FFFFrgb(240, 255, 255)
aliceblue#F0F8FFrgb(240, 248, 255)
ghostwhite#F8F8FFrgb(248, 248, 255)
whitesmoke#F5F5F5rgb(245, 245, 245)
seashell#FFF5EErgb(255, 245, 238)
beige#F5F5DCrgb(245, 245, 220)
oldLace#FDF5E6rgb(253, 245, 230)
floralwhite#FFFAF0rgb(255, 250, 240)
ivory#FFFFF0rgb(255, 255, 240)
antiquewhite#FAEBD7rgb(250, 235, 215)
linen#FAF0E6rgb(250, 240, 230)
lavenderblush#FFF0F5rgb(255, 240, 245)
mistyrose#FFE4E1rgb(255, 228, 225)

ピンク系

カラーネームカラーサンプルカラーコードRGB
pink#FFC0CBrgb(255, 192, 203)
lightpink#FFB6C1rgb(255, 182, 193)
hotpink#FF69B4rgb(255, 105, 180)
deeppink#FF1493rgb(255, 20, 147)
mediumvioletred#C71585rgb(199, 21, 133)
palevioletred#DB7093rgb(219, 112, 147)

赤系

カラーネームカラーサンプルカラーコードRGB
lightsalmon#FFA07Argb(255, 160, 122)
salmon#FA8072rgb(250, 128, 114)
darksalmon#E9967Argb(233, 150, 122)
lightcoral#F08080rgb(240, 128, 128)
indianred#CD5C5Crgb(205, 92, 92)
crimson#DC143Crgb(220, 20, 60)
firebrick#B22222rgb(178, 34, 34)
darkred#8B0000rgb(139, 0, 0)
red#FF0000rgb(255, 0, 0)

オレンジ系

カラーネームカラーサンプルカラーコードRGB
orangered#FF4500rgb(255, 69, 0)
tomato#FF6347rgb(255, 99, 71)
coral#FF7F50rgb(255, 127, 80)
darkorange#FF8C00rgb(255, 140, 0)
orange#FFA500rgb(255, 165, 0)

黄色系

カラーネームカラーサンプルカラーコードRGB
yellow#FFFF00rgb(255, 255, 0)
lightyellow#FFFFE0rgb(255, 255, 224)
lemonchiffon#FFFACDrgb(255, 250, 205)
lightgoldenrodyellow#FAFAD2rgb(250, 250, 210)
papayawhip#FFEFD5rgb(255, 239, 213)
moccasin#FFE4B5rgb(255, 228, 181)
peachpuff#FFDAB9rgb(255, 218, 185)
palegoldenrod#EEE8AArgb(238, 232, 170)
khaki#F0E68Crgb(240, 230, 140)
darkkhaki#BDB76Brgb(189, 183, 107)
gold#FFD700rgb(255, 215, 0)

茶系

カラーネームカラーサンプルカラーコードRGB
cornsilk#FFF8DCrgb(255, 248, 220)
blanchedalmond#FFEBCDrgb(255, 235, 205)
bisque#FFE4C4rgb(255, 228, 196)
navajowhite#FFDEADrgb(255, 222, 173)
wheat#F5DEB3rgb(245, 222, 179)
burlywood#DEB887rgb(222, 184, 135)
tan#D2B48Crgb(210, 180, 140)
rosybrown#BC8F8Frgb(188, 143, 143)
sandybrown#F4A460rgb(244, 164, 96)
goldenrod#DAA520rgb(218, 165, 32)
darkgoldenrod#B8860Brgb(184, 134, 11)
peru#CD853Frgb(205, 133, 63)
chocolate#D2691Ergb(210, 105, 30)
saddlebrown#8B4513rgb(139, 69, 19)
sienna#A0522Drgb(160, 82, 45)
brown#A52A2Argb(165, 42, 42)
maroon#800000rgb(128, 0, 0)

緑系

カラーネームカラーサンプルカラーコードRGB
darkolivegreen#556B2Frgb(85, 107, 47)
olive#808000rgb(128, 128, 0)
olivedrab#6B8E23rgb(107, 142, 35)
yellowgreen#9ACD32rgb(154, 205, 50)
limegreen#32CD32rgb(50, 205, 50)
lime#00FF00rgb(0, 255, 0)
lawngreen#7CFC00rgb(124, 252, 0)
chartreuse#7FFF00rgb(127, 255, 0)
greenyellow#ADFF2Frgb(173, 255, 47)
springgreen#00FF7Frgb(0, 255, 127)
mediumspringgreen#00FA9Argb(0, 250, 154)
lightgreen#90EE90rgb(144, 238, 144)
palegreen#98FB98rgb(152, 251, 152)
darkseagreen#8FBC8Brgb(143, 188, 139)
mediumaquamarine#66CDAArgb(102, 205, 170)
mediumseagreen#3CB371rgb(60, 179, 113)
seagreen#2E8B57rgb(46, 139, 87)
forestgreen#228B22rgb(34, 139, 34)
green#008000rgb(0, 128, 0)
darkgreen#006400rgb(0, 100, 0)

シアン系

カラーネームカラーサンプルカラーコードRGB
aqua#00FFFFrgb(0, 255, 255)
cyan#00FFFFrgb(0, 255, 255)
lightcyan#E0FFFFrgb(224, 255, 255)
paleturquoise#AFEEEErgb(175, 238, 238)
aquamarine#7FFFD4rgb(127, 255, 212)
turquoise#40E0D0rgb(64, 224, 208)
mediumturquoise#48D1CCrgb(72, 209, 204)
darkturquoise#00CED1rgb(0, 206, 209)
lightseagreen#20B2AArgb(32, 178, 170)
cadetblue#5F9EA0rgb(95, 158, 160)
darkcyan#008B8Brgb(0, 139, 139)
teal#008080rgb(0, 128, 128)

青系

カラーネームカラーサンプルカラーコードRGB
lightsteelblue#B0C4DErgb(176, 196, 222)
powderblue#B0E0E6rgb(176, 224, 230)
lightblue#ADD8E6rgb(173, 216, 230)
skyblue#87CEEBrgb(135, 206, 235)
lightskyblue#87CEFArgb(135, 206, 250)
deepskyblue#00BFFFrgb(0, 191, 255)
dodgerblue#1E90FFrgb(30, 144, 255)
cornflowerblue#6495EDrgb(100, 149, 237)
steelblue#4682B4rgb(70, 130, 180)
royalblue#4169E1rgb(65, 105, 225)
blue#0000FFrgb(0, 0, 255)
mediumblue#0000CDrgb(0, 0, 205)
darkblue#00008Brgb(0, 0, 139)
navy#000080rgb(0, 0, 128)
midnightblue#191970rgb(25, 25, 112)

紫系

カラーネームカラーサンプルカラーコードRGB
lavender#E6E6FArgb(230, 230, 250)
thistle#D8BFD8rgb(216, 191, 216)
plum#DDA0DDrgb(221, 160, 221)
violet#EE82EErgb(238, 130, 238)
orchid#DA70D6rgb(218, 112, 214)
fuchsia#FF00FFrgb(255, 0, 255)
magenta#FF00FFrgb(255, 0, 255)
mediumorchid#BA55D3rgb(186, 85, 211)
mediumpurple#9370DBrgb(147, 112, 219)
blueviolet#8A2BE2rgb(138, 43, 226)
darkviolet#9400D3rgb(148, 0, 211)
darkorchid#9932CCrgb(153, 50, 204)
darkmagenta#8B008Brgb(139, 0, 139)
purple#800080rgb(128, 0, 128)
rebeccapurple#663399rgb(102, 51, 153)
indigo#4B0082rgb(75, 0, 130)
darkslateblue#483D8Brgb(72, 61, 139)
slateblue#6A5ACDrgb(106, 90, 205)
mediumslateblue#7B68EErgb(123, 104, 238)


- スポンサーリンク -
HTML&CSS
タイトルとURLをコピーしました