CSSカラー名：完全リファレンスガイド

色はウェブデザインの魂です。多くの開発者は精度を求めてHEXコードやRGB値を使用しますが、CSSカラー名はスタイルを素早く適用するための人間が読みやすい方法を提供します。現代のブラウザは、一般的なRed（赤）やBlue（青）から、AliceBlue（アリスブルー）やPapayaWhip（パパイヤホイップ）のようなユニークなものまで、140以上の名前付きカラーをサポートしています。

このガイドでは、すべてのCSSカラー名の完全かつ検索可能なリファレンスを色相別にカテゴリ分けして提供し、プロジェクトに最適な色を見つけるお手伝いをします。

1. クイックリファレンス：基本の16色

これらはHTML 4.01仕様で定義されたオリジナルの色であり、すべてのブラウザとデバイスでサポートされています。

カラー名	HEX	RGB
White (白)	`#FFFFFF`	`(255, 255, 255)`
Silver (銀)	`#C0C0C0`	`(192, 192, 192)`
Gray (灰色)	`#808080`	`(128, 128, 128)`
Black (黒)	`#000000`	`(0, 0, 0)`
Red (赤)	`#FF0000`	`(255, 0, 0)`
Maroon (栗色)	`#800000`	`(128, 0, 0)`
Yellow (黄)	`#FFFF00`	`(255, 255, 0)`
Olive (オリーブ)	`#808000`	`(128, 128, 0)`
Lime (ライム)	`#00FF00`	`(0, 255, 0)`
Green (緑)	`#008000`	`(0, 128, 0)`
Aqua (アクア)	`#00FFFF`	`(0, 255, 255)`
Teal (ティール)	`#008080`	`(0, 128, 128)`
Blue (青)	`#0000FF`	`(0, 0, 255)`
Navy (ネイビー)	`#000080`	`(0, 0, 128)`
Fuchsia (フクシャ)	`#FF00FF`	`(255, 0, 255)`
Purple (紫)	`#800080`	`(128, 0, 128)`

2. 140以上のCSSカラー完全リスト

現代のブラウザでサポートされている拡張カラーセット（SVG 1.0/CSS3）の全リストです。

ピンク系 (Pink Colors)

名前	HEX	RGB	カテゴリ
Pink	`#FFC0CB`	`(255, 192, 203)`	ピンク
LightPink	`#FFB6C1`	`(255, 182, 193)`	ピンク
HotPink	`#FF69B4`	`(255, 105, 180)`	ピンク
DeepPink	`#FF1493`	`(255, 20, 147)`	ピンク
PaleVioletRed	`#DB7093`	`(219, 112, 147)`	ピンク
MediumVioletRed	`#C71585`	`(199, 21, 133)`	ピンク

レッド系 (Red Colors)

名前	HEX	RGB	カテゴリ
LightSalmon	`#FFA07A`	`(255, 160, 122)`	レッド
Salmon	`#FA8072`	`(250, 128, 114)`	レッド
DarkSalmon	`#E9967A`	`(233, 150, 122)`	レッド
LightCoral	`#F08080`	`(240, 128, 128)`	レッド
IndianRed	`#CD5C5C`	`(205, 92, 92)`	レッド
Crimson	`#DC143C`	`(220, 20, 60)`	レッド
FireBrick	`#B22222`	`(178, 34, 34)`	レッド
DarkRed	`#8B0000`	`(139, 0, 0)`	レッド
Red	`#FF0000`	`(255, 0, 0)`	レッド

オレンジ系 (Orange Colors)

名前	HEX	RGB	カテゴリ
Orange	`#FFA500`	`(255, 165, 0)`	オレンジ
DarkOrange	`#FF8C00`	`(255, 140, 0)`	オレンジ
Coral	`#FF7F50`	`(255, 127, 80)`	オレンジ
Tomato	`#FF6347`	`(255, 99, 71)`	オレンジ
OrangeRed	`#FF4500`	`(255, 69, 0)`	オレンジ

イエロー系 (Yellow Colors)

