このツールについて
写真、スクリーンショット、デザインの特定位置から色を取得します。プレビュー上の位置を向き補正後の元画像のピクセルに対応させ、カラーコード、透明度、座標を表示します。
使い方
- 画像を選択するか、ドラッグしてください。
- プレビューをクリック・タッチ・ドラッグして、現在のピクセルを結果欄で確認してください。
- 拡大鏡で周囲のピクセルを確認し、X・Y 座標と Alpha を確認してください。
- 必要な HEX、RGB、HSL をコピーできます。最近選んだ色から HEX をコピーすることもできます。
対応形式
- PNG、JPG/JPEG、静止画 WebP に対応します。画像は 1 回に 1 枚ずつ選択またはドラッグしてください。
- 最大 100 MiB・4000 万ピクセル、各辺 16384 ピクセルまでです。大きな画像は多くのメモリーを使うため、端末の性能に合った画像を選んでください。
結果の見方
- HEX、RGB、HSL は、デコード後の同じピクセルの色を表します。Alpha は透明度を別に表し、範囲は 0～255 です。
- 座標は左上の (0, 0) から始まり、向き補正後の元画像の幅と高さを基準とします。画面上のプレビューサイズではありません。
- 元画像のピクセルを直接読み取り、主色分析用の縮小サンプルは使いません。プレビューの倍率や端末のピクセル比が変わっても、対応する元画像の座標は変わりません。
- 完全に透明なピクセルは透明と明示します。その RGB 値は見える色を表しません。最近選んだ色は現在のページにのみ保持します。
元画像の色を正確に確認
- 拡大鏡で現在位置の周囲の元ピクセルを表示し、隣接する色を見分けられます。画像の端では有効範囲だけを表示します。
- ブラウザーがカラープロファイルを変換する場合があるため、結果は現在のブラウザーでデコードされたピクセル値です。表示機器によって見え方が異なることがあります。
プライバシー
画像はお使いのブラウザー内だけで処理され、サーバーにはアップロードされません。
入力や結果を自動保存しません。クリアしたりページを離れたりする前に、必要な内容をコピーまたはダウンロードし、元画像も残してください。
よくある質問
画像から HEX カラーを取得するには？
画像を選択し、目的の位置をクリックまたはタッチして、結果の「HEX をコピー」を押してください。拡大鏡と座標でピクセルを確認できます。
HEX、RGB、HSL の違いは？
色の表し方が異なります。HEX は 16 進数、RGB は赤・緑・青の値、HSL は色相・彩度・明度を使用します。ここでは 3 種類を併記します。
透明なピクセルに Alpha があるのはなぜですか？
Alpha は不透明度を示し、0 は完全に透明、255 は完全に不透明です。透明画像の見え方を理解するには、カラーコードと Alpha を合わせて確認します。
縮小プレビューでも正確に色を取得できますか？
プレビューの位置を向き補正後の元画像に対応させ、そのピクセルを読み取ります。縮小で混ざった色は使いません。拡大鏡と座標で確認できます。