画像から色を取得｜HEX・RGB・HSLを調べるツール

画像ファイル

JPEG・PNG・WebP、20MB以下の画像を1枚選択してください。

JPEG、PNG、WebP画像を選択してください。

このツールでできること

JPEG、PNG、WebP画像を1枚選び、任意の1ピクセルの色をHEX、RGB、HSL、透明度で確認できます。読込直後は画像中央のピクセルを自動選択し、クリック、タップ、キーボードで位置を変更できます。選択色と周辺11×11ピクセルの拡大表示を見ながら、各色コードを個別にコピーできます。主要色の自動抽出や画像の加工・保存は行いません。

使い方

20MB以下の画像を1枚選択します。読込後、実データの形式と画像サイズ、中央ピクセルの色が自動表示されます。
プレビューの調べたい場所をクリックまたはタップします。
必要に応じて、プレビューへフォーカスして矢印キーで位置を微調整します。Shiftキーを押しながら操作すると10ピクセルずつ移動します。
HEX、RGB、HSLのコピーを選びます。

入力例・出力例

400×200pxのPNGを読み込み、中央のRGBA値が0, 102, 204, 255の場合、初期位置はX: 200 px、Y: 100 pxです。HEXは#0066CC、RGBはrgb(0, 102, 204)、HSLはhsl(210, 100%, 40%)、透明度は100%（255 / 255）と表示します。

RGBA値が255, 0, 0, 128の半透明ピクセルでは、HEX8は#FF000080、RGBAはrgba(255, 0, 0, 0.502)、HSLAはhsla(0, 100%, 50%, 0.502)、透明度は50%（128 / 255）になります。

よくある利用場面

ロゴやスクリーンショットの特定位置から色コードを取得するとき
デザイン再現用に画像上の1ピクセルを細かく確認するとき
透明度を含むPNG・WebPの色を調べるとき

色コード・座標・透明度の読み方

位置はブラウザがデコードした元画像の左上をX: 0 px、Y: 0 pxとする0始まりの座標です。読込直後は幅と高さをそれぞれ2で割って小数点以下を切り捨てた位置を選びます。縮小表示されたプレビューをクリックした場合は、表示上の位置を元画像の倍率へ戻して小数点以下を切り捨て、画像の端を越えない座標へ収めます。矢印キーは1ピクセル、Shiftキーとの併用は10ピクセル移動し、端に達するとそこで止まります。

不透明色のHEXは#RRGGBB、透明度がある色は末尾へアルファ値を加えた#RRGGBBAAです。RGB各値とアルファ値は0〜255で取得し、RGBA・HSLAのアルファ値はアルファ値÷255を小数第3位まで表示して末尾の0を省きます。透明度のパーセントと、HSLの色相・彩度・明度は最も近い整数へ丸めます。

周辺11×11ピクセルを、色の補間をせずに拡大表示します。周辺表示の中央が選択中のピクセルです。画像端では画像外の部分を空けたまま、選択位置を中央へ配置します。

処理仕様

対応形式はJPEG、PNG、WebPです。画面上の「20MB」は実装上20MiB、20,971,520バイトを表し、この値を1バイトでも超えるファイルは読込前に拒否します。ファイル内の符号化寸法とブラウザのデコード後寸法は、どちらも幅・高さ各12,000ピクセル以下かつ40,000,000ピクセル以下である必要があります。10,000×4,000pxは画素数上限内ですが、10,000×4,001pxは上限を超えます。

形式と符号化寸法は、画像の実データで確認します。拡張子やブラウザから渡されるMIMEタイプと実データが異なる場合も、実データが対応形式ならその形式として表示します。符号化寸法が上限内でも、画像のデコードに失敗した場合やデコード後寸法が上限を超えた場合は結果を表示しません。

表示する色コードは、ブラウザが画像をデコードしてCanvasへ描画した後の8ビットRGBA値です。元ファイルの生の色チャンネルを直接解析するものではありません。カラープロファイルやブラウザの色管理、Canvas内部のアルファ処理と丸めにより、画像編集ソフトや元ファイルの値と完全には一致しない場合があります。

完全に透明なピクセルでは、元画像ファイルにRGB値が格納されていてもCanvas描画時に失われるため、その隠れたRGB値は取得できません。

0バイト、形式や寸法を確認できないファイル、GIF、SVG、HEIC、AVIFには対応していません。クリップボードへ書き込めない環境ではコピー失敗を表示し、画面上の色コードを手動で選択できます。

入力データについて

選択したファイルの名前、容量、ファイル全体のバイト列、デコードした画像、選択座標、RGBA値と変換後の色コードはブラウザ内だけで処理され、ToolRollのサーバーや外部サービスへ送信されません。外部APIや外部ライブラリは使用しません。

Cookie、localStorage、sessionStorage、IndexedDB、ブラウザの履歴へ画像や結果を保存しません。コピー操作を行った色コードだけは、その操作時に端末のクリップボードへ書き込まれます。