名前	HEX	RGB	カテゴリ
Yellow	`#FFFF00`	`(255, 255, 0)`	イエロー
LightYellow	`#FFFFE0`	`(255, 255, 224)`	イエロー
LemonChiffon	`#FFFACD`	`(255, 250, 205)`	イエロー
LightGoldenRodYellow	`#FAFAD2`	`(250, 250, 210)`	イエロー
PapayaWhip	`#FFEFD5`	`(255, 239, 213)`	イエロー
Moccasin	`#FFE4B5`	`(255, 228, 181)`	イエロー
PeachPuff	`#FFDAB9`	`(255, 218, 185)`	イエロー
PaleGoldenRod	`#EEE8AA`	`(238, 232, 170)`	イエロー
Khaki	`#F0E68C`	`(240, 230, 140)`	イエロー
DarkKhaki	`#BDB76B`	`(189, 183, 107)`	イエロー
Gold	`#FFD700`	`(255, 215, 0)`	イエロー

ブラウン系 (Brown Colors)

名前	HEX	RGB	カテゴリ
Cornsilk	`#FFF8DC`	`(255, 248, 220)`	ブラウン
BlanchedAlmond	`#FFEBCD`	`(255, 235, 205)`	ブラウン
Bisque	`#FFE4C4`	`(255, 228, 196)`	ブラウン
NavajoWhite	`#FFDEAD`	`(255, 222, 173)`	ブラウン
Wheat	`#F5DEB3`	`(245, 222, 179)`	ブラウン
BurlyWood	`#DEB887`	`(222, 184, 135)`	ブラウン
Tan	`#D2B48C`	`(210, 180, 140)`	ブラウン
RosyBrown	`#BC8F8F`	`(188, 143, 143)`	ブラウン
SandyBrown	`#F4A460`	`(244, 164, 96)`	ブラウン
GoldenRod	`#DAA520`	`(218, 165, 32)`	ブラウン
Peru	`#CD853F`	`(205, 133, 63)`	ブラウン
Chocolate	`#D2691E`	`(210, 105, 30)`	ブラウン
SaddleBrown	`#8B4513`	`(139, 69, 19)`	ブラウン
Sienna	`#A0522D`	`(160, 82, 45)`	ブラウン
Brown	`#A52A2A`	`(165, 42, 42)`	ブラウン
Maroon	`#800000`	`(128, 0, 0)`	ブラウン

グリーン系 (Green Colors)

名前	HEX	RGB	カテゴリ
DarkOliveGreen	`#556B2F`	`(85, 107, 47)`	グリーン
Olive	`#808000`	`(128, 128, 0)`	グリーン
OliveDrab	`#6B8E23`	`(107, 142, 35)`	グリーン
YellowGreen	`#9ACD32`	`(154, 205, 50)`	グリーン
LimeGreen	`#32CD32`	`(50, 205, 50)`	グリーン
Lime	`#00FF00`	`(0, 255, 0)`	グリーン
LawnGreen	`#7CFC00`	`(124, 252, 0)`	グリーン
Chartreuse	`#7FFF00`	`(127, 255, 0)`	グリーン
GreenYellow	`#ADFF2F`	`(173, 255, 47)`	グリーン
SpringGreen	`#00FF7F`	`(0, 255, 127)`	グリーン
MediumSpringGreen	`#00FA9A`	`(0, 250, 154)`	グリーン
LightGreen	`#90EE90`	`(144, 238, 144)`	グリーン
PaleGreen	`#98FB98`	`(152, 251, 152)`	グリーン
DarkSeaGreen	`#8FBC8F`	`(143, 188, 143)`	グリーン
MediumSeaGreen	`#3CB371`	`(60, 179, 113)`	グリーン
SeaGreen	`#2E8B57`	`(46, 139, 87)`	グリーン
ForestGreen	`#228B22`	`(34, 139, 34)`	グリーン
Green	`#008000`	`(0, 128, 0)`	グリーン
DarkGreen	`#006400`	`(0, 100, 0)`	グリーン

シアン・ティール系 (Cyan and Teal Colors)

名前	HEX	RGB	カテゴリ
Aqua	`#00FFFF`	`(0, 255, 255)`	シアン
Cyan	`#00FFFF`	`(0, 255, 255)`	シアン
LightCyan	`#E0FFFF`	`(224, 255, 255)`	シアン
PaleTurquoise	`#AFEEEE`	`(175, 238, 238)`	シアン
Aquamarine	`#7FFFD4`	`(127, 255, 212)`	シアン
Turquoise	`#40E0D0`	`(64, 224, 208)`	シアン
MediumTurquoise	`#48D1CC`	`(72, 209, 204)`	シアン
DarkTurquoise	`#00CED1`	`(0, 206, 209)`	シアン
LightSeaGreen	`#20B2AA`	`(32, 178, 170)`	シアン
CadetBlue	`#5F9EA0`	`(95, 158, 160)`	シアン
DarkCyan	`#008B8B`	`(0, 139, 139)`	シアン
Teal	`#008080`	`(0, 128, 128)`	シアン

