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

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

- スポンサーリンク -

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

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

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

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

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

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

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

カラーネームカラーサンプルカラーコードRGB読み方
silver#C0C0C0rgb(192, 192, 192)シルバー
gray [1]#808080rgb(128, 128, 128)グレー
pink#FFC0CBrgb(255, 192, 203)ピンク
hotpink#FF69B4
rgb(255, 105, 180)ホットピンク
tomato#FF6347rgb(255, 99, 71)トマト
plum#DDA0DDrgb(221, 160, 221)プラム
gold#FFD700rgb(255, 215, 0)ゴールド
yellowgreen#9ACD32rgb(154, 205, 50)イエローグリーン
seagreen#2E8B57rgb(46, 139, 87)シーグリーン
navy#000080rgb(0, 0, 128)ネイビー
skyblue#87CEEBrgb(135, 206, 235)スカイブルー
tan#D2B48Crgb(210, 180, 140)タン
brown#A52A2Argb(165, 42, 42)ブラウン
[1] グレーは「grey」の記述でもOK。

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

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

HTML基本16色

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

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

拡張色

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

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

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

※ アルファベット順
カラーネームカラーサンプル16進数RGB読み方
意味
aliceblue#F0F8FFrgb(240, 248, 255)アリスブルー
antiquewhite#FAEBD7rgb(250, 235, 215)アンティーク・ホワイト
aquamarine#7FFFD4rgb(127, 255, 212)アクアマリン
azure#F0FFFFrgb(240, 255, 255)アジュール
紺碧
beige#F5F5DCrgb(245, 245, 220)ベージュ
bisque#FFE4C4rgb(255, 228, 196)ビスク
淡いベージュ
blanchedalmond#FFEBCDrgb(255, 235, 205)ブランチアーモンド
茹でたアーモンド
blueviolet#8A2BE2rgb(138, 43, 226)ブルーバイオレット
青紫色
brown#A52A2Argb(165, 42, 42)ブラウン
茶色
burlywood#DEB887rgb(222, 184, 135)バーリー・ウッド
頑丈な木
cadetblue#5F9EA0rgb(95, 158, 160)コードブルー
くすんだ青
chartreuse#7FFF00rgb(127, 255, 0)シャルトリューズ
明るく薄い黄緑色
chocolate#D2691Ergb(210, 105, 30)チョコレート
coral#FF7F50rgb(255, 127, 80)コーラル
サンゴ
黄色がかった赤色
cornflowerblue#6495EDrgb(100, 149, 237)コーンフラワーブルー
ヤグルマ草の青
cornsilk#FFF8DCrgb(255, 248, 220)コーンシルク
トウモロコシの毛
crimson#DC143Crgb(220, 20, 60)クリムゾン
真紅
cyan #00FFFFrgb(0, 255, 255)シアン
darkblue#00008Brgb(0, 0, 139)ダーク・ブルー
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)ダーク・オレンジ
darkorchid#9932CCrgb(153, 50, 204)ダーク・オーキッド
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)ダーク・スレート・グレー
darkturquoise#00CED1rgb(0, 206, 209)ダーク・ターコイズ
darkviolet#9400D3rgb(148, 0, 211)ダーク・バイオレット
deeppink#FF1493rgb(255, 20, 147)ダーク・ピンク
deepskyblue#00BFFFrgb(0, 191, 255)ダーク・スカイブルー
dimgray#696969rgb(105, 105, 105)ディム・グレー
薄暗い灰色
dodgerblue#1E90FFrgb(30, 144, 255)ドジャーブルー
firebrick#B22222rgb(178, 34, 34)ファイア・ブリック
耐火レンガ
floralwhite#FFFAF0rgb(255, 250, 240)フローラルホワイト
forestgreen#228B22rgb(34, 139, 34)フォレスト・グリーン
深緑色
gainsboro#DCDCDCrgb(220, 220, 220)ゲインズボロ
淡い灰色
ghostwhite#F8F8FFrgb(248, 248, 255)ゴースト・ホワイト
gold#FFD700rgb(255, 215, 0)ゴールド
金色
goldenrod#DAA520rgb(218, 165, 32)ゴールデンロッド
アキノキリンソウ
greenyellow#ADFF2Frgb(173, 255, 47)グリーンイエロー
黄緑色・萌黄色
honeydew#F0FFF0rgb(240, 255, 240)ハニーデュー
hotpink#FF69B4rgb(255, 105, 180)ホットピンク
indianred#CD5C5Crgb(205, 92, 92)インディアンレッド
indigo#4B0082rgb(75, 0, 130)インディゴ
ivory#FFFFF0rgb(255, 255, 240)アイボリー
象牙色
khaki#F0E68Crgb(240, 230, 140)カーキー
枯草色
lavender#E6E6FArgb(230, 230, 250)ラベンダー
lavenderblush#FFF0F5rgb(255, 240, 245)ラベンダーブラッシュ
ほんのり赤いラベンダー色
lawngreen#7CFC00rgb(124, 252, 0)ローングリーン
芝生色
lemonchiffon#FFFACDrgb(255, 250, 205)レモンシフォン
淡い黄色
lightblue#ADD8E6rgb(173, 216, 230)ライト・ブルー
lightcoral#F08080rgb(240, 128, 128)ライト・コーラル
lightcyan#E0FFFFrgb(224, 255, 255)ライト・シアン
lightgoldenrodyellow#FAFAD2rgb(250, 250, 210)ライト・ゴールデンロッド・イエロー
lightgray#D3D3D3rgb(211, 211, 211)ライト・グレー
lightgreen#90EE90rgb(144, 238, 144)ライト・グリーン
lightpink#FFB6C1rgb(255, 182, 193)ライト・ピンク
lightsalmon#FFA07Argb(255, 160, 122)ライト・サーモン
lightseagreen#20B2AArgb(32, 178, 170)ライト・シーグリーン
lightskyblue#87CEFArgb(135, 206, 250)ライト・スカイブルー
lightslategray#778899rgb(119, 136, 153)ライト・スレート・グレー
lightsteelblue#B0C4DErgb(176, 196, 222)ライト・スチール・ブルー
lightyellow#FFFFE0rgb(255, 255, 224)ライト・イエロー
limegreen#32CD32rgb(50, 205, 50)ライムグリーン
linen#FAF0E6rgb(250, 240, 230)リネン(亜麻色)
黄色がかった淡い褐色
magenta#FF00FFrgb(255, 0, 255)マゼンタ
赤紫色
mediumaquamarine#66CDAArgb(102, 205, 170)ミディアム・アクアマリン
mediumblue#0000CDrgb(0, 0, 205)ミディアム・ブルー
mediumorchid#BA55D3rgb(186, 85, 211)ミディアム・オーキッド
mediumpurple#9370DBrgb(147, 112, 219)ミディアム・パープル
mediumseagreen#3CB371rgb(60, 179, 113)ミディアム・シー・グリーン
mediumslateblue#7B68EErgb(123, 104, 238)ミディアム・スレート・ブルー
mediumspringgreen#00FA9Argb(0, 250, 154)ミディアム・スプリング・グリーン
mediumturquoise#48D1CCrgb(72, 209, 204)ミディアム・ターコイズ
mediumvioletred#C71585rgb(199, 21, 133)ミディアム・バイオレット・レッド
midnightblue#191970rgb(25, 25, 112)ミツドナイト・ブルー
mintcream#F5FFFArgb(245, 255, 250)ミントクリーム
mistyrose#FFE4E1rgb(255, 228, 225)ミスティローズ
moccasin#FFE4B5rgb(255, 228, 181)モカシン
navajowhite#FFDEADrgb(255, 222, 173)ナバホ・ホワイト
oldlace#FDF5E6rgb(253, 245, 230)オールド・レース
olivedrab#6B8E23rgb(107, 142, 35)オリーブドラブ
暗くくすんだオリーブ
orange#FFA500rgb(255, 165, 0)オレンジ
orangered#FF4500rgb(255, 69, 0)オレンジレッド
orchid#DA70D6rgb(218, 112, 214)オーキッド
淡紫色
palegoldenrod#EEE8AArgb(238, 232, 170)ペールゴールデンロッド
palegreen#98FB98rgb(152, 251, 152)ペールグリーン
薄緑色
paleturquoise#AFEEEErgb(175, 238, 238)ペール・ターコイズ
palevioletred#DB7093rgb(219, 112, 147)ペール・バイオレット・レッド
papayawhip#FFEFD5rgb(255, 239, 213)パパイヤ・ホイップ
peachpuff#FFDAB9rgb(255, 218, 185)ピーチ・パフ
peru#CD853Frgb(205, 133, 63)ペルー
明るい茶色
pink#FFC0CBrgb(255, 192, 203)ピンク
plum#DDA0DDrgb(221, 160, 221)プラム
powderblue#B0E0E6rgb(176, 224, 230)パウダーブルー
rebeccapurple#663399rgb(102, 51, 153)レベッカ・パープル
rosybrown#BC8F8Frgb(188, 143, 143)ロージー・ブラウン
royalblue#4169E1rgb(65, 105, 225)ロイヤルブルー
saddlebrown#8B4513rgb(139, 69, 19)サドル・ブラウン
salmon#FA8072rgb(250, 128, 114)サーモン
sandybrown#F4A460rgb(244, 164, 96)サンディ・ブラウン
seagreen#2E8B57rgb(46, 139, 87)シーグリーン
seashell#FFF5EErgb(255, 245, 238)シー・シェル
貝殻色
sienna#A0522Drgb(160, 82, 45)シェンナ(シエナ)
赤黄色
skyblue#87CEEBrgb(135, 206, 235)スカイブルー
slateblue#6A5ACDrgb(106, 90, 205)スレート・ブルー
くすんだ青
slategray#708090rgb(112, 128, 144)スレート・グレー
snow#FFFAFArgb(255, 250, 250)スノー
springgreen#00FF7Frgb(0, 255, 127)スプリンググリーン
steelblue#4682B4rgb(70, 130, 180)スチール・ブルー
tan#D2B48Crgb(210, 180, 140)タン
淡い茶色
thistle#D8BFD8rgb(216, 191, 216)シスル
アザミの花
tomato#FF6347rgb(255, 99, 71)トマト
turquoise#40E0D0rgb(64, 224, 208)ターコイズ
トルコ石
violet#EE82EErgb(238, 130, 238)バイオレット
青に近い紫
wheat#F5DEB3rgb(245, 222, 179)ウィート
小麦色
whitesmoke#F5F5F5rgb(245, 245, 245)ホワイト・スモーク
白い煙色
yellowgreen#9ACD32rgb(154, 205, 50)イエローグリーン
黄緑
ゴールデンロッド(セイタカアアワダチソウ)

▼ 別名をもつカラーネーム

  • aqua / cyan
  • fuchsia / magenta
  • darkgray / darkgrey
  • darkslategray / darkslategrey
  • dimgray / dimgrey
  • lightgray / lightgrey
  • lightslategray / lightslategrey
  • gray / grey
  • slategray / slategrey


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