カラーツール

HEXカラー名検索ツール

16進数カラーコードを入力すると、対応する色の名前や近似色を即座に特定します。

ツールを実行

このツールは、入力された16進数カラーコード(HEX)を解析し、組み込みのパレットから一致する正確な色名または最も近い近似色名を検索します。デフォルトでは青色の#3498dbが設定されていますが、任意のHEX値を入力して確認できます。3桁の短縮形式も自動的に展開され、シャープ記号がない場合も補完されます。RGB各チャンネルの差に基づいて計算された距離スコアも表示されるため、色の類似度を数値で把握可能です。ウェブデザイナーや開発者がデザインシステムの色命名を一貫させたり、既存のブランドカラーの正式名称を確認したりする際に役立ちます。視覚的なプレビューとテキスト情報の両方を提供し、CSSコーディングやドキュメント作成の効率化をサポートします。

使い方

  1. カラーピッカーまたはテキストボックスに16進数カラーコード(例: #FF5733)を入力します。
  2. 必要に応じてデフォルト値を変更し、確認したい色を選択します。
  3. 「実行」ボタンをクリックして解析処理を開始します。
  4. 結果パネルに表示される正確な色名、または最も近い近似色名を確認します。
  5. 表示された距離スコアを参考に、パレット内の色との類似度を評価します。

使用例

  • 入力: #FFFFFF → 出力: 正確な色名 "White"、距離 0.0
  • 入力: #3498db → 出力: 正確な色名 "Dodger Blue"、距離 0.0

よくある質問

3桁のHEXコードを入力できますか?

はい、3桁の短縮形式(例: #FFF)は自動的に6桁に展開されて処理されます。

シャープ記号(#)なしで入力できますか?

はい、ツールが自動的に先頭にシャープ記号を補完して解析します。

距離スコアはどう計算されますか?

各RGBチャンネルの差を基に計算され、小数点以下1桁で丸めて表示されます。

すべての色に正確な名前がありますか?

いいえ、パレットに完全に一致しない場合は、最も近い近似色名が表示されます。

このツールを埋め込む

以下のコードを使って、SmartPlusLab のツールをウェブサイトに追加できます。