色名検索ツール
hex、rgb()、hsl() のいずれかで色を入力すると、最も近いCSS名前付きカラーを瞬時に見つけます。ライブスウォッチ比較と、次に近い候補もいくつか表示します。
🔒 お使いのブラウザ内でローカル処理されます
Loading…
使い方
- フィールドに hex、rgb()、hsl() 形式で色を入力するか、カラースウォッチで視覚的に選択します。
- 最も近いCSS名前付きカラーが瞬時に表示され、入力した色の隣にそのスウォッチ、名前、hexコードが表示されます。
- 距離スコアを確認すると、一致がどれだけ近いかがわかります。距離が0の場合は完全一致です。
- 下のリストをスクロールすると、次に近い名前付きカラーが近い順に表示されます。
特徴
- hex、rgb()、hsl() の各カラー形式に加え、視覚的なカラーピッカーにも対応
- 148種類の標準CSS/X11名前付きカラーすべてと照合
- 入力した色と一致した名前付きカラーをライブで並べて表示
- 数値の距離スコアと、次に近い候補をいくつか表示
- 100%クライアントサイド処理 — 色データがブラウザの外に出ることはありません
よくある質問
色名のマッチングはどのように機能しますか？
入力した色はRGBに変換され、RGB値間のユークリッド距離を使ってすべての標準CSS名前付きカラーと比較されます。距離が最小の名前付きカラーが最も近い一致として表示され、次に小さいものが代替候補として表示されます。
どの名前付きカラーと照合されますか？
CSS Color Moduleで定義されている、148種類の拡張CSS/X11カラーキーワードの標準セットです。"tomato"、"slateblue"、"rebeccapurple" など、ブラウザがCSSで認識するのと同じ名前です。固定のよく知られたリストなので、色がそのいずれかに正確に一致した場合のみ完全一致が見つかります。
サイトは自分の言語なのに、色名が英語で表示されるのはなぜですか？
"Tomato" や "SlateBlue" のような名前は翻訳可能なテキストではなく、文字通りのCSSキーワードです。ブラウザはスタイルシート内で英語の綴りしか理解しません。そのため、どの言語でも色名だけは英語のまま表示され、その周囲のページ全体は完全に翻訳されています。
距離スコアは何を意味しますか？
各チャンネルが0〜255の範囲を取るRGB空間における、入力した色と名前付きカラーとの直線（ユークリッド）距離です。距離0は完全一致を意味し、考えられる最大距離（黒から白まで）は約441です。数値が小さいほど、視覚的に近い一致を意味します。
このツールは色を保存したりアップロードしたりしますか？
いいえ。解析、照合、距離計算はすべて、ブラウザ内で通常のJavaScriptを使ってローカルに行われます。何かがサーバーに送信されたり、どこかに保存されたりすることはありません。