CSSで使えるカラーネーム一覧表

CSSのcolorやbackgroundなどの色指定に使えるカラーネームを一覧にしました。

CSS3で定義されているカラーネームは147色。

色の指定にはカラーコードを使うのが一般的ですが、カラーネームのほうが色を思い浮かべやすいので、色を探す時には便利かな～と思ってます。

ただ、読めない、意味が分からない、色が思い浮かばない…という色もあるので、読み方や意味もわかるようにしてみました。

パッと使える覚えやすいカラーネーム

定番の、black、White、red、blue、green、Yellow 以外で、覚えやすく使いやすいカラーネーム。

継続的に使うというより、テスト的に色指定が必要な時に覚えておくと便利なので。

カラーネーム	カラーサンプル	カラーコード	RGB	読み方
silver		#C0C0C0	rgb(192, 192, 192)	シルバー
gray [1]		#808080	rgb(128, 128, 128)	グレー
pink		#FFC0CB	rgb(255, 192, 203)	ピンク
hotpink		#FF69B4	rgb(255, 105, 180)	ホットピンク
tomato		#FF6347	rgb(255, 99, 71)	トマト
plum		#DDA0DD	rgb(221, 160, 221)	プラム
gold		#FFD700	rgb(255, 215, 0)	ゴールド
yellowgreen		#9ACD32	rgb(154, 205, 50)	イエローグリーン
seagreen		#2E8B57	rgb(46, 139, 87)	シーグリーン
navy		#000080	rgb(0, 0, 128)	ネイビー
skyblue		#87CEEB	rgb(135, 206, 235)	スカイブルー
tan		#D2B48C	rgb(210, 180, 140)	タン
brown		#A52A2A	rgb(165, 42, 42)	ブラウン

HTML カラーネーム/カラーコード/RGB/

HTMLやCSSで色を指定するときに使えるカラーネーム一覧。

HTML基本16色

HTMLで定義されている基本の16色。基本色のカラーネームなら、どのブラウザでも問題なく表示可能。

カラーネーム	カラーサンプル	カラーコード	RGB	読み方 意味
black		#000000	rgb(0, 0, 0)	ブラック 黒
silver		#C0C0C0	rgb(192, 192, 192)	シルバー 銀色
gray		#808080	rgb(128, 128, 128)	グレー 灰色
white		#FFFFFF	rgb(255, 255, 255)	ホワイト 白
maroon		#800000	rgb(128, 0, 0)	マルーン 海老茶
red		#FF0000	rgb(255, 0, 0)	レッド 赤
purple		#800080	rgb(128, 0, 128)	パープル 紫
fuchsia		#FF00FF	rgb(255, 0, 255)	フクシア フクシアの花の色
green		#008000	rgb(0, 128, 0)	グリーン 緑
lime		#00FF00	rgb(0, 255, 0)	ライム
olive		#808000	rgb(128, 128, 0)	オリーブ
yellow		#FFFF00	rgb(255, 255, 0)	イエロー 黄色
navy		#000080	rgb(0, 0, 128)	ネイビー 濃紺
blue		#0000FF	rgb(0, 0, 255)	ブルー 青
teal		#008080	rgb(0, 128, 128)	テール 青緑
aqua		#00FFFF	rgb(0, 255, 255)	アクア 水色

拡張色

CSS3で定義されているカラーネームは147色。「gray」を「grey」でも使えるように定義されているので、その7色を同じ色とすれば140色がキーワード指定できることになります。

また、CSS4では「rebeccapurple■」が追加されました。

以下リストは「基本16色」以外の拡張色です。
なお、こちらのリストでは「grey」を「gray」に統一しています。

