画像をドロップ
またはクリックして選択 — ページ上のどこでも貼り付け (Ctrl+V) できます
ホバーで拡大 · クリックでサンプルポイントを記録 · スクロールでズーム · ドラッグで移動
拡大してピクセルの色を取得、サンプル点を記録 — HEX・RGB・HSL・OKLCH。
ファイルはブラウザから送信されません — 処理はすべてローカルで行われます。
画像をドロップ
またはクリックして選択 — ページ上のどこでも貼り付け (Ctrl+V) できます
ホバーで拡大 · クリックでサンプルポイントを記録 · スクロールでズーム · ドラッグで移動
これは画像用カラーピッカーとインスペクタを1つにまとめた、画像のための開発者ツールです。画像を読み込み、拡大ルーペで狙った位置のピクセル色を取得 — HEX・RGB(A)・HSL・OKLCHで即座に読み取れ、それぞれワンクリックでコピーできます。スクロールホイールでズーム、ドラッグでパン。拡大してもピクセルはシャープなまま表示されるので1ピクセル単位で正確に狙え、座標は常に元画像のピクセル空間で報告されます。
単なるスポイトツールと一線を画すのが、サンプルポイントのワークフローです。クリックするたびに画像にマーカーがピン留めされ、座標・スウォッチ・hex値のラベル付きの行がリストに追加され、JSONまたはCSVでエクスポートできます。これにより、手早い色チェックが再現可能なプロセスになります。デザインシステム用の画像カラーパレット抽出ツールとして使う、QAでブランドカラーを検証する、ゲームのスプライトや科学画像の色をカタログ化する、といった用途に対応。1 px・3 × 3・5 × 5の平均化モードが圧縮ノイズを抑え、すべてブラウザ内でローカルに動作します — 画像がアップロードされることはありません。
画像をドロップまたは貼り付けてカーソルを重ねると、拡大ルーペがポインタに追従し、そのピクセルの正確な色をHEX・RGB・HSL・OKLCHで表示します。任意の場所をクリックすると、その色がサンプル点として確定し、コピーやエクスポートができます。
クリックするたびに、そのピクセルの座標と色がラベル付け可能なリストに記録されるので、1枚の画像から複数の色を一度に採取できます。デザインQA(ボタンが本当に#3B82F6かの確認)、カラーパレットの作成、ゲームアートや科学画像への注釈付けに最適です。セット全体をJSONまたはCSVでエクスポートできます。
サンプリング時に平均するピクセル数を設定します。1 pxは正確に1ピクセルだけを読み取り、3 × 3と5 × 5はカーソル周辺の小さな窓を平均するため、JPEGの圧縮ノイズやディザリングが平滑化され、より代表的な色が得られます。
座標は常に画面ではなく元画像のピクセル空間で報告されます。インスペクタはズームとディスプレイのdevicePixelRatioを考慮するため、拡大やパンをしていても(x, y)はソースファイル内の実際のピクセルと一致します。
OKLCHはCSSでサポートされる現代的な知覚色空間(明度・彩度・色相)です。HSLと違い、OKLCHでは等間隔のステップが目にも等しく異なって見えるため、アクセシブルで均等に間隔の取れたカラースケールの構築にはるかに向いています。本ツールはサンプリングしたすべてのピクセルを、そのままCSSに貼り付けられるOKLCH文字列に変換します。
いいえ。画像はJavaScriptとCanvas APIを使ってすべてブラウザ内でデコード・検査され、デバイスから外に出ることはありません。一度読み込めばページはオフラインでも動作し続けます。
Batch convert between PNG, JPEG, WebP and GIF with live size feedback.
Encode images to Base64 data URIs and decode them back.