カラースポイトとは？

画像の任意の位置から色を拾い、Hex カラーコードとして確認できるツールです。参考画像やスクリーンショットを見ながら、欲しい色だけをピンポイントで抜き出せます。

画像全体から主要色をまとめて抽出するのではなく、「このボタンの青は何色か」「この影に使われているグレーを知りたい」といった場面に向いています。UI モックアップのアクセント色確認、写真からの色拾い、既存デザインの色合わせに使いやすい構成です。

使い方

1. 画像ファイルをアップロードします。
2. プレビュー画像にカーソルを合わせると、その位置にクロスヘアと拡大レンズが表示されます。
3. 拡大レンズでピクセルを確認しながら、取りたい場所をクリックします。
4. 抽出した色が一覧に追加されます。
5. 色コードをクリックするとコピーできます。

同じ画像から複数の色を拾いたい場合は、そのまま別の位置へカーソルを移動して続けてクリックできます。

このツールでできること

• 画像上の特定位置の色を取得
• クロスヘアと拡大レンズで周辺ピクセルを確認
• 複数の色をリストとして残す
• 抽出した Hex コードを個別にコピー

アップロードした画像はプレビュー表示されるため、どの位置から色を取ったかを確認しながら作業できます。

入出力例

たとえば、ボタンが写った UI 画像を読み込み、青いボタン部分をクリックすると、抽出結果には次のような色コードが追加されます。

#3A78E0

別の場所を続けてクリックすると、結果はこのように増えていきます。

#3A78E0
#F5F7FB
#1F2937

活用シーン

• デザインカンプやスクリーンショットから色を合わせたいとき
• 写真からアクセントカラーを拾いたいとき
• 既存サイトの UI 色を確認して再現したいとき
• 配色見本を作る前に候補色を集めたいとき

使うときの注意点

• 取得できるのは現在の実装では Hex カラーコードです
• 現在の操作はマウスホバーを前提にしているため、デスクトップでの利用に向いています
• 画像を縮小表示している場合でも、抽出は元画像のピクセル位置に合わせて行われます