画像からカラーコード抽出
写真の好きなピクセルをクリックすると色を読み取れます。たとえばRGB 11, 122, 106はHEXで#0B7A6Aで、主要な6色もあわせて表示します。画像はブラウザの外に出ません。
使い方
- 端末から画像を選ぶか、「サンプル画像を使う」で試します。
- 画像の好きな場所をクリックまたはタップすると、その1ピクセルの色が分かります。パソコンでは矢印キーで1ピクセルずつ、Shiftを押しながらなら10ピクセルずつ位置を動かせます。
- HEX・RGB・HSLの値をコピーするか、パレットの色見本を押して代表色6色のどれかを読み込みます。
計算方法
画像をブラウザ内の見えないキャンバスに描き、ポインターの下にあるピクセルを、赤・緑・青の0〜255の値として読み取ります。HEXは同じ3つの数字を16進数で書いたもので、11、122、106なら#0B7A6Aになります。
HSLは同じ色を、色相(0〜360度)、彩度、明度(いずれも%)で表します。色の印象を変えずに、明るくしたり暗くしたり、鮮やかさを抑えたりするのに便利です。
パレットは、メディアンカットに似た箱分割で作ります。最初はすべてのピクセルを1つの箱に入れ、値の幅が最も広い箱を、その最も広いチャンネルの中央で分割する処理を、箱が6つになるまで繰り返します。各色見本は箱ごとの平均色で、画像に占める面積の大きい順に並びます。大きな写真は間引いて読み取り、透明なピクセルは無視します。
よくある質問
画像はどこかにアップロードされますか?
いいえ。ファイルはブラウザの機能で開き、端末内のキャンバスに描画するだけです。アップロードも保存もしません。
デザインソフトで見る色と値が違うのはなぜ?
このツールは、ブラウザが復号したピクセル値を読んでいます。Display P3などのカラープロファイルが埋め込まれた画像や、JPEGで圧縮された画像は、元のデザインファイルと少しずれることがあります。正確な値が必要なときは、PNGから取得してください。
クリックした位置と少しずれるのはなぜ?
大きな画像は、ページに収まるように縮小して表示します。そのため画面の1ピクセルが元画像の複数ピクセルに当たることがあります。取得する色は、画面に表示している縮小コピーのものです。
Webページや画面の色を直接取れますか?
先にスクリーンショットを撮り、その画像をここで開いてください。ブラウザのページから、ほかのタブやアプリのピクセルは読み取れません。