カラースポイトとは？

画像の任意の位置から色を取得し、HEXなどのカラーコードとして確認できるツールです。スクリーンショットや写真から、ボタンの色や影のグレーなど、必要な1点の色を拾えます。

画像はブラウザ内で処理され、外部へ送信されません。

使い方

1. 画像ファイルを選びます。ドラッグ & ドロップでも読み込めます。
2. 画像上でカーソルを動かすと、ルーペに周囲の画素と取得する色が表示されます。
3. クリックまたはタップで色を取得します。値の行をクリックするとコピーできます。

画像にフォーカスを合わせると、矢印キーでカーソルを1画素ずつ動かし、EnterキーまたはSpaceキーで取得できます。

サンプル範囲

• 1px：カーソル直下の画素の色です。
• 3×3・5×5：カーソルを中心にした範囲の平均です。赤・緑・青・透明度の各チャンネルをそれぞれ平均します。画像の圧縮によるむらや、輪郭のぼけをならせます。

画像の端では、範囲が画像内に収まるように移動します。画像が範囲より小さいときは、画像に収まる大きさになります。

取得した色

色はHEX・RGB・HSL・OKLCHで表示されます。透明度がある色は、HEXが8桁になり、RGB・HSL・OKLCHにも透明度が含まれます。

取得した色は履歴に新しい順で残ります。同じ色は重複して追加されません。履歴の行を選ぶと、その色の値を確認できます。行ごとの削除、すべて削除、すべてコピーもできます。すべてコピーでは、履歴の色を1行に1色ずつHEXでコピーします。履歴はページを再読み込みするか画像を変更すると消えます。

対応形式

PNG・JPEG・WebP・GIF・BMP・AVIFに対応しています。SVGはPNGなどに書き出してから読み込んでください。

活用シーン

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

画像全体の配色をまとめて知りたいときは、カラーコード抽出で主要な色を一度に取り出せます。