Image Color Picker
Image Color Picker — ブラウザで動作します。入力は保存されません。
画像の色抽出
画像を載せたあとピクセルをクリックすると HEX·RGB を表示します。
値を入力してから「計算する」を押してください。
使い方
- 画像で色を取るファイルを選びます。プレビューがキャンバスに描かれます。
- 欲しいピクセルをクリックします。十字カーソルで位置を狙います。
- 結果でHEX、RGB、クリック位置(x, y)と見本色を確認します。
- 必要ならHEXコピーで #rrggbb をクリップボードに入れます。
- リセットでファイルと結果を消します。画像はサーバーに送られません。
ポイント
画像色抽出はキャンバス getImageData でクリック座標の1ピクセルを読みます。HEXは16進6桁、RGBは0〜255の3値、位置はキャンバスピクセル座標です。プレビューは横最大900ピクセルに縮むことがあり、原画像解像度と座標が1:1でないことがあります。画面上のクリックは表示サイズに合わせてキャンバス座標に変換されます。ファイルエラーなら画像を読めないという案内が出ます。クリック前はHEXが空でコピーは動きません。見本箱は選んだHEXで埋まります。
パレットだけ選ぶならカラーピッカー、RGB↔HEXの数字だけなら変換器、単色背景を消すならPNG背景透明化が合います。このツールは写真・スクリーンショットからブランド色を拾う用途です。ファイルはブラウザ内だけで開きます。CSSに使うときはHEXコピーが最も速いです。RGBが必要なキャンバス・シェーダは中央の欄をコピーしてください。座標は縮小キャンバス基準なのでPhotoshop原画像ピクセルと違うことがあります。
例
ロゴPNGを上げて青い部分をクリックするとHEXが #1a5cff のように出て、RGBと座標も一緒に表示されます。HEXコピーでCSS変数に貼ります。同じ画像を透明化ツールで背景クリック用にも使えます。圧縮JPEGは境界ピクセルがにじむので、隣の点を何度か打って比べてください。UIスクリーンショットでボタン色を打ってデザイントークンを合わせる使い方です。同じ青系統でもJPEGなら隣ピクセルのHEXが1〜2違うことがあります。
関連: カラーピッカー · RGB HEX変換 · PNG背景透明化
よくある質問
画像色抽出はピクセルをクリックしますか？
はい。ファイルを上げたあとプレビューで1点をクリックします。上げるまではクリックしても色は変わりません。画像を変えたあとは前のHEXが残ることがあるので、もう一度クリックしてください。リセットが確実です。
HEX RGBと座標が一緒に出ますか？
一緒に出ます。HEX、RGB、位置(x, y)の3欄と見本です。アルファ（透明度）は表示しません。位置欄はデバッグ用です。スプライトシートでアイコン座標をだいたい見るときに使います。
HEXコピーボタンはありますか？
あります。HEXが埋まったあとHEXコピーを押すとクリップボードに入ります。まだクリック前ならコピーされません。コピーはHEXだけが対象です。RGB文字列は欄でドラッグしてください。
カラーピッカーと画像色抽出の違いは？
ピッカーは任意の色を選びHSLまで見せます。この画面は画像ピクセルの実際の色と座標を読みます。HSLが必要ならコピーしたHEXをカラーピッカーのHEX欄に貼ってください。
画像はサーバーに上がりますか？
上がりません。ローカルキャンバスだけで読みます。リセットするとプレビューが消えます。大容量原画像でもプレビュー幅は900に制限されます。色サンプルには通常十分です。
拡大プレビューで座標は正確ですか？
クリックは画面に見えるサイズをキャンバスピクセルに換算します。横が900に縮んだ場合、座標は縮小キャンバス基準です。透明ピクセルを打つとRGBは背景合成なしの保存色が出ます。アルファは捨てられます。
最終確認日: 2026-09-04