CSS 名前付きカラー：148 色の完全リスト
CSS 名前付きカラーの完全リストと hex・RGB 対応値。検索、コピー、モバイル対応。
CSS 名前付きカラーとは？
CSS には 148 種類の名前付きカラーがあり、16 進コードや RGB 値の代わりに使えます。「tomato」「rebeccapurple」「lightseagreen」といった単語は有効な CSS カラー値で、W3C で定義され、すべての最新ブラウザでサポートされています。名前付きカラーを使うとスタイルシートが読みやすく覚えやすくなります。
色相環全体をカバー：原色、二次色、三次色、グレー、特殊なトーンも少しだけ含みます。各名前は正確な sRGB 値に対応します。「red」「blue」「green」のように明快なものもあれば、「papayawhip」「lemonchiffon」「mediumvioletred」のように愉快に具体的なものもあります。
よくある用途
- クイックプロトタイピング：色の名前を入力してプレースホルダを設定
- 読みやすい CSS：`#ff6347` の代わりに `tomato` で意図が明確に
- テーマ設定：CSS 変数でセマンティックな名前（--brand-primary: rebeccapurple）を使用
- メールテンプレート：一部クライアントは 16 進を制限するため、名前付きの方が広く対応
- 教育：CSS の入門に最適
方法 1：UtilBoxx の CSS 名前付きカラーリストを使う（推奨）
当社の CSS 名前付きカラーリスト は、すべての名前付きカラーと hex・RGB 対応値を一覧表示し、検索とワンクリックコピーに対応します。手順は次のとおりです：
- utilboxx.com/ja/tools/color/named にアクセス
- リストを閲覧または検索（「purple」や「gray」などで試す）
- 任意の見本をクリックして名前をコピー
- hex 値をクリックして正確なコードをコピー
- お気に入りボタンで最も使う色をブックマーク
この方法の長所：
- 検索可能、色ごとにグループ化されたリスト
- 名前、hex、RGB をワンクリックでコピー
- 全色にビジュアル見本を表示
- モバイル向けレイアウト
- 無料、登録不要、広告なし
方法 2：基本色を暗記する
少数の名前付きカラーを覚えておくだけで日常 CSS の 80% をカバーできます：
- red、green、blue（原色）
- yellow、cyan、magenta（二次色）
- black、white、gray
- orange、pink、purple、brown
- 明暗のバリアント：lightgray、darkblue など
珍しい色はリファレンスを手元に置いておくのが良いでしょう。
方法 3：スタイルシートで CSS 変数を使う
パレットを CSS カスタムプロパティとして定義し、コード内で名前を使います：
```css :root { --color-bg: white; --color-text: black; --color-accent: rebeccapurple; --color-warning: tomato; } ```
名前付きカラーの読みやすさと一元化されたデザインシステムの力を両立できます。
よくある質問
CSS には何種類の名前付きカラーがありますか？
CSS Color Module Level 4 仕様には 148 種類の名前付きカラーがあります。すべての歴史的カラーと、rebeccapurple のような新しい追加（2014 年、Eric Meyer の娘を追悼して追加）を含みます。
名前付きカラーは大小文字を区別しますか？
いいえ。CSS のカラー名は大文字小文字を区別しないので、「Tomato」「tomato」「TOMATO」はすべて同じ色を表します。小文字が慣例です。
rebeccapurple とは何ですか？
`#663399` で、CSS のパイオニア Eric Meyer の娘 Rebecca Alison Meyer さんを偲んで 2014 年に追加されました。技術的な理由以外で追加された唯一の名前付きカラーです。
SVG や canvas で名前付きカラーを使えますか？
はい。SVG と HTML5 canvas API はどちらも CSS 名前付きカラーを受け付け、どの環境でも同じ名前と値で動作します。
結論
CSS 名前付きカラーは過小評価されている宝石です。素早く検索できるリファレンスとしては、UtilBoxx の CSS 名前付きカラーリスト をブックマークしておくのが最も手軽です。