カラーネーム検索とは？
任意のHEX・RGB・HSL値を入力すると、1,500以上の名前を収めたデータベースから最も近い名前付きカラーが見つかります。色コードを声に出して言える名前に変えてくれるので、デザイン資料を書くときや同僚と配色を相談するときに役立ちます。
色名のデータは Figma プラグインや Tailwind の拡張でもよく参照されるオープンソースの color-name-list を使っています。HEX を入力する、入力を RGB か HSL に切り替えてチャンネルを打ち込む、あるいはカラーピッカーで色を選ぶ、好きな方法でどうぞ。ツールは RGB のユークリッド距離で一番近い名前を返し、HEX・RGB・HSL・HSV・CMYK で表示します。さらに別候補の名前を 2 つと類似度スコア、WCAG コントラストの判定も示すので「ほぼ一致」なのか「ざっくり近い」だけなのかを区別できます。
使い方
- ステップ1 — HEX 値（例：#3B82F6）を入力するか、入力を RGB か HSL に切り替えてチャンネル値を打ち込むか、カラーピッカーで色を視覚的に選択します。
- ステップ2 — 最も近い名前付きカラーが正確な一致距離とともに即座に表示されます。
- ステップ3 — カラー名、その正確なHEX値、入力色と名前付きカラーの視覚比較を確認します。
使用するタイミング
- スタイルガイドやコンポーネントライブラリに登録する前に、ブランド色に正式名を付ける。
- スクリーンショットから拾った色を、エンジニアが名前で検索できる標準色に変換する。
- 塗料や布のサンプルを既知の Web 標準パレットと照らし合わせて呼び名を確認する。
結果
開発者が #4A90D9 を入力すると、最も近い色が「スチールブルー」（#4682B4）で類似度は96.2%と分かります。
よくある質問
- 色名はどこから来ているのですか。
- オープンソースの color-name-list プロジェクトから取っています。約 1500 件の名前を xkcd の色彩アンケート、塗料メーカーのカタログ、CSS 仕様から集めたものです。多くのデザインツールが同じデータを使っているため、見慣れた名前が並びます。
- なぜ類似度が 100% に届かないことがあるのですか。
- 色名リスト上の項目とぴったり一致する場合だけ 100% になります。それ以外は RGB 距離で最も近い色名を当てます。95% を超えれば人の目では区別できず、85% を下回ると名前と実際の色のずれが見て分かるレベルになります。
- RGB 距離ですか、それとも知覚距離ですか。
- RGB のユークリッド距離です。計算が速く、ほとんどの Web カラーで十分使えます。ただし彩度が高い赤や緑では人の目の方が RGB モデルより敏感なので、少しずれた名前が選ばれることがあります。
- HSL や RGB、HEX を直接入力できますか。
- はい — 3 つとも対応しています。入力タブを HEX・RGB・HSL に切り替えて値を入れるか、カラーピッカーで選んでください。結果カードには一致した色の HSL・HSV・CMYK も表示されるので、必要な形式をそのままコピーできます。
- 離れた HEX 値が同じ名前を返すのはなぜですか。
- 色名表は彩度の低い中間色やパステルピンクなど一部のエリアが疎です。両方の入力が既存名から遠い場合、両方とも同じ近傍が当たります。類似度スコアを見ると差がどれくらいあるかが分かります。