画像カラーピッカーとは？

画像カラーピッカー（スポイト）は、画像内のピクセルの色を読み取るツールです。デザイナーは、ロゴからブランドカラーを合わせたり、写真からカラーパレットを抽出したり、Webサイトやアプリのスクリーンショットで正確な色合いを確認したりするために使用します。ピクセルデータから色を読み取るため、目視による推測ではなく、正確な値を取得できます。

ツールの説明

このツールでは、画像を開くかクリップボードからスクリーンショットを貼り付け、画像上の任意の場所をクリックして色を取得できます。拡大ルーペがポインターに追従し、その周囲のピクセルを表示するため、目的のピクセルを正確に選択できます。クリックするたびに番号付きのポイントが追加され、各ポイントの色が選択した出力形式で表示されるので、そのままコピーできます。

機能

  • PNG、JPEG、WebP、GIF、BMP、AVIF画像から色を取得、または Ctrl+V で画像を貼り付け
  • ポインター下の色を表示する拡大ルーペ
  • 小さなディテールやアイコンも確認できる、最大3200%のズームと鮮明なピクセル表示
  • 1ピクセルのサンプル、または3 × 3～101 × 101ピクセル範囲の平均を取得。画像編集ソフトのスポイトと同様に使用可能
  • 各色を HEX、RGB、HSL、HWB、CMYK、LABなどの形式でコピー
  • 取得したすべてのポイントを示す、画像上の番号付きマーカー
  • 半透明ピクセルの不透明度を表示
  • 矢印キーで最後のポイントをピクセル単位で移動

仕組み

画像はブラウザー内でデコードされ、canvasに描画された後、canvasのピクセルから色が読み取られます。色はWebの色空間であるsRGBに変換されるため、画像がページ上でどのように見えるかと値が一致し、そのままCSSで使用できます。平均サンプルでは、範囲内のピクセルの色が、不透明度を重みとして平均化されます。そのため、透明なピクセルによって結果が暗くなることはありません。画像がアップロードされることはありません。

ヒント

  • 写真やJPEG画像にはノイズがあるため、隣接するピクセルの色がわずかに異なることがよくあります。ノイズのある1ピクセルではなく、3 × 3または5 × 5の平均を使用すると、見た目に近い色を取得できます。
  • ロゴ、アイコン、スクリーンショットなどの単色のグラフィックには、ポイントサンプルを使用して正確な色を取得してください。
  • サンプルサイズを変更すると、すでに取得したすべてのポイントの色も更新されます。
  • GIFファイルでは、最初のフレームから色が取得されます。