画像カラーピッカー

画像カラーピッカーは、任意の画像から正確な色の値を抽出できる 無料のブラウザベースツールです。PNG、JPG、WebP、GIF、BMP、 SVGファイルをアップロードして、画像上の任意の場所をクリックする だけで色をピックできます。ピクセルレベルのズームが可能な 拡大ルーペにより、詳細な画像や複雑な画像でも正確なピクセルを ターゲットにできます。

ピックされた各色は3つの形式で同時に表示されます。HEX（例： #3b82f6）、RGB（例：rgb(59, 130, 246)）、 HSL（例：hsl(217, 91%, 60%)）です。各値には 専用のコピーボタンがあるため、CSS、デザインツール、 コードエディタに直接貼り付けられます。拡大オーバーレイは カーソルに追従し、ターゲットピクセルを示すクロスヘア付きで 周囲のピクセルのズームビューを表示します。

色をピックするたびに、最大20個のスウォッチを保持できる カラーパレットに自動追加されます。スウォッチをクリックして 再選択し、その値を表示できます。完了したら、パレット全体を ワンクリックでCSSカスタムプロパティ（変数）としてエクスポート できます。スクリーンショット、モックアップ、写真、ブランド アセットから完全なカラースキームを抽出するのに便利です。

すべての処理はHTML5 Canvas APIを使用してブラウザ内で完結 します。画像がサーバーにアップロードされることはなく、 デバイスからデータが外部に出ることも、サードパーティスクリプト が関与することもありません。一度読み込めばオフラインでも動作し、 任意のサイズの画像に対応しており、ビューポートに合わせて 自動スケーリングしつつ、フル解像度の色データを維持します。

1. アップロードエリアをクリックするか、ファイルをドラッグ＆ドロップして画像をアップロードします。PNG、JPG、WebP、GIF、BMP、SVGに対応しています。
2. 画像上にカーソルを合わせると拡大ルーペが起動します。ズームビューで個々のピクセルとカーソル下のピクセルのHEX値が表示されます。
3. 画像をクリックして色をピックします。ピックされた色はHEX、RGB、HSL値とともに下のパネルに表示されます。
4. 各色の値の横にあるコピーボタンをクリックしてクリップボードにコピーします。Ctrl+Shift+C で現在の色のHEX値をコピーすることもできます。
5. ピックされた各色は自動的にカラーパレットに追加されます。パレットのスウォッチをクリックして再選択できます。
6. CSS Vars でパレット全体をCSSカスタムプロパティとしてエクスポート、Clear でパレットをリセットします。
7. New Image でいつでも別の画像をアップロードできます。パレットは画像の切り替え時も保持されます。