カラーコード一覧

HTMLで使える名前付きの148色について、色名・HEXコード・RGB値・HSL値を一覧にしたカラーコード表です。色名やコードで検索し、色の系統で絞り込み、名前・色相・明るさで並べ替え、ワンクリックで値をコピーできます。スマホでもすぐに見られます。

出典：W3C – CSS Color Module Level 4: Named Colors （148色名とその値）。更新日：2026年10月2日

色名またはHEXコードで検索

色の系統

並べ替え

148色中 148色

aliceblue#F0F8FFrgb(240, 248, 255)hsl(208, 100%, 97%)黒の文字とのコントラスト比：19.6 : 1
antiquewhite#FAEBD7rgb(250, 235, 215)hsl(34, 78%, 91%)黒の文字とのコントラスト比：17.9 : 1
aqua#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)黒の文字とのコントラスト比：16.7 : 1
aquamarine#7FFFD4rgb(127, 255, 212)hsl(160, 100%, 75%)黒の文字とのコントラスト比：17.2 : 1
azure#F0FFFFrgb(240, 255, 255)hsl(180, 100%, 97%)黒の文字とのコントラスト比：20.5 : 1
beige#F5F5DCrgb(245, 245, 220)hsl(60, 56%, 91%)黒の文字とのコントラスト比：19.0 : 1
bisque#FFE4C4rgb(255, 228, 196)hsl(33, 100%, 88%)黒の文字とのコントラスト比：17.1 : 1
black#000000rgb(0, 0, 0)hsl(0, 0%, 0%)白の文字とのコントラスト比：21.0 : 1
blanchedalmond#FFEBCDrgb(255, 235, 205)hsl(36, 100%, 90%)黒の文字とのコントラスト比：18.0 : 1
blue#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)白の文字とのコントラスト比：8.6 : 1
blueviolet#8A2BE2rgb(138, 43, 226)hsl(271, 76%, 53%)白の文字とのコントラスト比：6.0 : 1
brown#A52A2Argb(165, 42, 42)hsl(0, 59%, 41%)白の文字とのコントラスト比：7.1 : 1
burlywood#DEB887rgb(222, 184, 135)hsl(34, 57%, 70%)黒の文字とのコントラスト比：11.3 : 1
cadetblue#5F9EA0rgb(95, 158, 160)hsl(182, 25%, 50%)黒の文字とのコントラスト比：6.9 : 1
chartreuse#7FFF00rgb(127, 255, 0)hsl(90, 100%, 50%)黒の文字とのコントラスト比：16.2 : 1
chocolate#D2691Ergb(210, 105, 30)hsl(25, 75%, 47%)黒の文字とのコントラスト比：5.8 : 1
coral#FF7F50rgb(255, 127, 80)hsl(16, 100%, 66%)黒の文字とのコントラスト比：8.4 : 1
cornflowerblue#6495EDrgb(100, 149, 237)hsl(219, 79%, 66%)黒の文字とのコントラスト比：7.1 : 1
cornsilk#FFF8DCrgb(255, 248, 220)hsl(48, 100%, 93%)黒の文字とのコントラスト比：19.7 : 1
crimson#DC143Crgb(220, 20, 60)hsl(348, 83%, 47%)白の文字とのコントラスト比：5.0 : 1
cyan#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)黒の文字とのコントラスト比：16.7 : 1
darkblue#00008Brgb(0, 0, 139)hsl(240, 100%, 27%)白の文字とのコントラスト比：15.3 : 1
darkcyan#008B8Brgb(0, 139, 139)hsl(180, 100%, 27%)黒の文字とのコントラスト比：5.1 : 1
darkgoldenrod#B8860Brgb(184, 134, 11)hsl(43, 89%, 38%)黒の文字とのコントラスト比：6.5 : 1
darkgray#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)黒の文字とのコントラスト比：8.9 : 1
darkgreen#006400rgb(0, 100, 0)hsl(120, 100%, 20%)白の文字とのコントラスト比：7.4 : 1
darkgrey#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)黒の文字とのコントラスト比：8.9 : 1
darkkhaki#BDB76Brgb(189, 183, 107)hsl(56, 38%, 58%)黒の文字とのコントラスト比：10.1 : 1
darkmagenta#8B008Brgb(139, 0, 139)hsl(300, 100%, 27%)白の文字とのコントラスト比：8.5 : 1
darkolivegreen#556B2Frgb(85, 107, 47)hsl(82, 39%, 30%)白の文字とのコントラスト比：5.9 : 1
darkorange#FF8C00rgb(255, 140, 0)hsl(33, 100%, 50%)黒の文字とのコントラスト比：9.0 : 1
darkorchid#9932CCrgb(153, 50, 204)hsl(280, 61%, 50%)白の文字とのコントラスト比：5.7 : 1
darkred#8B0000rgb(139, 0, 0)hsl(0, 100%, 27%)白の文字とのコントラスト比：10.0 : 1
darksalmon#E9967Argb(233, 150, 122)hsl(15, 72%, 70%)黒の文字とのコントラスト比：9.1 : 1
darkseagreen#8FBC8Frgb(143, 188, 143)hsl(120, 25%, 65%)黒の文字とのコントラスト比：9.8 : 1
darkslateblue#483D8Brgb(72, 61, 139)hsl(248, 39%, 39%)白の文字とのコントラスト比：9.1 : 1
darkslategray#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 25%)白の文字とのコントラスト比：8.9 : 1
darkslategrey#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 25%)白の文字とのコントラスト比：8.9 : 1
darkturquoise#00CED1rgb(0, 206, 209)hsl(181, 100%, 41%)黒の文字とのコントラスト比：10.7 : 1
darkviolet#9400D3rgb(148, 0, 211)hsl(282, 100%, 41%)白の文字とのコントラスト比：6.6 : 1
deeppink#FF1493rgb(255, 20, 147)hsl(328, 100%, 54%)黒の文字とのコントラスト比：5.8 : 1
deepskyblue#00BFFFrgb(0, 191, 255)hsl(195, 100%, 50%)黒の文字とのコントラスト比：9.9 : 1
dimgray#696969rgb(105, 105, 105)hsl(0, 0%, 41%)白の文字とのコントラスト比：5.5 : 1
dimgrey#696969rgb(105, 105, 105)hsl(0, 0%, 41%)白の文字とのコントラスト比：5.5 : 1
dodgerblue#1E90FFrgb(30, 144, 255)hsl(210, 100%, 56%)黒の文字とのコントラスト比：6.5 : 1
firebrick#B22222rgb(178, 34, 34)hsl(0, 68%, 42%)白の文字とのコントラスト比：6.7 : 1
floralwhite#FFFAF0rgb(255, 250, 240)hsl(40, 100%, 97%)黒の文字とのコントラスト比：20.2 : 1
forestgreen#228B22rgb(34, 139, 34)hsl(120, 61%, 34%)黒の文字とのコントラスト比：4.8 : 1
fuchsia#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)黒の文字とのコントラスト比：6.7 : 1
gainsboro#DCDCDCrgb(220, 220, 220)hsl(0, 0%, 86%)黒の文字とのコントラスト比：15.3 : 1
ghostwhite#F8F8FFrgb(248, 248, 255)hsl(240, 100%, 99%)黒の文字とのコントラスト比：19.9 : 1
gold#FFD700rgb(255, 215, 0)hsl(51, 100%, 50%)黒の文字とのコントラスト比：15.0 : 1
goldenrod#DAA520rgb(218, 165, 32)hsl(43, 74%, 49%)黒の文字とのコントラスト比：9.4 : 1
gray#808080rgb(128, 128, 128)hsl(0, 0%, 50%)黒の文字とのコントラスト比：5.3 : 1
green#008000rgb(0, 128, 0)hsl(120, 100%, 25%)白の文字とのコントラスト比：5.1 : 1
greenyellow#ADFF2Frgb(173, 255, 47)hsl(84, 100%, 59%)黒の文字とのコントラスト比：17.1 : 1
grey#808080rgb(128, 128, 128)hsl(0, 0%, 50%)黒の文字とのコントラスト比：5.3 : 1
honeydew#F0FFF0rgb(240, 255, 240)hsl(120, 100%, 97%)黒の文字とのコントラスト比：20.3 : 1
hotpink#FF69B4rgb(255, 105, 180)hsl(330, 100%, 71%)黒の文字とのコントラスト比：7.9 : 1
indianred#CD5C5Crgb(205, 92, 92)hsl(0, 53%, 58%)黒の文字とのコントラスト比：5.3 : 1
indigo#4B0082rgb(75, 0, 130)hsl(275, 100%, 25%)白の文字とのコントラスト比：13.0 : 1
ivory#FFFFF0rgb(255, 255, 240)hsl(60, 100%, 97%)黒の文字とのコントラスト比：20.8 : 1
khaki#F0E68Crgb(240, 230, 140)hsl(54, 77%, 75%)黒の文字とのコントラスト比：16.4 : 1
lavender#E6E6FArgb(230, 230, 250)hsl(240, 67%, 94%)黒の文字とのコントラスト比：17.1 : 1
lavenderblush#FFF0F5rgb(255, 240, 245)hsl(340, 100%, 97%)黒の文字とのコントラスト比：19.0 : 1
lawngreen#7CFC00rgb(124, 252, 0)hsl(90, 100%, 49%)黒の文字とのコントラスト比：15.8 : 1
lemonchiffon#FFFACDrgb(255, 250, 205)hsl(54, 100%, 90%)黒の文字とのコントラスト比：19.8 : 1
lightblue#ADD8E6rgb(173, 216, 230)hsl(195, 53%, 79%)黒の文字とのコントラスト比：13.7 : 1
lightcoral#F08080rgb(240, 128, 128)hsl(0, 79%, 72%)黒の文字とのコントラスト比：8.1 : 1
lightcyan#E0FFFFrgb(224, 255, 255)hsl(180, 100%, 94%)黒の文字とのコントラスト比：19.9 : 1
lightgoldenrodyellow#FAFAD2rgb(250, 250, 210)hsl(60, 80%, 90%)黒の文字とのコントラスト比：19.7 : 1
lightgray#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)黒の文字とのコントラスト比：14.0 : 1
lightgreen#90EE90rgb(144, 238, 144)hsl(120, 73%, 75%)黒の文字とのコントラスト比：14.8 : 1
lightgrey#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)黒の文字とのコントラスト比：14.0 : 1
lightpink#FFB6C1rgb(255, 182, 193)hsl(351, 100%, 86%)黒の文字とのコントラスト比：12.7 : 1
lightsalmon#FFA07Argb(255, 160, 122)hsl(17, 100%, 74%)黒の文字とのコントラスト比：10.6 : 1
lightseagreen#20B2AArgb(32, 178, 170)hsl(177, 70%, 41%)黒の文字とのコントラスト比：8.0 : 1
lightskyblue#87CEFArgb(135, 206, 250)hsl(203, 92%, 75%)黒の文字とのコントラスト比：12.2 : 1
lightslategray#778899rgb(119, 136, 153)hsl(210, 14%, 53%)黒の文字とのコントラスト比：5.8 : 1
lightslategrey#778899rgb(119, 136, 153)hsl(210, 14%, 53%)黒の文字とのコントラスト比：5.8 : 1
lightsteelblue#B0C4DErgb(176, 196, 222)hsl(214, 41%, 78%)黒の文字とのコントラスト比：11.8 : 1
lightyellow#FFFFE0rgb(255, 255, 224)hsl(60, 100%, 94%)黒の文字とのコントラスト比：20.6 : 1
lime#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)黒の文字とのコントラスト比：15.3 : 1
limegreen#32CD32rgb(50, 205, 50)hsl(120, 61%, 50%)黒の文字とのコントラスト比：9.9 : 1
linen#FAF0E6rgb(250, 240, 230)hsl(30, 67%, 94%)黒の文字とのコントラスト比：18.7 : 1
magenta#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)黒の文字とのコントラスト比：6.7 : 1
maroon#800000rgb(128, 0, 0)hsl(0, 100%, 25%)白の文字とのコントラスト比：10.9 : 1
mediumaquamarine#66CDAArgb(102, 205, 170)hsl(160, 51%, 60%)黒の文字とのコントラスト比：10.9 : 1
mediumblue#0000CDrgb(0, 0, 205)hsl(240, 100%, 40%)白の文字とのコントラスト比：11.2 : 1
mediumorchid#BA55D3rgb(186, 85, 211)hsl(288, 59%, 58%)黒の文字とのコントラスト比：5.3 : 1
mediumpurple#9370DBrgb(147, 112, 219)hsl(260, 60%, 65%)黒の文字とのコントラスト比：5.6 : 1
mediumseagreen#3CB371rgb(60, 179, 113)hsl(147, 50%, 47%)黒の文字とのコントラスト比：7.9 : 1
mediumslateblue#7B68EErgb(123, 104, 238)hsl(249, 80%, 67%)黒の文字とのコントラスト比：5.1 : 1
mediumspringgreen#00FA9Argb(0, 250, 154)hsl(157, 100%, 49%)黒の文字とのコントラスト比：15.1 : 1
mediumturquoise#48D1CCrgb(72, 209, 204)hsl(178, 60%, 55%)黒の文字とのコントラスト比：11.3 : 1
mediumvioletred#C71585rgb(199, 21, 133)hsl(322, 81%, 43%)白の文字とのコントラスト比：5.4 : 1
midnightblue#191970rgb(25, 25, 112)hsl(240, 64%, 27%)白の文字とのコントラスト比：14.8 : 1
mintcream#F5FFFArgb(245, 255, 250)hsl(150, 100%, 98%)黒の文字とのコントラスト比：20.6 : 1
mistyrose#FFE4E1rgb(255, 228, 225)hsl(6, 100%, 94%)黒の文字とのコントラスト比：17.4 : 1
moccasin#FFE4B5rgb(255, 228, 181)hsl(38, 100%, 85%)黒の文字とのコントラスト比：17.0 : 1
navajowhite#FFDEADrgb(255, 222, 173)hsl(36, 100%, 84%)黒の文字とのコントラスト比：16.3 : 1
navy#000080rgb(0, 0, 128)hsl(240, 100%, 25%)白の文字とのコントラスト比：16.0 : 1
oldlace#FDF5E6rgb(253, 245, 230)hsl(39, 85%, 95%)黒の文字とのコントラスト比：19.4 : 1
olive#808000rgb(128, 128, 0)hsl(60, 100%, 25%)黒の文字とのコントラスト比：5.0 : 1
olivedrab#6B8E23rgb(107, 142, 35)hsl(80, 60%, 35%)黒の文字とのコントラスト比：5.5 : 1
orange#FFA500rgb(255, 165, 0)hsl(39, 100%, 50%)黒の文字とのコントラスト比：10.6 : 1
orangered#FF4500rgb(255, 69, 0)hsl(16, 100%, 50%)黒の文字とのコントラスト比：6.1 : 1
orchid#DA70D6rgb(218, 112, 214)hsl(302, 59%, 65%)黒の文字とのコントラスト比：7.3 : 1
palegoldenrod#EEE8AArgb(238, 232, 170)hsl(55, 67%, 80%)黒の文字とのコントラスト比：16.8 : 1
palegreen#98FB98rgb(152, 251, 152)hsl(120, 93%, 79%)黒の文字とのコントラスト比：16.6 : 1
paleturquoise#AFEEEErgb(175, 238, 238)hsl(180, 65%, 81%)黒の文字とのコントラスト比：16.3 : 1
palevioletred#DB7093rgb(219, 112, 147)hsl(340, 60%, 65%)黒の文字とのコントラスト比：6.8 : 1
papayawhip#FFEFD5rgb(255, 239, 213)hsl(37, 100%, 92%)黒の文字とのコントラスト比：18.6 : 1
peachpuff#FFDAB9rgb(255, 218, 185)hsl(28, 100%, 86%)黒の文字とのコントラスト比：16.0 : 1
peru#CD853Frgb(205, 133, 63)hsl(30, 59%, 53%)黒の文字とのコントラスト比：7.0 : 1
pink#FFC0CBrgb(255, 192, 203)hsl(350, 100%, 88%)黒の文字とのコントラスト比：13.7 : 1
plum#DDA0DDrgb(221, 160, 221)hsl(300, 47%, 75%)黒の文字とのコントラスト比：10.1 : 1
powderblue#B0E0E6rgb(176, 224, 230)hsl(187, 52%, 80%)黒の文字とのコントラスト比：14.7 : 1
purple#800080rgb(128, 0, 128)hsl(300, 100%, 25%)白の文字とのコントラスト比：9.4 : 1
rebeccapurple#663399rgb(102, 51, 153)hsl(270, 50%, 40%)白の文字とのコントラスト比：8.4 : 1
red#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)黒の文字とのコントラスト比：5.3 : 1
rosybrown#BC8F8Frgb(188, 143, 143)hsl(0, 25%, 65%)黒の文字とのコントラスト比：7.5 : 1
royalblue#4169E1rgb(65, 105, 225)hsl(225, 73%, 57%)白の文字とのコントラスト比：4.8 : 1
saddlebrown#8B4513rgb(139, 69, 19)hsl(25, 76%, 31%)白の文字とのコントラスト比：7.1 : 1
salmon#FA8072rgb(250, 128, 114)hsl(6, 93%, 71%)黒の文字とのコントラスト比：8.4 : 1
sandybrown#F4A460rgb(244, 164, 96)hsl(28, 87%, 67%)黒の文字とのコントラスト比：10.3 : 1
seagreen#2E8B57rgb(46, 139, 87)hsl(146, 50%, 36%)黒の文字とのコントラスト比：4.9 : 1
seashell#FFF5EErgb(255, 245, 238)hsl(25, 100%, 97%)黒の文字とのコントラスト比：19.5 : 1
sienna#A0522Drgb(160, 82, 45)hsl(19, 56%, 40%)白の文字とのコントラスト比：5.6 : 1
silver#C0C0C0rgb(192, 192, 192)hsl(0, 0%, 75%)黒の文字とのコントラスト比：11.5 : 1
skyblue#87CEEBrgb(135, 206, 235)hsl(197, 71%, 73%)黒の文字とのコントラスト比：12.1 : 1
slateblue#6A5ACDrgb(106, 90, 205)hsl(248, 53%, 58%)白の文字とのコントラスト比：5.3 : 1
slategray#708090rgb(112, 128, 144)hsl(210, 13%, 50%)黒の文字とのコントラスト比：5.2 : 1
slategrey#708090rgb(112, 128, 144)hsl(210, 13%, 50%)黒の文字とのコントラスト比：5.2 : 1
snow#FFFAFArgb(255, 250, 250)hsl(0, 100%, 99%)黒の文字とのコントラスト比：20.3 : 1
springgreen#00FF7Frgb(0, 255, 127)hsl(150, 100%, 50%)黒の文字とのコントラスト比：15.6 : 1
steelblue#4682B4rgb(70, 130, 180)hsl(207, 44%, 49%)黒の文字とのコントラスト比：5.1 : 1
tan#D2B48Crgb(210, 180, 140)hsl(34, 44%, 69%)黒の文字とのコントラスト比：10.6 : 1
teal#008080rgb(0, 128, 128)hsl(180, 100%, 25%)白の文字とのコントラスト比：4.8 : 1
thistle#D8BFD8rgb(216, 191, 216)hsl(300, 24%, 80%)黒の文字とのコントラスト比：12.4 : 1
tomato#FF6347rgb(255, 99, 71)hsl(9, 100%, 64%)黒の文字とのコントラスト比：7.1 : 1
turquoise#40E0D0rgb(64, 224, 208)hsl(174, 72%, 56%)黒の文字とのコントラスト比：12.8 : 1
violet#EE82EErgb(238, 130, 238)hsl(300, 76%, 72%)黒の文字とのコントラスト比：9.1 : 1
wheat#F5DEB3rgb(245, 222, 179)hsl(39, 77%, 83%)黒の文字とのコントラスト比：16.0 : 1
white#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)黒の文字とのコントラスト比：21.0 : 1
whitesmoke#F5F5F5rgb(245, 245, 245)hsl(0, 0%, 96%)黒の文字とのコントラスト比：19.3 : 1
yellow#FFFF00rgb(255, 255, 0)hsl(60, 100%, 50%)黒の文字とのコントラスト比：19.6 : 1
yellowgreen#9ACD32rgb(154, 205, 50)hsl(80, 61%, 50%)黒の文字とのコントラスト比：11.2 : 1

