色名検索ツール
4種類の入力から始める
3桁または6桁のHEXを貼り付け、RGBチャンネルを編集し、HSBを動かし、またはローカル画像のピクセルを選べます。色名検索ツールのどの入力も同じ6桁HEXを更新するため、方法を切り替えても別々の結果にはなりません。
HEX・画像・CSS色名・CIEDE2000
HEX・画像から調べる色名検索ツール
色名検索ツールでは、HEX、RGB、HSBスライダー、または自分の画像のピクセルから色を特定できます。色名検索ツールは、標準化されたCSS色名の近似候補をCIEDE2000色差で上位5件まで並べ、元の数値を残したまま、最も近いToon Toneのキャラクター目標色も表示します。画像の解析は現在のブラウザータブ内だけで行われます。
2026年7月30日更新
色名検索ツール
この色は何色？
色名検索ツールは、選択したsRGB色を再現可能な比較に変換します。148個のCSS名前付き色キーワードを調べ、同じHEXを共有する別名をまとめ、一意の色をCIEDE2000色差の小さい順に並べます。先頭は標準集合の中で最も近い名前であり、すべての人が同じ呼び方をするという意味ではありません。色名検索ツールは同じ色をToon Toneの46個の目標色とも比較し、特定から色記憶の練習へ直接進めます。
色名検索ツール
距離まで確認できる色名の答え
色名検索ツールは、説明のない一語だけではなく、入力値、候補、別名、キャラクターとの比較を同時に示します。
色名検索ツール
測定した5つの名前を比較
色名検索ツールは、近いCSS色を一意の値で5件表示し、それぞれのΔE00を示します。aquaとcyanのようにHEXが完全一致する別名は同じ結果にまとめます。数値が小さいほどCIEDE2000上で近いことを示しますが、正解率ではありません。
色名検索ツール
特定結果を練習につなげる
CSS結果の後、色名検索ツールはToon Toneのライブラリから最も近いキャラクター目標色を探します。キャラクター、対象部位、目標HEX、色差を表示し、現在の言語のまま該当する練習ページを開けます。
ブラウザー内のローカル色判定
色名検索ツールを使う
数値を入力するか画像のピクセルを選びます。色名検索ツールが値、CSS候補、キャラクター目標を同時に更新します。
最も近いCSS色dodgerblue
#3B82F6CSSキーワード
近いCSS色 上位5件
- dodgerblue
#1E90FFCIEDE2000色差5.69 - cornflowerblue
#6495EDCIEDE2000色差6.25 - steelblue
#4682B4CIEDE2000色差7.06 - royalblue
#4169E1CIEDE2000色差9.34 - lightslategray
#778899lightslategray / lightslategreyCIEDE2000色差13.33
最も近いToon Tone目標色
Stitch
同じサンプルをゲーム内のすべてのキャラクター部位目標と比較します。
対象部位青い体毛
#5078a7CIEDE2000色差8.72
色名検索ツール
判断根拠を隠さず色を特定する方法
役立つ色名検索ツールは、採取、測定、命名、デザイン判断を分け、結果をあとから説明できるようにします。
色名検索ツール
1. 信頼できるサンプルを選ぶ
既知のHEXがある場合はそれを使います。画像では、アンチエイリアスの縁、影、反射、圧縮ノイズを避け、明るさが安定した平面のピクセルを選びます。色名検索ツールが読むのは描画済みの1つのsRGBピクセルで、作者の元の塗料やブランドトークンを復元するものではありません。
色名検索ツール
2. 数値を先に確認する
名前を受け入れる前に、色名検索ツールのHEX、RGB、HSBを確認します。RGBは画面のチャンネル値、HSBは色相と強さ、スウォッチは見た目の確認に役立ちます。違うピクセルを選んだなら、色名を解釈する前にもう一度採取します。
色名検索ツール
3. 1位だけでなく候補一覧を読む
CSS色キーワードはsRGB空間に均等には配置されていません。そのため色名検索ツールは、5候補と各色差を公開します。近い数値の名前が複数あるときは、作られた信頼度パーセントよりも候補一覧のほうが曖昧さを正確に伝えます。
色名検索ツール
4. 実際の文脈で試す
色名検索ツールの結果を本番デザインへ移し、コントラスト、周囲の色、面積、表示環境を確認します。Toon Toneの一致は色を覚える練習に使えますが、実装精度が重要なら元のHEXを保持してください。
色名検索ツール
色名検索ツールの各結果が示すもの
標準名、数値、知覚的な距離、キャラクター一致は異なる質問への答えなので、色名検索ツールは分けて表示します。
| 出力 | 方法 | 適した用途 | 重要な限界 |
|---|---|---|---|
| 最も近いCSS色名 | 一意の名前付き色からCIEDE2000が最小の値 | 読みやすいラベル、CSS試作、共有 | CSS色名は少なく、均等配置ではない |
| 近い5つの色名 | 同一HEXの別名をまとめたΔE00順位 | 隣接する名前や曖昧さの確認 | 順位は普遍的な日常名を作らない |
| HEX・RGB・HSB | 選択したsRGB色の等価な表現 | 実装、検査、調整 | 画像にはプロファイルや圧縮変化があり得る |
| Toon Tone目標色 | ゲーム内46目標から最小色差を検索 | 特定から色記憶の練習へ進む | 近い練習対象であり公式色の主張ではない |
色名検索ツール
1つの色に複数の妥当な名前がある理由
自然言語には、すべての画面色へ固有の日常語を割り当てる共通の格子がありません。CSSはブラウザー向けの有限な表を標準化します。色名検索ツールは、公開され再現可能なこの表を使いますが、ブランド、塗料、科学試料の名称を置き換えません。
CSS表には同じ値のaquaとcyan、fuchsiaとmagentaなどの別名があり、配置も不均等です。色名検索ツールは完全一致する別名をまとめ、上位5色と距離を示します。会話では近いCSS名を使い、実装では正確なHEXを保存できます。
色名検索ツール
CIEDE2000を使う理由
赤、緑、青のチャンネル値を直接引くだけでは、RGB立方体の同じ数値差がいつも同じ見た目の差になると仮定してしまいます。人の視覚はそのようには働きません。色名検索ツールは、CIELABで計算した色差と知覚される差の対応を改善するために設計されたCIEDE2000で比較します。現在のCIE参照規格はISO/CIE 11664-6:2022です。色相、彩度、明るさが同時に変わる候補では、単純なRGB距離より説明しやすい順位になります。
それでもCIEDE2000は判決ではなくモデルです。視聴環境、画面校正、色順応、周辺色、サンプルの大きさ、個人差で近さの印象は変化します。ΔE00がゼロなら今回比較する符号化値が一致し、大きいほど式の中で離れます。色名検索ツールは色差を信頼度へ変換せず、見える・見えないの保証もしません。重要な判断では実際の文脈でスウォッチを比べ、数値も保存します。
色名検索ツール
画像のピクセル採取で答えが変わる仕組み
画像を選ぶと、色名検索ツールはローカルでデコードし、縮小した画像をブラウザーのキャンバスへ描画します。クリックした座標の赤、緑、青を読み取ります。ファイルはToon Toneへ送信されません。大きな画像も扱えるよう縮小しますが、1ピクセルにはアンチエイリアス、質感、圧縮、透明度、影、反射が含まれる場合があります。元の塗り色を知りたいときは、近接する複数点を試し、平坦な領域を選びます。
スクリーンショットは特に文脈依存です。表示プロファイル変換、ブラウザー合成、半透明レイヤー、文字の平滑化が含まれます。写真には照明、ホワイトバランス、センサー特性、反射も加わります。色名検索ツールは受け取ったデコード済みピクセルを正しく報告しますが、物理的な物体を認証したり、存在しない原稿を復元したりはできません。ブランド用途では承認済みトークンと比較し、探索用途では共有リンクで正確なHEXを渡します。
色名検索ツール
名前を使う前の6項目
共有、実装、設計判断に使うときは、この色名検索ツールの確認項目を通してください。
- 色名検索ツールピクセルが縁、影、反射、透明レイヤーではないか確認する。
- 色名検索ツール最も近いCSS名と6桁HEXを必ず一緒に残す。
- 色名検索ツールΔE00が近い場合は少なくとも上位3候補を読む。
- 色名検索ツール同じHEXの別名は異なる色ではなく同じコード値として扱う。
- 色名検索ツール文字や重要な操作部品は専用コントラストチェッカーで試す。
- 色名検索ツール重要な選択では画像の出典、日付、利用目的を記録する。
色名検索ツール
標準と測定範囲
色名検索ツールは、検索対象数、数式の参照、確認日を公開し、範囲を検証できるようにします。
- 色名検索ツール標準化されたCSS名前付き色キーワード148個を検索し、同一HEXの別名を表示上まとめます。
- 色名検索ツールCIEDE2000色差による一意のCSS色上位5件を表示し、規格はISO/CIE 11664-6:2022です。
- 色名検索ツール2026年7月30日に確認したToon Toneのキャラクター部位目標色46件と比較します。
W3Cはキーワード表の目的を次のように説明しています。
CSS defines a large set of named colors, so that common colors can be written and read more easily.
色名検索ツール
色名検索ツールの次にできること
色名検索ツール
色名検索ツールのよくある質問
色名検索ツール
画像から色を特定できますか？
はい。画像を選んでピクセルをクリックすると、色名検索ツールがsRGB値をHEXへ変換してCSS色名を順位付けします。画像はタブ内に残り、Toon Toneへ送信されません。
色名検索ツール
何個の色名を調べますか？
色名検索ツールは標準化されたCSS色キーワード148個を確認します。完全な別名があるため、表示する上位5件では同じHEXの名前をまとめます。
色名検索ツール
1位がその色の公式名称ですか？
CSS集合の中でCIEDE2000が最小の名前です。色名検索ツールは普遍的な日常名、ブランド名、塗料名、科学名を確定できないため、HEXと別候補も表示します。
色名検索ツール
結果のΔE00とは何ですか？
色名検索ツールが使うCIEDE2000色差です。ゼロは比較値の一致を示し、小さい値ほど近い順位になります。正解率や同じ知覚を保証する数字ではありません。
色名検索ツール
アップロード画像は保存されますか？
保存されません。色名検索ツールは現在のタブ内で画像をデコードします。共有リンクに入るのは選択したHEXだけで、画像やファイル名は含まれません。