カラーコードの名前を検索｜デザインで使う「色の呼び名」

デザイン CSS UI
結論

「この #4169e1 って何色？」と聞かれたら 「Royal Blue（ロイヤルブルー）」 と答える。色の名前を知ることで、チーム内でのコミュニケーションがスムーズになります。

CSSで使える「名前」付きカラー

ブラウザは標準で140以上の色名をサポートしています。

  • crimson (#DC143C)
  • dodgerblue (#1E90FF)
  • gold (#FFD700)
  • rebeccapurple (#663399)

これらはカラーコードの代わりにそのままCSSに記述できます。

🎨 この場で色の名前を検索する

HEXを入力すると色名、色名を入力するとHEXが表示されます

なぜコードではなく名前を使うのか？

  1. 直感的 — #000080 と書くより navy と書くほうが、ソースコードを見た時に色が想像しやすいです。
  2. デザインシステムの共通言語 — 「アクセントカラーは SkyBlue をベースにする」といった言葉での合意形成がしやすくなります。
  3. 歴史的背景 — 昔のWebセーフカラーやX11カラーなど、色名にはそれぞれ由来があり、それを知ることでデザインに深みが出ます。

注意点

ただし、製品レベルの開発では、ブランドが定めた厳密なカラー（例：brand-primary: #4F46E5）を使うのが一般的です。標準の色名は、あくまで「サクッとデモを作りたい時」や「色のイメージを伝えたい時」に活用するのがベストです。

関連記事

あわせて読むと理解が深まる関連記事をまとめました。

トピック記事
Golden Ratio 黄金比Golden Ratio 黄金比｜レイアウトと typography
Color Name SearchColor Name Search｜色名から HEX を逆引き
1フレームは何秒・何ms？ 60fpsと120fpsの計算方法1フレームは何秒・何ms？ 60fpsと120fpsの計算方法
AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026AIクローラー対応 robots.txt・llms.txt 設定ガイド 2026｜GPTBot・ClaudeBot・Google-Extended・GEO戦略
APIキャッシュ設計ガイドAPIキャッシュ設計ガイド｜ETag・Cache-Control・304・CDNキャッシュキーの実務
Web APIのエラーハンドリング設計Web APIのエラーハンドリング設計｜RFC 9457・error_code・400/422/409の使い分け
Web APIのべき等性（Idempotency）設計Web APIのべき等性（Idempotency）設計｜二重決済を防ぐ実装ガイド
API設計におけるページネーションの使い分け：オフセット型とカーソル型の比較API設計におけるページネーションの使い分け：オフセット型とカーソル型の比較
APIのレート制限（Rate Limiting）実装ガイドAPIのレート制限（Rate Limiting）実装ガイド｜アルゴリズム選定と429エラーの適切なハンドリング
APIデバッグで使うツールの使い分けAPIデバッグで使うツールの使い分け｜JSON整形・JWT・Base64のワークフロー
Aspect Ratio 計算Aspect Ratio 計算｜16:9・4:3 解像度一覧
Astro Content Collections でブログを構築するAstro Content Collections でブログを構築する