カラーコード（HEX/RGB）から色の英語名を逆引き検索（CSS Named Colors一覧）

デザイン CSS UI カラーコード フロントエンド

16進数カラーコード（HEX）や RGB 値から、対応する英語の色名（Color Name）やCSS標準色名を調べるツールと解説です。

1. オンライン カラーコード ↔ 色名 逆引き検索ツール

カラーコードを入力するかカラーピッカーで選択すると、最も近い英語の色名と CSS Named Color を即座に表示します。

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

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

2. 代表的な CSS Named Colors (148色から一部抜粋)

CSSでは、16進数コードの代わりに以下の英語名（大文字小文字区別なし）をそのまま色として指定できます。

CSS色名 (Color Name)HEXコードカラープレビュー特徴・使いどころ
crimson#DC143C深みのある赤エラー表示、重要警告
dodgerblue#1E90FF鮮やかな青プライマリボタン、リンクハイライト
forestgreen#228B22深い緑成功ステータス (Success)、環境・自然
amber / gold#FFD700金色・黄色警告、お気に入りスターアイコン
slate-gray#708090青みがかったグレーサブテキスト、枠線
rebeccapurple#663399濃い紫CSSコミュニティの記念色（CSS4追加）

3. デザインシステム（Design Tokens）での色名設計

製品開発（Figma ↔ Tailwind CSS ↔ React）では、dodgerblue のような抽象色名ではなく、セマンティック（意味的）な名称にマッピングして管理するのがベストプラクティスです。

:root {
  /* 1. プリミティブ（基本色名） */
  --color-blue-500: #1e90ff;
  
  /* 2. セマンティック（目的別の意味定義） */
  --color-primary: var(--color-blue-500);
  --color-text-body: #1e293b;
  --color-border-danger: #dc143c;
}