CSS 色名

機能

• CSS の色名 148 個。CSS Color 4 の標準色名表を完全収録
• 名前から検索：tomato と入力すると色値・RGB・HSL・`color: tomato` の書き方が出ます
• 色値から検索：#2f4f4f を貼り付けて標準名の有無を確認
• 同じ色の別名 9 組を明示（aqua / cyan、fuchsia / magenta、gray / grey の七組）
• 全色に 16 進・RGB・HSL を表示。スタイルシートにそのまま貼れます
• 色見本を結果行に直接描画。色番号を頭の中で色に変換する必要はありません
• 黒と白のどちらの文字が読みやすいかを WCAG コントラスト比と AA 適合の有無つきで表示
• 色相グループで閲覧：赤系・橙と茶系・黄系・緑系・青系・紫系・無彩色
• 名前の部分一致：dark で暗い色を一覧
• 148 の名前は検索できるドロップダウンに。ヒントに色値が出ます
• 空欄で全件を一覧。色見本帳として眺められます
• 貼り付け耐性。例文の括弧や全角文字がついても検索結果は変わりません

使い方

1. 色名（例：tomato、rebeccapurple）を入力します
2. または色値（例：#2f4f4f）を貼り付けて、標準名があるか調べます
3. ある系統の名前を見たいときは色相グループ（例：紫系）を入力してください
4. 空欄にすると 148 の名前すべてを色相ごとに一覧します

よくある質問

同じ色値に名前が二つあるのはなぜですか？どちらを使うべきですか？

CSS の色名表が二つの由来を統合したものだからです —— HTML の歴史的な色名と SVG の色名で、両者は重複しつつ綴りも異なります。結果として 9 組が生まれました：`aqua`（HTML）と `cyan`（SVG）、`fuchsia` と `magenta`、そして `gray` / `grey` のような綴り差の七組です。どちらでも構いません。ブラウザーは同一に扱います。 実務的には、プロジェクト内の既存の書き方に合わせてください（同じコードベースで `gray` と `grey` を混在させると、別物に見えます）。米英綴りはチームの言語慣習でどちらかに統一を。

コードでは色名と 16 進のどちらを使うべきですか？

一目で分かることに価値がある場面では色名が向きます：`color: #ff6347` より `color: tomato` のほうが読みやすく、調べ直す必要もなく、レビューもしやすくなります。ただし色名は 148 個しかなく、少しでも細かい色には名前がありません。そのため実際のプロジェクトでは併用します —— 意図を表すところは色名（アクセント、危険色）、ブランド色や精度が要るところは 16 進や `oklch()` などの現代的な書き方です。一点注意：色名はテーマ化できません。ダークモードで `tomato` を別の赤にする方法はありませんが、CSS 変数なら可能です。

これらの名前はすべてのブラウザーで使えますか？

148 の名前は CSS Color Module Level 4 の標準で、現代のブラウザーはすべて対応しています。一点だけ注意が必要なのは `rebeccapurple` です —— Level 4 で追加されたもので（Rebecca Meyer を記念した名前）、非常に古いブラウザー（IE 全系統）は認識せず、宣言ごと無効として破棄します。そうしたブラウザーをまだ支えるなら、`rebeccapurple` だけフォールバックを添えてください。残り 147 個は CSS の最初期から存在します。

クレヨンや色鉛筆の色見本はなぜないのですか？

信頼できる出典がないからです。クレヨンや色鉛筆の色名は各メーカーの製品データで、独自の色番号体系に対応するものであり、公開標準でも気軽に複製できる共有知でもありません。ゼロから作った「48 色のクレヨン色見本」は、名前も色値もこちらが勝手に決めたものになります —— それらしく見えて、実際のどの箱とも一致せず、何もないより悪いものです。ここに収録しているのは W3C の標準色名です：公開仕様であり、148 の名前はブラウザーでそのまま使え、どのメーカーの色見本よりも画面上の作業に向いています。

色値から検索したときに「名前がない」と出るのはなぜですか？

148 の名前が対応する色値は離散的で、RGB には 1600 万以上の色があるためです。その 139 の色値に入らない色には標準名がありません —— これは誤りではなく、使用にも支障ありません：その色値をそのままスタイルシートに書けば済みます。CSS に名前は必要ありません。本ツールがこの分岐で「入力が間違っている」ではなく「名前がない」と答えるのは、それが事実だからです。