オンラインカラーピッカー、画像からHEX/RGB/HSLの色値を正確に抽出

カラーピッカーはクリックしてピクセルの色値を読み取るインタラクティブな確認機能で、それ自体は書き出しファイルを生成しないため「一括処理」という概念は当てはまりません。アップロードした画像がどれだけ大きくても、具体的な位置を1つずつクリックして色を読み取るという操作になるため、このツールは1枚の画像のアップロードのみに対応し、一括モードは提供していません。

完全にお使いの端末のブラウザ内で完結します。ブラウザ標準のCanvasのピクセル読み取り機能を利用して、画像データから対応する位置の色数値を直接読み取ります。原画像がどのサーバーにもアップロードされることはありません。

ルーペに表示されているのは、カーソルが現在ホバーしている位置周辺の小さな範囲を拡大した効果であり、実際に取得されるのは赤い枠で示された1つの具体的なピクセルの色です。画像自体にグラデーションやノイズがある場合、隣接するピクセルの色にわずかな違いが生じることがありますが、赤い枠で示されたピクセルを基準にクリックして取得すれば、色は正確に対応しており、ずれはありません。

取得履歴は現在のページのブラウザメモリ内にのみ保存され、同じ操作の中で複数の取得済み色を比較しやすくするためのものです。ページを更新または閉じると履歴は消去され、永続的に保存されたりアップロードされたりすることはありません。ある色の値を長期的に残したい場合は、あらかじめコピーして自分のメモやデザインツールに貼り付けておくことをおすすめします。

HEX（例：#FF3B30）はWeb開発とほとんどのデザインツールで最も一般的に使われる形式で、簡潔で貼り付けて使いやすいです。RGB（例：rgb(255, 59, 48)）は赤・緑・青の3つのチャンネルの数値を個別に確認・調整したい場合により直感的です。HSL（例：hsl(4, 100%, 59%)）は色相、彩度、明度で色を記述するもので、同じ色相のまま明暗や彩度を調整したい場合に便利です。3つの形式は同じ色を表しているだけなので、実際に貼り付けるツールやコードに応じて形式を選んでください。

読み取れます。カラーピッカーが読み取るのは画像をデコードした後の元のピクセルデータであり、ページ上の表示サイズには影響されません。画像がページ上で縮小表示されていても、取得時には画像本来の実際の解像度に基づいて対応する位置のピクセルの色を正確に読み取るため、表示の拡大縮小によって色にずれが生じることはありません。