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

デザイン 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）を使うのが一般的です。標準の色名は、あくまで「サクッとデモを作りたい時」や「色のイメージを伝えたい時」に活用するのがベストです。