画像から色を抽出・スポイト
画像から主要な色を2〜16色取り出し、割合つきでカラーコードを表示します。画像をクリックしてその点の色を取るスポイトや、画面上の色を取るEyeDropperも使えます。
ここに画像をドロップするか、貼り付け（Ctrl+V / ⌘+V）してください。
画像はアップロードされず、この端末の中だけで解析します。
画像を読み込むと、主要な色を取り出します。
画像（クリックでその点の色を取得）
取得した色
—
- HEX —
- RGB —
- HSL —
主要な色（多い順）
補足
- 画像はアップロードされません。読み込みも解析もこの端末の中だけで行います。
- 主要な色は、median cut で代表色を決めてから k-means で整えて求めます。乱数を使わないので、同じ画像と色数なら結果は毎回同じです。
- 計算は長辺400pxに縮めた画像で行い、透明な部分（不透明度50%未満）は数えません。割合は目安です。
- クリックでの取得は、表示している画像の画素の色をそのまま返します（長辺4096pxを超える画像は縮めて表示するため、細かい部分は周りの色と混ざります）。
- 「画面から色を取る」は EyeDropper API を使います。パソコン版の Chrome・Edge などが対応しており、Safari・Firefox では使えません。
よくある質問
画像はサーバーへアップロードされますか？
されません。画像はブラウザの中で読み込み、この端末の中で色を数えます。
主要な色はどうやって決めていますか？
median cut で代表色を決め、k-means で整えて求めます。乱数を使わないため、同じ画像と色数なら結果は毎回同じです。計算は長辺400pxに縮めた画像で行い、透明な部分は数えないので、割合は目安です。
画面上の好きな場所の色を取れますか？
EyeDropper API に対応したブラウザ（パソコン版の Chrome・Edge など）なら取れます。Safari や Firefox は対応していないため、ボタンが押せない状態になり、理由を表示します。読み込んだ画像をクリックして色を取る方法は、どのブラウザでも使えます。
抽出した色をまとめてコピーできますか？
できます。HEX を 1 行に 1 色、CSS カスタムプロパティ（--color-1 など）、JSON 配列のいずれかの形でまとめてコピーできます。1 色ずつのコピーもできます。