カラーネーム	カラーサンプル	16進数	RGB	読み方 意味
aliceblue		#F0F8FF	rgb(240, 248, 255)	アリスブルー
antiquewhite		#FAEBD7	rgb(250, 235, 215)	アンティーク・ホワイト
aquamarine		#7FFFD4	rgb(127, 255, 212)	アクアマリン
azure		#F0FFFF	rgb(240, 255, 255)	アジュール 紺碧
beige		#F5F5DC	rgb(245, 245, 220)	ベージュ
bisque		#FFE4C4	rgb(255, 228, 196)	ビスク 淡いベージュ
blanchedalmond		#FFEBCD	rgb(255, 235, 205)	ブランチアーモンド 茹でたアーモンド
blueviolet		#8A2BE2	rgb(138, 43, 226)	ブルーバイオレット 青紫色
brown		#A52A2A	rgb(165, 42, 42)	ブラウン 茶色
burlywood		#DEB887	rgb(222, 184, 135)	バーリー・ウッド 頑丈な木
cadetblue		#5F9EA0	rgb(95, 158, 160)	コードブルー くすんだ青
chartreuse		#7FFF00	rgb(127, 255, 0)	シャルトリューズ 明るく薄い黄緑色
chocolate		#D2691E	rgb(210, 105, 30)	チョコレート
coral		#FF7F50	rgb(255, 127, 80)	コーラル サンゴ 黄色がかった赤色
cornflowerblue		#6495ED	rgb(100, 149, 237)	コーンフラワーブルー ヤグルマ草の青
cornsilk		#FFF8DC	rgb(255, 248, 220)	コーンシルク トウモロコシの毛
crimson		#DC143C	rgb(220, 20, 60)	クリムゾン 真紅
cyan		#00FFFF	rgb(0, 255, 255)	シアン
darkblue		#00008B	rgb(0, 0, 139)	ダーク・ブルー
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)	ダーク・オレンジ
darkorchid		#9932CC	rgb(153, 50, 204)	ダーク・オーキッド
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)	ダーク・スレート・グレー
darkturquoise		#00CED1	rgb(0, 206, 209)	ダーク・ターコイズ
darkviolet		#9400D3	rgb(148, 0, 211)	ダーク・バイオレット
deeppink		#FF1493	rgb(255, 20, 147)	ダーク・ピンク
deepskyblue		#00BFFF	rgb(0, 191, 255)	ダーク・スカイブルー
dimgray		#696969	rgb(105, 105, 105)	ディム・グレー 薄暗い灰色
dodgerblue		#1E90FF	rgb(30, 144, 255)	ドジャーブルー
firebrick		#B22222	rgb(178, 34, 34)	ファイア・ブリック 耐火レンガ
floralwhite		#FFFAF0	rgb(255, 250, 240)	フローラルホワイト
forestgreen		#228B22	rgb(34, 139, 34)	フォレスト・グリーン 深緑色
gainsboro		#DCDCDC	rgb(220, 220, 220)	ゲインズボロ 淡い灰色
ghostwhite		#F8F8FF	rgb(248, 248, 255)	ゴースト・ホワイト
gold		#FFD700	rgb(255, 215, 0)	ゴールド 金色
goldenrod		#DAA520	rgb(218, 165, 32)	ゴールデンロッド アキノキリンソウ
greenyellow		#ADFF2F	rgb(173, 255, 47)	グリーンイエロー 黄緑色・萌黄色
honeydew		#F0FFF0	rgb(240, 255, 240)	ハニーデュー
hotpink		#FF69B4	rgb(255, 105, 180)	ホットピンク
indianred		#CD5C5C	rgb(205, 92, 92)	インディアンレッド
indigo		#4B0082	rgb(75, 0, 130)	インディゴ 藍色
ivory		#FFFFF0	rgb(255, 255, 240)	アイボリー 象牙色
khaki		#F0E68C	rgb(240, 230, 140)	カーキー 枯草色
lavender		#E6E6FA	rgb(230, 230, 250)	ラベンダー
lavenderblush		#FFF0F5	rgb(255, 240, 245)	ラベンダーブラッシュ ほんのり赤いラベンダー色
lawngreen		#7CFC00	rgb(124, 252, 0)	ローングリーン 芝生色
lemonchiffon		#FFFACD	rgb(255, 250, 205)	レモンシフォン 淡い黄色
lightblue		#ADD8E6	rgb(173, 216, 230)	ライト・ブルー
lightcoral		#F08080	rgb(240, 128, 128)	ライト・コーラル
lightcyan		#E0FFFF	rgb(224, 255, 255)	ライト・シアン
lightgoldenrodyellow		#FAFAD2	rgb(250, 250, 210)	ライト・ゴールデンロッド・イエロー
lightgray		#D3D3D3	rgb(211, 211, 211)	ライト・グレー
lightgreen		#90EE90	rgb(144, 238, 144)	ライト・グリーン
lightpink		#FFB6C1	rgb(255, 182, 193)	ライト・ピンク
lightsalmon		#FFA07A	rgb(255, 160, 122)	ライト・サーモン
lightseagreen		#20B2AA	rgb(32, 178, 170)	ライト・シーグリーン
lightskyblue		#87CEFA	rgb(135, 206, 250)	ライト・スカイブルー
lightslategray		#778899	rgb(119, 136, 153)	ライト・スレート・グレー
lightsteelblue		#B0C4DE	rgb(176, 196, 222)	ライト・スチール・ブルー
lightyellow		#FFFFE0	rgb(255, 255, 224)	ライト・イエロー
limegreen		#32CD32	rgb(50, 205, 50)	ライムグリーン
linen		#FAF0E6	rgb(250, 240, 230)	リネン（亜麻色） 黄色がかった淡い褐色
magenta		#FF00FF	rgb(255, 0, 255)	マゼンタ 赤紫色
mediumaquamarine		#66CDAA	rgb(102, 205, 170)	ミディアム・アクアマリン
mediumblue		#0000CD	rgb(0, 0, 205)	ミディアム・ブルー
mediumorchid		#BA55D3	rgb(186, 85, 211)	ミディアム・オーキッド
mediumpurple		#9370DB	rgb(147, 112, 219)	ミディアム・パープル
mediumseagreen		#3CB371	rgb(60, 179, 113)	ミディアム・シー・グリーン
mediumslateblue		#7B68EE	rgb(123, 104, 238)	ミディアム・スレート・ブルー
mediumspringgreen		#00FA9A	rgb(0, 250, 154)	ミディアム・スプリング・グリーン
mediumturquoise		#48D1CC	rgb(72, 209, 204)	ミディアム・ターコイズ
mediumvioletred		#C71585	rgb(199, 21, 133)	ミディアム・バイオレット・レッド
midnightblue		#191970	rgb(25, 25, 112)	ミツドナイト・ブルー
mintcream		#F5FFFA	rgb(245, 255, 250)	ミントクリーム
mistyrose		#FFE4E1	rgb(255, 228, 225)	ミスティローズ
moccasin		#FFE4B5	rgb(255, 228, 181)	モカシン
navajowhite		#FFDEAD	rgb(255, 222, 173)	ナバホ・ホワイト
oldlace		#FDF5E6	rgb(253, 245, 230)	オールド・レース
olivedrab		#6B8E23	rgb(107, 142, 35)	オリーブドラブ 暗くくすんだオリーブ色
orange		#FFA500	rgb(255, 165, 0)	オレンジ
orangered		#FF4500	rgb(255, 69, 0)	オレンジレッド
orchid		#DA70D6	rgb(218, 112, 214)	オーキッド 淡紫色
palegoldenrod		#EEE8AA	rgb(238, 232, 170)	ペールゴールデンロッド
palegreen		#98FB98	rgb(152, 251, 152)	ペールグリーン 薄緑色
paleturquoise		#AFEEEE	rgb(175, 238, 238)	ペール・ターコイズ
palevioletred		#DB7093	rgb(219, 112, 147)	ペール・バイオレット・レッド
papayawhip		#FFEFD5	rgb(255, 239, 213)	パパイヤ・ホイップ
peachpuff		#FFDAB9	rgb(255, 218, 185)	ピーチ・パフ
peru		#CD853F	rgb(205, 133, 63)	ペルー 明るい茶色
pink		#FFC0CB	rgb(255, 192, 203)	ピンク
plum		#DDA0DD	rgb(221, 160, 221)	プラム
powderblue		#B0E0E6	rgb(176, 224, 230)	パウダーブルー
rebeccapurple		#663399	rgb(102, 51, 153)	レベッカ・パープル
rosybrown		#BC8F8F	rgb(188, 143, 143)	ロージー・ブラウン
royalblue		#4169E1	rgb(65, 105, 225)	ロイヤルブルー
saddlebrown		#8B4513	rgb(139, 69, 19)	サドル・ブラウン
salmon		#FA8072	rgb(250, 128, 114)	サーモン
sandybrown		#F4A460	rgb(244, 164, 96)	サンディ・ブラウン
seagreen		#2E8B57	rgb(46, 139, 87)	シーグリーン
seashell		#FFF5EE	rgb(255, 245, 238)	シー・シェル 貝殻色
sienna		#A0522D	rgb(160, 82, 45)	シェンナ（シエナ） 赤黄色
skyblue		#87CEEB	rgb(135, 206, 235)	スカイブルー
slateblue		#6A5ACD	rgb(106, 90, 205)	スレート・ブルー くすんだ青
slategray		#708090	rgb(112, 128, 144)	スレート・グレー
snow		#FFFAFA	rgb(255, 250, 250)	スノー
springgreen		#00FF7F	rgb(0, 255, 127)	スプリンググリーン
steelblue		#4682B4	rgb(70, 130, 180)	スチール・ブルー
tan		#D2B48C	rgb(210, 180, 140)	タン 淡い茶色
thistle		#D8BFD8	rgb(216, 191, 216)	シスル アザミの花
tomato		#FF6347	rgb(255, 99, 71)	トマト
turquoise		#40E0D0	rgb(64, 224, 208)	ターコイズ トルコ石
violet		#EE82EE	rgb(238, 130, 238)	バイオレット 青に近い紫
wheat		#F5DEB3	rgb(245, 222, 179)	ウィート 小麦色
whitesmoke		#F5F5F5	rgb(245, 245, 245)	ホワイト・スモーク 白い煙色
yellowgreen		#9ACD32	rgb(154, 205, 50)	イエローグリーン 黄緑