ブルー系 (Blue Colors)

名前	HEX	RGB	カテゴリ
LightSteelBlue	`#B0C4DE`	`(176, 196, 222)`	ブルー
PowderBlue	`#B0E0E6`	`(176, 224, 230)`	ブルー
LightBlue	`#ADD8E6`	`(173, 216, 230)`	ブルー
SkyBlue	`#87CEEB`	`(135, 206, 235)`	ブルー
LightSkyBlue	`#87CEFA`	`(135, 206, 250)`	ブルー
DeepSkyBlue	`#00BFFF`	`(0, 191, 255)`	ブルー
DodgerBlue	`#1E90FF`	`(30, 144, 255)`	ブルー
CornflowerBlue	`#6495ED`	`(100, 149, 237)`	ブルー
MediumSlateBlue	`#7B68EE`	`(123, 104, 238)`	ブルー
RoyalBlue	`#4169E1`	`(65, 105, 225)`	ブルー
Blue	`#0000FF`	`(0, 0, 255)`	ブルー
MediumBlue	`#0000CD`	`(0, 0, 205)`	ブルー
DarkBlue	`#00008B`	`(0, 0, 139)`	ブルー
Navy	`#000080`	`(0, 0, 128)`	ブルー
MidnightBlue	`#191970`	`(25, 25, 112)`	ブルー

パープル・バイオレット系 (Purple and Violet Colors)

名前	HEX	RGB	カテゴリ
Lavender	`#E6E6FA`	`(230, 230, 250)`	パープル
Thistle	`#D8BFD8`	`(216, 191, 216)`	パープル
Plum	`#DDA0DD`	`(221, 160, 221)`	パープル
Violet	`#EE82EE`	`(238, 130, 238)`	パープル
Orchid	`#DA70D6`	`(218, 112, 214)`	パープル
Fuchsia	`#FF00FF`	`(255, 0, 255)`	パープル
Magenta	`#FF00FF`	`(255, 0, 255)`	パープル
MediumOrchid	`#BA55D3`	`(186, 85, 211)`	パープル
MediumPurple	`#9370DB`	`(147, 112, 219)`	パープル
BlueViolet	`#8A2BE2`	`(138, 43, 226)`	パープル
DarkViolet	`#9400D3`	`(148, 0, 211)`	パープル
DarkOrchid	`#9932CC`	`(153, 50, 204)`	パープル
DarkMagenta	`#8B008B`	`(139, 0, 139)`	パープル
Purple	`#800080`	`(128, 0, 128)`	パープル
Indigo	`#4B0082`	`(75, 0, 130)`	パープル
DarkSlateBlue	`#483D8B`	`(72, 61, 139)`	パープル
SlateBlue	`#6A5ACD`	`(106, 90, 205)`	パープル
RebeccaPurple	`#663399`	`(102, 51, 153)`	パープル

ホワイト・オフホワイト系 (White and Off-White Colors)

名前	HEX	RGB	カテゴリ
White	`#FFFFFF`	`(255, 255, 255)`	ホワイト
Snow	`#FFFAFA`	`(255, 250, 250)`	ホワイト
HoneyDew	`#F0FFF0`	`(240, 255, 240)`	ホワイト
MintCream	`#F5FFFA`	`(245, 255, 250)`	ホワイト
Azure	`#F0FFFF`	`(240, 255, 255)`	ホワイト
AliceBlue	`#F0F8FF`	`(240, 248, 255)`	ホワイト
GhostWhite	`#F8F8FF`	`(248, 248, 255)`	ホワイト
WhiteSmoke	`#F5F5F5`	`(245, 245, 245)`	ホワイト
SeaShell	`#FFF5EE`	`(255, 245, 238)`	ホワイト
Beige	`#F5F5DC`	`(245, 245, 220)`	ホワイト
OldLace	`#FDF5E6`	`(253, 245, 230)`	ホワイト
FloralWhite	`#FFFAF0"	`(255, 250, 240)`	ホワイト
Ivory	`#FFFFF0`	`(255, 255, 240)`	ホワイト
AntiqueWhite	`#FAEBD7`	`(250, 235, 215)`	ホワイト
Linen	`#FAF0E6`	`(250, 240, 230)`	ホワイト
MistyRose	`#FFE4E1`	`(255, 228, 225)`	ホワイト
LavenderBlush	`#FFF0F5`	`(255, 240, 245)`	ホワイト

