色を拾う
☞ すべてブラウザ内で処理 — アップロードは一切ありません画像をここにドロップ
クリックして選択も可 —— PNG・JPG・WebP・GIF
画像上をクリックまたはドラッグして色を拾います
色を拾う
画素をクリックして HEX を取得、または画像の主要色をパレットとしてまとめて取得。
クリックして選択も可 —— PNG・JPG・WebP・GIF
画像上をクリックまたはドラッグして色を拾います
色の読み方は 2 通り
1 画素を指すことと 1 枚の絵を指すことは別の問いです。スポイトは前者に答えます。クリックした場所の値を、丸めも平均もせずに、CSS 用の HEX、デザインツール用の RGB、色相や明度を少し動かしたいときの HSL で同時に返します。ボタンを押したままドラッグすれば読み取りがポインタに追従するので、2 画素幅の線を一発で当てるより楽です。
パレットは後者に答えます。すべての画素をいくつかの代表色に振り分け、その色が画像のどれだけを占めるかを添えて並べます。つまり並び順は「この絵が実際に何でできているか」であって、どれが目立つかではありません。代表色は見た目に近いものの、画素単位で必ず存在するとは限りません。だから文字どおりの値が要るときのためにスポイトが残してあります。
3 ステップ
PNG・JPG・WebP・GIF をブラウザ内で直接読み込みます。ブランドページのスクリーンショットも未公開の写真も端末から出ません。
HEX・RGB・HSL が同時に表示されます。コピーで HEX がクリップボードに入ります。狙う場所が小さいときはボタンを押したままドラッグしてください。
色数を選ぶと、画像がその数の色にまとめられ、占める割合の順に並びます。色見本をクリックすれば 1 色、まとめてコピーすれば全部です。
早わかり
はい。色を拾うあいだ画像は元の解像度のままなので、プレビューが縮小して混ぜた色ではなくファイルに入っている値が得られます。ブラウザのキャンバス上限を超える巨大な画像だけは先に縮小されます。
その色が画像に占める割合です。すべての画素を最も近い色見本に割り当てて数えているので、並び順は実際の面積順です。小さく明るい差し色が背景を上回ることはありません。
パレットの色は似た画素のまとまりを代表する平均値なので、画像の中にそのまま存在するとは限りません。ある一点の文字どおりの値が必要なときはスポイトでクリックしてください。
透明な画素はパレットから除かれます。除かないと、透過背景のロゴがほぼ白として返ってきます —— それは背後のキャンバスの色で、あなたの画像には存在しません。
PNG・JPG・WebP・GIF、25 MB まで。アニメーション GIF は 1 コマ目として読み込みます。iPhone の HEIC は非対応なので、変換してからお使いください。
できます。「すべてコピー」で HEX が 1 行に 1 つずつクリップボードに入り、スタイルシートやデザインファイル、メッセージにそのまま貼れます。
画素を拾うにはポインタが必要ですが、パレットの色見本はボタンです。Tab で移動して Enter を押せば色値をコピーできるので、画像の主要色はマウスなしでも取得できます。
いいえ。画像はブラウザ内でデコードして集計するだけで、どこにも送信しません。このツールに画像を受け取るサーバーはありません。
はい —— 無料、透かしなし、登録も不要です。