画像から色を抽出（オンラインスポイト）

画像カラーコード抽出の使い方

1. 色を調べたい画像をドラッグ＆ドロップするか、クリックして選択します。スクリーンショットはCtrl+Vでそのまま貼り付けることもできます。
2. 画像の上でマウスを動かすと、カーソル位置の色がリアルタイムで表示されます。好きな位置をクリックすると色が確定し、履歴に追加されます。
3. HEX・RGB・HSLのボタンを押すと、その形式のカラーコードがコピーされます。
4. 下の代表色で、画像全体の主な色とそれぞれが占める割合を確認できます。

写真からカラーコードを調べる仕組み

デジタル画像は小さな点（ピクセル）の集まりで、各ピクセルは赤（R）・緑（G）・青（B）の3色の光の強さを0～255の数値で持っています。このツールはクリックした位置のピクセルのRGB値をそのまま読み取り、次の形式で表示します。

写真では同じ物体でも、光の当たり方や圧縮の影響でピクセルごとに色が少しずつ異なります。ロゴのように正確な色が必要な場合は、できるだけ広く均一に塗られた部分を選んでください。CMYKなど別の形式に変換したいときはカラーコード変換をご利用ください。

画像の代表色（パレット）を抽出する仕組み

代表色は、画像全体から均等に取り出した数千個のピクセルを、似た色どうしでグループ分けするk平均法（k-means）クラスタリングで計算しています。グループごとに平均色を求め、そのグループが画像内で占める割合の大きい順に表示します。透明な部分は計算から除外されます。

代表色は、Webサイトやプレゼン資料の配色を決めるときのよい出発点になります。割合が最も大きい色を背景色に、2番目・3番目の色をアクセントカラーに使うと、写真になじむデザインに仕上げやすくなります。色の数を増やすと、より細かな色まで分かれて表示されます。

スクリーンショットでWebサイトやアプリの色を調べる

1. 色を調べたい画面で、WindowsはWin + Shift + S、MacはCmd + Shift + 4で範囲を指定してキャプチャします。
2. このページに戻ってCtrl + V（MacはCmd + V）を押すと、キャプチャ画像がすぐに表示されます。
3. 調べたいボタンや文字の上をクリックして、カラーコードをコピーします。

モニターの色設定やダークモード、ブラウザの拡大率によって、キャプチャした色が元のデザインの値とわずかに異なることがあります。ブランドカラーのように正確な値が必要な場合は、元のデザインデータや公式のガイドラインを確認してください。

正確に色を拾うためのコツ

• 境目を避ける：文字や図形のふちはアンチエイリアス（なめらか処理）で中間色になっているため、塗りの中央付近をクリックします。
• PNGを使う：JPGは圧縮で色がにじみやすいので、元データがPNGならそちらを読み込むと誤差が減ります。
• 何か所か比べる：写真の場合は近くの数か所をクリックし、履歴に並んだ色を見比べてイメージに近いものを選びましょう。