使い方
- ファイルを選択を押すか、画像を枠にドロップします。Ctrl+V で貼り付けることもできます。
- 画像の見たい部分の上にポインターを動かします。拡大鏡がその周りの画素を示し、ポインターの下の色の欄が4つの表記で色を示します。
- サンプルの大きさを3 × 3か5 × 5にすると、1画素ではなく小さい範囲の平均を読めます。
- 画像をクリックして選んだ色に加え、HEX、RGB、HSL、Labのいずれかを押してコピーします。
1画素か平均か
写真にはノイズがあり、平らな面でも隣の画素はわずかに違うことがあるため、1画素だけではわずかにずれることがあります。ツールは、ポインターの周りの3 × 3か5 × 5の正方形の平均を取れます。1色の範囲では、平均のほうが1画素より安定した値になります。
4つの表記
HEX と RGB は、ウェブやデザインのソフトウェアで使われる一般的な表記です。HSL は色を色相、彩度、明度で表し、その色のより明るい色合いや暗い色合いを求めるときに役立ちます。Lab（CIE L*a*b*、sRGBが使う D65の白色点）は、目が色を見る方法に沿っています。Lab の等しい段階は、ほぼ等しく見えるため、2つの色を比べるのに役立ちます。CSS の lab() 関数は、代わりに D50の白色点を使うため、その数値はここと異なります。
画像は端末の中にとどまります
画像は、ブラウザの中で開かれ読み取られます。何もアップロードされず、選んだ色は保存されず、ページを離れると一覧は消えます。
例：純粋な赤
純粋な赤、#FF0000は、rgb(255, 0, 0)、hsl(0, 100%, 50%)、L*a*b* 53.2, 80.1, 67.2（D65）と読めます。ロゴの赤を読み取るには、サンプルの大きさを5 × 5画素にします。そうすれば、ノイズのある1画素で色が決まることはありません。
よくある質問
色を読み取るとき、画像はアップロードされますか？
いいえ。画像は、お使いの端末の中でブラウザが開いて読み取ります。どのサーバーにも送られず、保存した色も保存されません。ページを離れると消えます。
読み取り欄の色は、画面上の色と同じですか？
いつも同じとは限りません。読み取り欄は、画像の画素に保存された値を示します。画面、その調整、画像のカラープロファイルによって色の見え方は変わることがあるため、数値は画像自身の値で、画面の計測ではありません。
HEXとRGBの違いは何ですか？
同じ3つの値を書く2つの方法です。HEXは各値を0から255の範囲で16進数に書き、rgb(255, 128, 0) は #FF8000になります。RGBは同じ数を10進数で書きます。どちらもウェブやデザインのソフトウェアで使えます。
なぜツールはLabの値も示すのですか？
Labは、目で見たとおりに色を、明るさと2つの色の軸で表します。近い2つの色が、HEXやRGBでは大きく違う数値になることがあるのに比べ、Labのほうが2つの色が近いかどうかをよく示します。
非常に大きい画像は、なぜ少し違う読み取りになるのですか？
速さのため、色は最も長い辺が最大2048画素のコピーから読み取られます。大きな面の色は変わりませんが、巨大な写真の中の小さな1画素は、隣と平均されることがあります。
透明なPNGから色を読み取れますか？
はい。読み取り欄には、各画素に保存された色が示されます。透明さは読み取りに含まれません。透明な部分では、示される値は保存された色で、その後ろのページに見える色ではありません。
出典
- W3C（英語）: CSS Color Module Level 4、sRGB の色空間
- MDN（英語）: CanvasRenderingContext2D.getImageData()、キャンバスの画素を読む
- MDN（英語）: CSS の色の値、ウェブの表記
数値と文章の最終確認日：2026年11月10日火曜日。