マイツールボックス

結果

計算方法

要点：HTMLとCSSでは、色をコードだけでなく英語の名前でも指定できます。例えば #FF6347 の代わりに color: tomato と書けます。こうした名前は148個あります。上の表は、それぞれをHEXコード、RGBの各成分、HSL値とともに示します。

表の使い方

検索欄に、名前またはHEXコードの一部を入力します（「blue」「green」「6495ED」など）。
色の系統を選ぶと、赤系、緑系などだけが表示されます。
名前順、色相順（虹の順、グレーは最後）、明るさ順で並べ替えます。
HEX、名前、RGBのボタンを押すと、値がクリップボードにコピーされます。

HEX・RGB・HSL

HEX：赤・緑・青を各00〜FFで表す6桁のコードです（例：#FF6347）。
RGB：同じ成分を0〜255の数値で表します（rgb(255, 99, 71)）。
HSL：色相を角度、彩度と明度を%で表します。色を明るくしたり淡くしたりしたいときに便利です。

文字のコントラスト

各色の下に、その色の上で黒と白のどちらの文字が読みやすいかを、WCAG 2.2のコントラスト比とともに示します。通常の文字ではWCAGが4.5 : 1以上、大きな文字では3 : 1以上を求めています。aquaとcyan、grayとgreyのような同等の名前は、同じ値の別名です。

よくある質問

HTMLとCSSには色名がいくつありますか？

名前付きの色は148個で、aquaとcyan、magentaとfuchsia、grayとgreyのような別名も含みます。これとは別に、transparentとcurrentcolorというキーワードがあります。

CSSで色名はどう書きますか？

そのまま値として書きます。例：color: tomato; や background: cornflowerblue;。名前は英語で、大文字と小文字は区別されません。

赤・緑・青のHEXコードは？

redは#FF0000、lime（純粋な緑）は#00FF00、blueは#0000FFです。CSSのgreenは少し暗い緑で、#008000です。

HEXコードから色名を探すには？

検索欄にコードを入れます。#は付けても付けなくても構いません。同じ値の名前があれば、一覧に表示されます。

その色にはどの文字色が合いますか？

色の下の表示が、黒と白のどちらがコントラストが高いかを示します。読みやすい文字にするには、比率を4.5 : 1以上にしてください。

出典・根拠

更新日：2026年10月2日 · 編集方針

結果