ByteScope

Image Color Picker & Inspector

拡大してピクセルの色を取得、サンプル点を記録 — HEX・RGB・HSL・OKLCH。

ファイルはブラウザから送信されません — 処理はすべてローカルで行われます。

Drop an image here

or click to browse — you can also paste an image (Ctrl+V) anywhere on this page

hover to magnify · click to record a sample point · scroll to zoom · drag to pan

このツールについて

これは画像用カラーピッカーとインスペクタを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・3 × 3・5 × 5のサンプリングモードは何をしますか？
サンプリング時に平均するピクセル数を設定します。1 pxは正確に1ピクセルだけを読み取り、3 × 3と5 × 5はカーソル周辺の小さな窓を平均するため、JPEGの圧縮ノイズやディザリングが平滑化され、より代表的な色が得られます。
画面上の位置ではなく座標が表示されるのはなぜですか？
座標は常に画面ではなく元画像のピクセル空間で報告されます。インスペクタはズームとディスプレイのdevicePixelRatioを考慮するため、拡大やパンをしていても(x, y)はソースファイル内の実際のピクセルと一致します。
OKLCHとは何ですか？なぜ含まれているのですか？
OKLCHはCSSでサポートされる現代的な知覚色空間（明度・彩度・色相）です。HSLと違い、OKLCHでは等間隔のステップが目にも等しく異なって見えるため、アクセシブルで均等に間隔の取れたカラースケールの構築にはるかに向いています。本ツールはサンプリングしたすべてのピクセルを、そのままCSSに貼り付けられるOKLCH文字列に変換します。
画像はサーバーにアップロードされますか？
いいえ。画像はJavaScriptとCanvas APIを使ってすべてブラウザ内でデコード・検査され、デバイスから外に出ることはありません。一度読み込めばページはオフラインでも動作し続けます。

関連ツール