画像の色を、調べる・取り出す
スポイトで色コード（HEX・RGB・HSL）を調べる｜表示を拡大して1ピクセルまで｜主な色をパレットで自動抽出｜コントラスト比の確認｜複数画像に対応｜画像は送信されません
1画像を読み込む（複数可・最大20枚）
ここに画像をドラッグ＆ドロップ
または ファイルを選択（PNG, JPG, WebP, GIF / 最大20枚まで・1枚30MBまで）
※ 読み込んだ画像はお使いの端末内だけで処理されます。外部へ送信・保存されることはありません。
2スポイトで、色を調べる
読み込んだ画像（クリックで、表示を切り替え）
選んだ色は、画像ごとに覚えます。パレットの設定は、すべての画像に共通です。
画像をクリックすると、その場所の色が、番号つきで一覧に追加されます。クリックしたまま動かすと、その番号の場所を調整できます（矢印キーで、1ピクセルずつ動かすこともできます）。
選んだ色の一覧
まだ、選んだ色がありません。画像をクリックしてください。
番号をクリックすると、その色に近い場所だけを、画像の上に示します。
3画像の主な色を、取り出す（パレット）
取り出せる色がありませんでした（透明な画像など）。
色をクリックすると、HEXの色コードをコピーします。数字は、その色が画像に占める割合の目安です。
4色コードを使う・保存する
タブ区切りなので、表計算ソフトにそのまま貼り付けられます。
※ 「オリジナルのままとする」で、パレット画像（PNG）を保存すると、元の画像と同じ名前になることがあります。保存先に元のファイルがあるときは、上書きに注意してください（ブラウザの設定によっては、「（1）」が付きます）。
画像の処理はすべてお使いのブラウザ内で行われ、サーバーへは送信されません。元のファイルは変更されません。
このツールでできること
画像の中の好きな場所の色を調べて、色コード（HEX・RGB・HSL）で取り出す、無料のスポイトツールです。画像の主な色を自動で取り出すカラーパレットの作成や、2色のコントラスト比の確認もできます。Webデザインの配色決め、ロゴや写真からの色の抜き出し、資料の配色合わせなどに便利です。登録やインストールは不要で、画像は外部へ送信されません。
- スポイトで色コードを調べる：画像をクリックするだけで、その場所の色を、HEX（#RRGGBB）・RGB・HSLで表示します。
- 1ピクセル単位の確認：「表示の大きさ」を最大800%まで拡大できるので、細い線や小さな文字の色も、ねらって調べられます。クリックした場所には番号がつき、色コードが一覧に残るので、マウスを動かしても、調べた色は変わりません。
- ノイズに強い読み取り：写真などの色のゆらぎを避けるため、まわり3×3・5×5・9×9ピクセルの平均で読み取ることもできます。
- 選んだ色の一覧：調べた色を、番号つきで並べます。画像の上にも、番号が表示されます。コードは、クリックでコピーできます。
- 近い色の場所を示す：選んだ色に近い部分だけを、画像の上に示せます。同じ色が、どこに使われているかを確認できます。
- パレットの自動抽出：画像に多く使われている色を、2〜16色まで取り出し、占める割合の目安も表示します。
- 書き出し：HEX・rgb()・hsl()・CSS変数・JSON・表（タブ区切り）で書き出し、コピーやテキスト保存ができます。パレット画像（PNG）も保存できます。
- コントラスト比のチェック：文字と背景の2色の、読みやすさ（WCAGの基準）を確認できます。
- 複数画像に対応：最大20枚まで読み込み、すべての画像のパレットをZIPでまとめて保存できます。
使い方
- 「画像を読み込む」の枠に、画像をドラッグ＆ドロップします。
- 調べたい場所を、クリックします。その場所の色が、番号つきで「選んだ色の一覧」に追加されます。クリックしたまま動かすと、その番号の場所を調整できます。
- 「選んだ色の一覧」で、色コードをクリックすると、コピーできます。
- 画像の主な色を知りたいときは、「パレット」の色の数を選びます。色をクリックすると、HEXの色コードをコピーできます。
- 「色コードを使う・保存する」で、CSS変数などの形式にして、コピー・保存します。
色コードの見方
| 表し方 | 例（鮮やかな青） | 説明 |
|---|---|---|
| HEX | #2563EB | 赤・緑・青の量を、16進数の2桁ずつで並べたもの。Webで、もっともよく使われます。 |
| RGB | rgb(37, 99, 235) | 赤・緑・青の量を、0〜255で表したもの。 |
| HSL | hsl(221, 83%, 53%) | 色合い（0〜360°）・鮮やかさ・明るさで表したもの。明るさだけを変えるときなどに便利です。 |
操作のコツ
- 画像をクリックしたあとは、矢印キーで、直前に追加した番号の場所を、1ピクセルずつ動かせます（Shiftで10ピクセル）。色コードも、動かした場所の色に変わります。
- 細かい場所を調べるときは、「表示の大きさ」を400%や800%にすると、ねらいやすくなります。
- 写真の色は、1ピクセルごとにゆらいでいます。「色を読み取る範囲」を平均にすると、見た目に近い色が得られます。
- 画像の背景が白や黒ばかりのときは、パレットの「白に近い色・黒に近い色は、のぞく」にチェックを入れると、主役の色が見つかりやすくなります。
- 文字と背景のコントラスト比は、通常の文字で4.5以上（AA）が、読みやすさの目安です。
よくある質問
画像の見た目と、調べた色が少し違うのですが。
このツールは、画像ファイルに記録されている色を、そのまま読み取ります。画面で見える色は、モニターの設定や明るさで変わるため、見た目と数値が違うように感じることがあります。また、JPEGなどの写真は、色が細かくゆらいでいるため、1ピクセルだけを読み取ると、まわりと少し違う色になることがあります。
パレットの色は、どう決めていますか？
画像を小さくして、似た色のグループに分け、それぞれの平均の色を求めています。実際に画像の中にある色に近い、代表的な色が得られますが、画像の中に、そのままの色があるとは限りません。「この色が、画像のどこにあるか」は、一覧の番号をクリックして確認できます。
透明な部分の色は、調べられますか？
完全に透明な部分には、色がないため、追加できません。半透明の部分は、画像に記録されている色を読み取ります。
画面の色を、直接調べられますか？
このツールで調べられるのは、読み込んだ画像の色です。画面に表示されているものは、スクリーンショットを撮って、その画像を読み込むと、調べられます。
保存されるファイル名は、どうなりますか？
初期設定では、元のファイル名に「_palette」が付きます（例：photo_palette.png）。「オリジナルのままとする」を選ぶと、付きません。拡張子は、書き出す形式に合わせて、自動で付きます。ZIPで、複数の画像をまとめたときは、同じ名前のファイルがあれば、自動で「-2」「-3」が付きます。
読み込める画像の大きさは？
1枚30MB、合計200MB、最大20枚まで、PNG・JPEG・WebP・GIFに対応しています。長辺が3000pxを超える画像は、3000pxに縮小して調べます。アニメーションGIFは、最初の1コマだけが対象です。
ほかの画像ツールも使いたいのですが。
画像の明るさや色合いを直すときは画像の明るさ・シャープ・色調補正ツール、特定の色を透明にするときは背景を透明にするツール、画像を小さくするときは画像リサイズツールが便利です。
