Color Name Search｜HEX カラーコードから CSS 色名・和名を逆引き
色 Color Name CSS デザイン
結論：30秒で色名を逆引きする
- CSS 標準色数: 147 色（
transparent/currentColor含む） - 検索ツール: 下のコンポーネントで HEX ↔ 色名を相互検索
- チーム運用のコツ: デザイン仕様書のコミュニケーション用に色名を利用
1. オンライン CSS 色名・HEX 逆引き検索ツール
入力した HEX コードに最も近い標準 CSS 色名と色プレビューをブラウザ内で即座に表示します。
🎨 この場で色の名前を検索する
HEXを入力すると色名、色名を入力するとHEXが表示されます
2. 定番 CSS 名（Named Colors）と HEX コードの対応例
| CSS 色名 | HEX コード | 色イメージ・特徴 |
|---|---|---|
tomato | #ff6347 | 明るい赤オレンジ |
steelblue | #4682b4 | 落ち着いた青グレー |
forestgreen | #228b22 | 深い緑 |
gold | #ffd700 | 鮮やかな黄色 |
rebeccapurple | #663399 | W3C の Eric Meyer 氏を称えて制定された紫 |
3. 注意点（ハマりどころ）
grayとgreyの綴り差異- CSS では
darkgrayとdarkgreyのように、アメリカ英語 (a) とイギリス英語 (e) の両方のエイリアスが存在します。同じ HEX コード (#a9a9a9) を指しますが、チーム内での表記統一が推奨されます。
- CSS では
lightgreyとdarkgrayの明るさ逆転の罠darkgray(#a9a9a9) は実はgray(#808080) よりも明るいという歴史的経緯による命名の混乱があります。CSS の標準色名に頼りすぎず数値指定を基本にしてください。