色を拾う

画像カラーピッカー

画素をクリックして HEX を取得、または画像の主要色をパレットとしてまとめて取得。

色を拾う

☞ すべてブラウザ内で処理 — アップロードは一切ありません

画像をここにドロップ

クリックして選択も可 —— PNG・JPG・WebP・GIF

色の読み方は 2 通り

その 1 画素か、画像全体の色か

1 画素を指すことと 1 枚の絵を指すことは別の問いです。スポイトは前者に答えます。クリックした場所の値を、丸めも平均もせずに、CSS 用の HEX、デザインツール用の RGB、色相や明度を少し動かしたいときの HSL で同時に返します。ボタンを押したままドラッグすれば読み取りがポインタに追従するので、2 画素幅の線を一発で当てるより楽です。

パレットは後者に答えます。すべての画素をいくつかの代表色に振り分け、その色が画像のどれだけを占めるかを添えて並べます。つまり並び順は「この絵が実際に何でできているか」であって、どれが目立つかではありません。代表色は見た目に近いものの、画素単位で必ず存在するとは限りません。だから文字どおりの値が要るときのためにスポイトが残してあります。

3 ステップ

画像から色を取り出す手順

01

画像をドロップ

PNG・JPG・WebP・GIF をブラウザ内で直接読み込みます。ブランドページのスクリーンショットも未公開の写真も端末から出ません。

02

クリックして 1 色を取る

HEX・RGB・HSL が同時に表示されます。コピーで HEX がクリップボードに入ります。狙う場所が小さいときはボタンを押したままドラッグしてください。

03

あるいはパレットごと取る

色数を選ぶと、画像がその数の色にまとめられ、占める割合の順に並びます。色見本をクリックすれば 1 色、まとめてコピーすれば全部です。

早わかり

画像カラーピッカーのよくある質問

拾った色はその画素の正確な値ですか?

はい。色を拾うあいだ画像は元の解像度のままなので、プレビューが縮小して混ぜた色ではなくファイルに入っている値が得られます。ブラウザのキャンバス上限を超える巨大な画像だけは先に縮小されます。

色見本の横のパーセントは何ですか?

その色が画像に占める割合です。すべての画素を最も近い色見本に割り当てて数えているので、並び順は実際の面積順です。小さく明るい差し色が背景を上回ることはありません。

パレットの色が見た目と少し違うのはなぜ?

パレットの色は似た画素のまとまりを代表する平均値なので、画像の中にそのまま存在するとは限りません。ある一点の文字どおりの値が必要なときはスポイトでクリックしてください。

透過 PNG はどうなりますか?

透明な画素はパレットから除かれます。除かないと、透過背景のロゴがほぼ白として返ってきます —— それは背後のキャンバスの色で、あなたの画像には存在しません。

対応形式は?

PNG・JPG・WebP・GIF、25 MB まで。アニメーション GIF は 1 コマ目として読み込みます。iPhone の HEIC は非対応なので、変換してからお使いください。

パレットをまとめてコピーできますか?

できます。「すべてコピー」で HEX が 1 行に 1 つずつクリップボードに入り、スタイルシートやデザインファイル、メッセージにそのまま貼れます。

キーボードだけで使えますか?

画素を拾うにはポインタが必要ですが、パレットの色見本はボタンです。Tab で移動して Enter を押せば色値をコピーできるので、画像の主要色はマウスなしでも取得できます。

画像はアップロードされますか?

いいえ。画像はブラウザ内でデコードして集計するだけで、どこにも送信しません。このツールに画像を受け取るサーバーはありません。

無料ですか?

はい —— 無料、透かしなし、登録も不要です。