グレー・ブラック系 (Gray and Black Colors)

名前	HEX	RGB	カテゴリ
Gainsboro	`#DCDCDC`	`(220, 220, 220)`	グレー
LightGray	`#D3D3D3`	`(211, 211, 211)`	グレー
LightGrey	`#D3D3D3`	`(211, 211, 211)`	グレー
Silver	`#C0C0C0`	`(192, 192, 192)`	グレー
DarkGray	`#A9A9A9`	`(169, 169, 169)`	グレー
DarkGrey	`#A9A9A9`	`(169, 169, 169)`	グレー
Gray	`#808080`	`(128, 128, 128)`	グレー
Grey	`#808080`	`(128, 128, 128)`	グレー
DimGray	`#696969`	`(105, 105, 105)`	グレー
DimGrey	`#696969`	`(105, 105, 105)`	グレー
LightSlateGray	`#778899`	`(119, 136, 153)`	グレー
LightSlateGrey	`#778899`	`(119, 136, 153)`	グレー
SlateGray	`#708090`	`(112, 128, 144)`	グレー
SlateGrey	`#708090`	`(112, 128, 144)`	グレー
DarkSlateGray	`#2F4F4F`	`(47, 79, 79)`	グレー
DarkSlateGrey	`#2F4F4F"	`(47, 79, 79)`	グレー
Black	`#000000`	`(0, 0, 0)`	グレー

3. CSSカラー名の使用方法

これらの名前をコードで使用するのは非常に簡単です。<color>値を受け入れる任意のプロパティに適用できます。

標準CSSプロパティ

/* テキスト色に名前を使用 */
h1 {
  color: Crimson;
}

/* 背景色に名前を使用 */
.alert {
  background-color: PapayaWhip;
  border: 1px solid OrangeRed;
}

SVGプロパティ

CSSカラー名はSVG属性でも完全に機能します：

<circle cx="50" cy="50" r="40" fill="RoyalBlue" stroke="MidnightBlue" stroke-width="2" />

'currentColor' キーワード

currentColorは、要素のcolorプロパティの値を継承する特別な値です。

div {
  color: SeaGreen;
  border: 2px solid currentColor; /* ボーダーもSeaGreenになります */
}

4. よくある質問 (FAQ)

Q: CSSカラー名は大小文字を区別しますか？

A: いいえ。AliceBlue、aliceblue、さらにはALICEBLUEと書いてもすべて同じ色として扱われます。ただし、可読性のためにCamelCase（AliceBlueなど）が多くの開発者に好まれています。

Q: どのカラー名が「ウェブセーフ」ですか？

A: 「ウェブセーフカラー」は、モニターが256色しかサポートしていなかった時代の遺物です。今日では、140以上のすべてのCSSカラー名が現代のどのデバイスでも安全に使用できます。

Q: なぜHEXコードの代わりにカラー名を使うのですか？

A: カラー名は覚えやすく、コードの可読性を高めます。background-color: Whiteは即座に理解できますが、#FFFFFFはわずかな脳内変換を必要とします。ただし、正確なブランドカラーにはHEX、RGB、またはHSLが依然として最良の選択です。

Q: 重複した名前はありますか？

A: はい。AquaとCyanは全く同じ（#00FFFF）で、FuchsiaとMagentaも同じ（#FF00FF）です。また、多くのグレー系の色には「Gray」と「Grey」の両方の綴りがあります（例：DarkGrayとDarkGrey）。

Q: コントラストの問題にはどう対処すればよいですか？

A: 名前付きカラーを使用する場合は、常にテキストと背景の間に十分なコントラストがあることを確認してください。例えば、白い背景に黄色（Yellow）のテキストはほとんど読めず、アクセシビリティ標準（WCAG）に適合しません。

Tool3M 関連ツール

カラーコンバーター: これらの名前付きカラーをHEX、RGB、HSL、またはCMYK形式に即座に変換します。
画像Base64変換: CSS/HTMLで使用するために画像をBase64文字列に変換します。

CSSカラー名：HEXとRGBの完全リファレンスガイド