画像から配色抽出

主要色パレットをHEXで取り出す
画像をタップして選択(ドラッグ&ドロップも可)
JPEG・PNG・WebP など / 画像は端末内で処理されます
読み込んだ画像

画像から配色抽出とは

写真やイラストをアップロードすると、その画像に多く含まれる主要な色を解析して、カラーパレット(HEX)を取り出せる無料ツールです。デザインの配色を決めるときの参考や、写真に合わせたテーマカラー選び、ムードボード作りなどに使えます。画像はブラウザ内だけで処理され、どこにも送信されません。

使い方

  1. 画像を選ぶ(ドラッグ&ドロップも可)
  2. 抽出する色数を選ぶ
  3. 色をタップしてHEXをコピー、またはCSS変数を出力する

抽出の仕組み

画像を縮小してから全体のピクセルの色を集め、メディアンカット法で色の空間を分割し、代表色を求めています。写真では、背景・被写体・光などの主要な色が抽出されます。抽出数を増やすと中間色まで細かく、減らすと大きな色の傾向がつかめます。単色に近い画像やベタ塗りのイラストでは、指定した数より少ない色数になることがあります。

よくある質問

画像はアップロードされますか?
いいえ。選んだ画像はお使いのブラウザ内だけで読み込まれ、サーバーには送信されません。
思った色が出ません
面積の大きい色が優先されます。抽出数を増やすと、少ない面積の色も出やすくなります。
CSSにそのまま使えますか?
「CSS変数を表示」で --color-1 のような形式が出力されます。名前は用途に合わせて調整してください。

無料・インストール不要のブラウザツール / 画像から配色抽出