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

無料のオンライン画像カラーピッカー。画像をアップロードして任意の位置をクリックし、色を抽出。

画像から色を抽出することは、デザインワークフローにおける基本タスクです。ロゴからブランドカラーを合わせる、Webサイトデザイン用に写真からカラーパレットをサンプリングする、既存画像内の色の正確なHEXコードを特定するなどです。Image Color Pickerでは、アップロードした画像上の任意の場所をクリックして、そのピクセルの正確な色をHEX形式とRGB形式で取得できます。

画像をアップロードするとキャンバスに表示されます。ホバー時の拡大鏡がカーソル下の領域を2倍ズームで表示するため、細かい画像でも特定のピクセルを狙いやすくなります。カーソルを動かすと、色のプレビューがリアルタイムに更新され、現在のピクセル色がHEX値とRGB値の両方で表示されます。目的の色を見つけたらクリックして取得します。

クリックするたびに、画像の下のパレットパネルに色が追加されます。パレットには、取得した各色がスウォッチとしてHEX値とRGB値とともに表示され、それぞれにコピーボタンが付いています。ブランドカラー1色から、写真から抽出した10色のフルスキームまで、必要なだけ色をパレットに追加できます。パレットは、新しい画像をアップロードするかページを更新するまで保持されます。

基盤となる技術はCanvas APIのgetImageData()メソッドを使用しており、クリックした座標のピクセルの正確なRed、Green、Blue、Alpha値を読み取ります。これらのRGB値は表示用にHEX形式に変換されます。このツールはすべての一般的な画像形式に対応し、すべてをローカルで処理するため、画像はプライベートに保たれます。