CSSカラーチャート 147+1色 (カラーネーム, HSL, RGB)

投稿


CSSカラーネームおよび、そのHSL・RGB値の一覧です。
彩度(S)・輝度(L)が近いものをまとめて、それぞれ表にしています。

カラーネーム・RGB値は以下を参考にしました。
W3C – CSS Color Module Level 3 [↗]

maroon hsl(0, 100%, 25%) #800000
darkred hsl(0, 100%, 27%) #8b0000
brown hsl(0, 59%, 41%) #a52a2a
firebrick hsl(0, 68%, 42%) #b22222
sienna hsl(19, 56%, 40%) #a0522d
saddlebrown hsl(25, 76%, 31%) #8b4513
darkgoldenrod hsl(43, 89%, 38%) #b8860b
olive hsl(60, 100%, 25%) #808000
olivedrab hsl(80, 60%, 35%) #6b8e23
darkolivegreen hsl(82, 39%, 30%) #556b2f
darkgreen hsl(120, 100%, 20%) #006400
green hsl(120, 100%, 25%) #008000
forestgreen hsl(120, 61%, 34%) #228b22
seagreen hsl(146, 50%, 36%) #2e8b57
darkslategray hsl(180, 25%, 25%) #2f4f4f
darkslategrey hsl(180, 25%, 25%) #2f4f4f
teal hsl(180, 100%, 25%) #008080
darkcyan hsl(180, 100%, 27%) #008b8b
navy hsl(240, 100%, 25%) #000080
midnightblue hsl(240, 64%, 27%) #191970
darkblue hsl(240, 100%, 27%) #00008b
mediumblue hsl(240, 100%, 40%) #0000cd
darkslateblue hsl(248, 39%, 39%) #483d8b
rebeccapurple hsl(270, 50%, 40%) #663399
indigo hsl(275, 100%, 25%) #4b0082
purple hsl(300, 100%, 25%) #800080
darkmagenta hsl(300, 100%, 27%) #8b008b
crimson hsl(348, 83%, 47%) #dc143c
indianred hsl(0, 53%, 58%) #cd5c5c
rosybrown hsl(0, 25%, 65%) #bc8f8f
chocolate hsl(25, 75%, 47%) #d2691e
peru hsl(30, 59%, 53%) #cd853f
goldenrod hsl(43, 74%, 49%) #daa520
darkkhaki hsl(56, 38%, 58%) #bdb76b
yellowgreen hsl(80, 61%, 50%) #9acd32
limegreen hsl(120, 61%, 50%) #32cd32
darkseagreen hsl(120, 25%, 65%) #8fbc8f
mediumseagreen hsl(147, 50%, 47%) #3cb371
mediumaquamarine hsl(160, 51%, 60%) #66cdaa
turquoise hsl(174, 72%, 56%) #40e0d0
lightseagreen hsl(177, 70%, 41%) #20b2aa
mediumturquoise hsl(178, 60%, 55%) #48d1cc
cadetblue hsl(182, 25%, 50%) #5f9ea0
steelblue hsl(207, 44%, 49%) #4682b4
slategray hsl(210, 13%, 50%) #708090
slategrey hsl(210, 13%, 50%) #708090
lightslategray hsl(210, 14%, 53%) #778899
lightslategrey hsl(210, 14%, 53%) #778899
royalblue hsl(225, 73%, 57%) #4169e1
slateblue hsl(248, 53%, 58%) #6a5acd
blueviolet hsl(271, 76%, 53%) #8a2be2
darkorchid hsl(280, 61%, 50%) #9932cc
mediumorchid hsl(288, 59%, 58%) #ba55d3
orchid hsl(302, 59%, 65%) #da70d6
mediumvioletred hsl(322, 81%, 43%) #c71585
red hsl(0, 100%, 50%) #ff0000
orangered hsl(16, 100%, 50%) #ff4500
darkorange hsl(33, 100%, 50%) #ff8c00
orange hsl(39, 100%, 50%) #ffa500
gold hsl(51, 100%, 50%) #ffd700
yellow hsl(60, 100%, 50%) #ffff00
greenyellow hsl(84, 100%, 59%) #adff2f
chartreuse hsl(90, 100%, 50%) #7fff00
lawngreen hsl(90, 100%, 49%) #7cfc00
lime hsl(120, 100%, 50%) #00ff00
springgreen hsl(150, 100%, 50%) #00ff7f
mediumspringgreen hsl(157, 100%, 49%) #00fa9a
cyan hsl(180, 100%, 50%) #00ffff
aqua hsl(180, 100%, 50%) #00ffff
darkturquoise hsl(181, 100%, 41%) #00ced1
deepskyblue hsl(195, 100%, 50%) #00bfff
dodgerblue hsl(210, 100%, 56%) #1e90ff
blue hsl(240, 100%, 50%) #0000ff
darkviolet hsl(282, 100%, 41%) #9400d3
magenta hsl(300, 100%, 50%) #ff00ff
fuchsia hsl(300, 100%, 50%) #ff00ff
deeppink hsl(328, 100%, 54%) #ff1493
lightcoral hsl(0, 79%, 72%) #f08080
salmon hsl(6, 93%, 71%) #fa8072
tomato hsl(9, 100%, 64%) #ff6347
darksalmon hsl(15, 72%, 70%) #e9967a
coral hsl(16, 100%, 66%) #ff7f50
lightsalmon hsl(17, 100%, 74%) #ffa07a
sandybrown hsl(28, 87%, 67%) #f4a460
burlywood hsl(34, 57%, 70%) #deb887
tan hsl(34, 44%, 69%) #d2b48c
wheat hsl(39, 77%, 83%) #f5deb3
khaki hsl(54, 77%, 75%) #f0e68c
palegoldenrod hsl(55, 67%, 80%) #eee8aa
lightgreen hsl(120, 73%, 75%) #90ee90
palegreen hsl(120, 93%, 79%) #98fb98
aquamarine hsl(160, 100%, 75%) #7fffd4
paleturquoise hsl(180, 65%, 81%) #afeeee
powderblue hsl(187, 52%, 80%) #b0e0e6
lightblue hsl(195, 53%, 79%) #add8e6
skyblue hsl(197, 71%, 73%) #87ceeb
lightskyblue hsl(203, 92%, 75%) #87cefa
lightsteelblue hsl(214, 41%, 78%) #b0c4de
cornflowerblue hsl(219, 79%, 66%) #6495ed
mediumslateblue hsl(249, 80%, 67%) #7b68ee
mediumpurple hsl(260, 60%, 65%) #9370db
violet hsl(300, 76%, 72%) #ee82ee
plum hsl(300, 47%, 75%) #dda0dd
thistle hsl(300, 24%, 80%) #d8bfd8
hotpink hsl(330, 100%, 71%) #ff69b4
palevioletred hsl(340, 60%, 65%) #db7093
pink hsl(350, 100%, 88%) #ffc0cb
lightpink hsl(351, 100%, 86%) #ffb6c1
snow hsl(0, 100%, 99%) #fffafa
mistyrose hsl(6, 100%, 94%) #ffe4e1
seashell hsl(25, 100%, 97%) #fff5ee
peachpuff hsl(28, 100%, 86%) #ffdab9
linen hsl(30, 67%, 94%) #faf0e6
bisque hsl(33, 100%, 88%) #ffe4c4
antiquewhite hsl(34, 78%, 91%) #faebd7
navajowhite hsl(36, 100%, 84%) #ffdead
blanchedalmond hsl(36, 100%, 90%) #ffebcd
papayawhip hsl(37, 100%, 92%) #ffefd5
moccasin hsl(38, 100%, 85%) #ffe4b5
oldlace hsl(39, 85%, 95%) #fdf5e6
floralwhite hsl(40, 100%, 97%) #fffaf0
cornsilk hsl(48, 100%, 93%) #fff8dc
lemonchiffon hsl(54, 100%, 90%) #fffacd
lightgoldenrodyellow hsl(60, 80%, 90%) #fafad2
beige hsl(60, 56%, 91%) #f5f5dc
lightyellow hsl(60, 100%, 94%) #ffffe0
ivory hsl(60, 100%, 97%) #fffff0
honeydew hsl(120, 100%, 97%) #f0fff0
mintcream hsl(150, 100%, 98%) #f5fffa
lightcyan hsl(180, 100%, 94%) #e0ffff
azure hsl(180, 100%, 97%) #f0ffff
aliceblue hsl(208, 100%, 97%) #f0f8ff
lavender hsl(240, 67%, 94%) #e6e6fa
ghostwhite hsl(240, 100%, 99%) #f8f8ff
lavenderblush hsl(340, 100%, 97%) #fff0f5
black hsl(0, 0%, 0%) #000000
dimgray hsl(0, 0%, 41%) #696969
dimgrey hsl(0, 0%, 41%) #696969
gray hsl(0, 0%, 50%) #808080
grey hsl(0, 0%, 50%) #808080
darkgray hsl(0, 0%, 66%) #a9a9a9
darkgrey hsl(0, 0%, 66%) #a9a9a9
silver hsl(0, 0%, 75%) #c0c0c0
lightgray hsl(0, 0%, 83%) #d3d3d3
lightgrey hsl(0, 0%, 83%) #d3d3d3
gainsboro hsl(0, 0%, 86%) #dcdcdc
whitesmoke hsl(0, 0%, 96%) #f5f5f5
white hsl(0, 0%, 100%) #ffffff

* * * 備考 * * *

CSS3で定義されている147色のうち、次の2組の色は同じ色です。
aqua, cyan (#00ffff)
fuchsia, magenta (#ff00ff)

また、”-gray”と”-grey”で終わる7組も同色です。
darkgray, darkgrey (#a9a9a9)
darkslategray, darkslategrey (#2f4f4f)
dimgray, dimgrey (#696969)
gray, grey (#808080)
lightgray, lightgrey (#d3d3d3)
lightslategray, lightslategrey (#778899)
slategray, slategrey (#708090)

CSS4では、新色”rebeccapurple”が提案されています。(参照→W3C – CSS Color Module Level 4 Editor’s Draft [↗])
rebeccapurple (#663399)
なぜ1色だけ追加されるの?と気になる方は以下のサイトに興味深い記事が書かれていますので、どうぞ。
本の虫: rebeccapurpleがCSS 4 colorに提案された経緯 [↗]


👉 HSL・RGBカラーチャート (HTML, CSS用)もどうぞ





コメントを残す

メールアドレスが公開されることはありません。