CSS 名前付き色一覧

このツールについて

CSSは148個の命名色を定義しており、CSSプロパティ、SVG属性、HTML色属性など色値が使用できる場所であればどこでも使用できます。命名色は16進コードよりも読みやすく、すべての最新ブラウザとCSSプリプロセッサで普遍的にサポートされています。

このリファレンスでは、すべての命名色を16進数の値とともに色系統別にグループ化して一覧表示します。スウォッチをクリックするとCSS色名がクリップボードにコピーされます。

使い方

1. グリッド全体を閲覧するか、ドロップダウンで色グループを絞り込みます。
2. 名前（例：「blue」）または16進コード（例：「#0000ff」）で検索します。
3. スウォッチをクリックするとCSS色名（例：cornflowerblue）がコピーされます。
4. CSSで直接名前を使用します：color: cornflowerblue;

活用事例

フロントエンド開発者が視覚的に覚えているが正確な名前が思い出せない色を素早く調べることができます。デザイナーはブランドカラーに最も近いCSS命名色を確認します。CSS色構文を教える際の教育用リファレンスとして、またプロトタイプやデモコードの可読性向上に活用します。

よくある質問

• CSSの命名色は何色ありますか？ CSS Color Level 4では、transparentとcurrentcolorに加えて148個の命名色が定義されています。
• 命名色はブラウザ間で同じですか？ はい。命名色は完全に標準化されており、すべての最新ブラウザで同一の結果を生成します。
• SVGでも命名色を使用できますか？ はい。SVGのfillおよびstroke属性で同じCSS色名を使用できます。