画像カラーピッカーとは
写真、スクリーンショット、イラストなどの画像から、指定した1pixelのHEX・HEX8・RGB・HSL・Alphaを調べるツールです。画像URLは取得せず、選択したローカル画像だけをブラウザ内で処理します。
画像からカラーコードを調べる方法
- 「画像を選択」、ドラッグ＆ドロップ、または画像の貼り付けで読み込みます。
- 調べたい場所をクリックまたはタップします。
- HEX・RGB・HSL・透明度と元画像座標を確認します。
- 必要な形式のコピーボタンを押します。
HEXカラーコードを取得する方法
HEXはRGBを16進数で表す形式です。赤は#FF0000です。透明度を含むHEX8は#RRGGBBAAの順で、最後の2桁がAlphaです。
RGB・HSLを画像から確認する方法
赤はRGBでrgb(255 0 0)、HSLでhsl(0 100% 50%)です。選択した色をさらに調整したい場合はカラーコード変換も利用できます。
透明PNGのAlphaを確認する方法
Canvasから取得したA値を0～255と0～100%で表示します。A=128は約50.2%、A=0は0%です。完全透明な画素では、RGB値はブラウザで描画された結果に基づくため、元ファイル内部の不可視RGB値と異なる場合があります。
ピクセル単位で色を確認する方法
プレビューは最大1000 × 700pxへ縮小しますが、色は縮小画像から取得しません。クリック位置を対応する元画像座標へ変換し、元画像から必要な1pixelだけを補間なしで取得します。座標入力や、矢印キーで1pixel、Shift＋矢印キーで10pixel移動する精密操作にも対応します。
HEX・RGB・HSLの違い
HEXはWeb制作で扱いやすい16進表記、RGBは赤・緑・青の光の強さ、HSLは色相・彩度・明度による表記です。本ツールでは同じCanvasの色から各形式を計算します。
色取得とブラウザの色管理
表示される色はブラウザが画像をデコードしてCanvasへ描画した結果です。ICC profileや画像形式、ブラウザの色管理により、別の画像編集アプリが示すraw値とわずかに異なる場合があります。
よくある質問
画像からHEXカラーコードを取得できますか？
できます。画像上の位置またはX・Y座標を選ぶと、6桁HEXとAlpha付きHEX8を表示します。
RGBやHSLも確認できますか？
できます。同じpixelをRGB・RGBA・HSL・HSLA形式でも表示します。
PNGの透明度も確認できますか？
できます。Alphaを0～255とパーセントで確認できます。
スマートフォンでも使えますか？
使えます。画像をタップして選択でき、X・Y座標の直接指定も利用できます。
画像はサーバーへ送信されますか？
送信・保存しません。画像のデコード、Canvas描画、色変換はブラウザ内だけで行います。
大きな画像でも使えますか？
ファイルは20MB以下、解像度は5000万pixels以下かつ各辺20000px以下です。
SVGを使えますか？
初版では対応していません。PNG・JPEG・WebPなどのラスター画像を使用してください。
縮小表示すると色が変わりませんか？
表示は縮小しますが、色取得は対応する元画像の1pixelを直接サンプリングします。
完全透明pixelのRGBも分かりますか？
Canvasのデコード結果に基づくため、元ファイル内部の不可視RGB値と一致しない場合があります。
Photoshop等と色が少し違う場合がありますか？
ICC profileやブラウザのデコード・色管理の違いにより、わずかに異なる場合があります。
選択履歴は保存されますか？
保存しません。現在のページ内だけで直近10件を保持し、再読み込みすると消えます。