解析用の画像を扱いやすいサイズに縮小し、近いRGB値のピクセルを5つのグループに分け、最大グループの中心色を返します。透明なピクセルは対象外です。写真では、圧縮やわずかな陰影によって似た色が何千色も生まれるため、ピクセルの完全一致を数えるより実用的な結果になります。
画像からメインカラーを抽出
すべてブラウザー内で動作します。アップロードも登録も不要です。
画像からメインカラーを抽出するには？
画像を解析し、見えている面積が最も大きい色を抽出します。写真、ロゴ、スクリーンショットを追加すると、代表色をHEX、RGB、HSLで確認できます。処理はブラウザ内で完結するため、元のファイルが外部へ送信されることはありません。
使い方
- 1画像を選ぶ. 対応する画像をドロップするか端末から選択し、必要なら用意されたサンプルを読み込みます。
- 2結果を確認する. 画像がサンプリングされ、メインカラーと推定カバー率が表示されます。
- 3色の値をコピーする. 必要なHEX、RGB、HSLの横にあるコピーボタンを押します。
こんな方に
- ブランドデザイナーは、ロゴ、商品写真、キャンペーン画像から代表的な色を取り出せます。
- Web開発者は、ヒーロー画像に合うCSSカラーを取得し、背景やプレースホルダーに使えます。
- コンテンツ制作者は、サムネイル、SNS画像、動画の静止画から主な色調を確認できます。
- 写真家は、編集した複数の写真で色の比重を比較できます。
よくある質問
画像はサーバーにアップロードされますか？
いいえ。選択したファイルはブラウザで読み込まれ、Canvasに縮小した作業用画像を描いてローカルで解析します。画像ファイルやピクセルデータがサーバーへ送信されることはありません。
メインカラー抽出は無料ですか？
はい。アカウント登録やソフトのインストールなしで画像を解析し、結果をコピーできます。画像ごとの回数制限や透かしもありません。
どの画像形式を使えますか？
ブラウザが読み込めるPNG、JPG、WebP、GIF、AVIF、BMPに対応します。アニメーション画像では、読み込み時にブラウザが描画したフレームが解析されます。同じ結果を再現したい場合は静止画を使用してください。
メインカラーはどのように計算されますか？
画像を縮小し、透明なピクセルを除外して、残りのRGB値を決定的なk-means法でグループ化します。最大のグループをメインカラーとみなし、その赤、緑、青チャンネルの平均値から表示色を求めます。
別のツールと結果が違うのはなぜですか？
メインカラーはファイルに保存された属性ではなく推定値です。完全一致のヒストグラム、メディアンカット、k-means法、サンプル数、透明部分の扱いが違えば結果も変わります。切り抜く範囲や背景の広さにも左右されます。
カラーパレット全体も抽出できますか？
いいえ。このページは1つの問いに答えるため、メインカラーを1色だけ返します。複数の代表グループを残すパレット抽出とは目的が異なります。