写真やスクリーンショット、ロゴの任意のピクセルの色を調べ、HEX・RGB・HSLのカラーコードを表示するツールです。拡大ルーペでスマホでもパソコンでも狙ったピクセルを選べます。さらに5〜12色のカラーパレットと、主要色・平均色も抽出します。画像はブラウザの外に出ません。
使い方
- 画像を開くか、カードにドロップ、またはCtrl+Vでスクリーンショットを貼り付けます。それまではサンプル画像が表示されます。
- 画像の上にポインターを動かすとルーペが表示され、クリックでそのピクセルの色を取得します。スマホでは画像に指を置いたまま、ルーペが目的のピクセルを示す位置まで滑らせて指を離します。
- HEX・RGB・HSLの行をタップすると色をコピーできます。最近取得した色は大きな色見本の横に並びます。
- パレットは自動で更新されます。色数（5〜12）と方式を選び、色見本をタップしてコピー、パレットをCSS・JSON・PNGで書き出せます。
- k-means法は似た色をまとめるため、自然なパレットになりやすい方式です。メディアンカットは色の範囲を均等に分け、小さなアクセントカラーも残します。
- 主要色はパレットの中でいちばん大きいグループの色です。平均色は見えているすべてのピクセルの平均なので、くすんだ色になることがよくあります。
- 大きな画像は色の取得用に長辺2400ピクセルへ縮小しますが、ベタ塗りの部分の色は正確なままです。完全に透明なピクセルは無視します。
- 画像はブラウザ内にとどまり、アップロードされません。
1ピクセル単位で色を取る
画像の上にポインタを合わせると拡大ルーペが出るので、クリックして色を取ります。タッチ画面では画像に指を置いたまま、ルーペに目的のピクセルが映るまで動かして指を離します。大きな画像は色選び用に長辺2400pxへ縮小するため、ロゴや画面のベタ塗りの色は正確に取れます。写真にはノイズがあり、空の隣り合うピクセルでも数値が少し違うことがあります。代表的な色を知りたいときはパレットが便利です。
パレットの作り方
k-meansは似た色をまとめる方法で、写真では最も自然なパレットになることが多いです。median cutは色の範囲を均等に分け、小さなアクセントカラーも残すので、イラストやブランド画像に向いています。各色には画像に占める割合も表示されます。
主要色は最も大きな色のグループです。平均色は見えているすべてのピクセルの平均なので、画像には実際に存在しないくすんだ色になることもあります。完全に透明なピクセルは無視します。
カラーコードの使い方
HEX（#1e88e5）はCSSやデザインツール、ブランドガイドで一般的な形式です。RGBは同じ色を赤・緑・青の0〜255で表し、HSLは色相・彩度・明度で表すため、明るい色や暗い色のバリエーションを作りやすくなります。パレットはCSS変数、JSON、PNGの色見本として書き出せます。
よくある質問
画像の中の色のカラーコードを調べるには？
画像を開き、ルーペを調べたい場所に合わせてクリックするか指を離します。見本の横にHEX・RGB・HSLのコードが表示され、タップでコピーできます。
スクリーンショットから色を取れますか？
取れます。Ctrl+Vでスクリーンショットを貼り付けるか、ファイルをドロップしてください。カメラのノイズがないので、スクリーンショットは色を取るのに最適です。
取った色がブランドカラーと少し違うのはなぜ？
JPEG圧縮やカメラの画像処理でピクセルの値がわずかに変わるためです。ロゴなら元のPNGやSVGを使うか、近くの数ピクセルを比べてください。
主要色と平均色の違いは？
主要色は似た色のピクセルが最も多く集まったグループです。平均色はすべてのピクセルを混ぜた色なので、赤と青の画像なら、どこにもない紫になることがあります。
パレットは何色まで作れますか？
5〜12色です。少なくすると全体の印象が、多くすると小さなアクセントカラーまで分かります。
画像はアップロードされますか？
いいえ。画像の読み込みと分析はブラウザ内で行われ、どこにも送信されません。