256 Tools

画像配色抽出 — アップロード不要で主要色（HEX/RGB）と占有率を抽出

ここに画像をドラッグ＆ドロップ、またはクリックして選択

PNG / JPEG / WebP / GIF に対応

画像はアップロードされません。すべて端末のブラウザ内で処理します。

関連する外部ツール

一部のリンクはアフィリエイトリンクを含みます。

Adobe Creative Cloudクリエイティブ統合ツールCanvaかんたんデザイン作成

関連ツール

カラーコード変換HEX・RGB・HSL・HSV・RGBA を一画面で相互変換。どれか1つを直すと全部追従、ワンクリックコピー・透過・WCAGコントラスト対応。配色ジェネレーターベース色から補色・類似色・トライアドなど色彩理論に基づく調和したカラーパレットを自動生成。色をロックして再生成、CSS変数・Tailwind・JSONに書き出し。グラデーションジェネレーターlinear・radial・conic の CSS グラデーションを複数カラーストップで作成。角度・形状・中心を調整し、background CSS や Tailwind 値をワンクリックでコピー。フォントペアリングツールGoogle Fonts の見出し×本文フォント組み合わせをリアルタイムでプレビュー。CSSを1クリックでコピー。

この無料の画像配色抽出ツールは、写真・イラスト・スクリーンショットから主要色（ドミナントカラー）のパレットを端末内だけで取り出します。画像はどこにもアップロードされません。PNG / JPEG / WebP / GIF をドロップするだけで、median cut（メディアンカット）量子化アルゴリズムにより代表色が自動で抽出され、各色の HEX コード・RGB 値・画像内の占有率（%）が一覧で表示されます。抽出する色数（2〜12）は自由に変えられ、各 HEX はワンクリックでコピー可能。パレット全体を CSS 変数や JSON に書き出してそのままコードに貼り付けることもできます。「1ピクセルだけ拾うスポイト」とは異なり、画像全体の配色（メインカラー・アクセントカラー）を取り出すのが本ツールの特長です。

使い方

  1. 上のエリアに画像をドラッグ＆ドロップ、またはクリックしてファイルを選びます（PNG / JPEG / WebP / GIF 対応）。
  2. 主要色のパレットが自動で表示されます。各スウォッチに HEX コード・RGB 値・画像内の占有率（%）が出ます。
  3. スライダーで抽出色数（2〜12）を変えると、その場でパレットが更新されます（再読み込み不要）。
  4. 各スウォッチまたはコピーボタンで HEX をコピー。「全 HEX を一括コピー」で全色をまとめてコピーできます。
  5. 「書き出し」タブで CSS 変数または JSON を生成し、コピーまたはダウンロードできます。
  6. インストール・登録不要。画像はブラウザ外に出ません。

機能と仕組み

ドミナントカラー（主要色）の抽出

1ピクセルを拾うスポイトではなく、画像全体を median cut（メディアンカット）という色量子化アルゴリズムで解析します。似た色をクラスタにまとめて代表色を決めることで、画像全体の配色（メインカラー・アクセントカラー）が取り出せます。処理を高速化するため、画像は解析前に小さくサンプリング（長辺最大 160px）してから量子化を行います。

各色の HEX / RGB と占有率（%）

各代表色の HEX コード（#RRGGBB・大文字）・RGB 値・画像内の占有率（%）を表示します。占有率は「解析対象ピクセル全体のうち、その色クラスタに属するピクセルの割合」です。占有率降順に並ぶため、最も画面を占めるメインカラーが先頭に来ます。なお占有率は縮小サンプリングと色量子化に基づく概算であり、各色を独立に丸めるため合計が 100.0% にならないことがあります。

抽出する色数の指定

スライダーで 2〜12 色の範囲で抽出色数を選べます。シンプルな配色なら少なく、複雑な写真なら多めに設定すると細かいニュアンスまで取り出せます。色数を変えても画像の再デコードは不要で、縮小済みピクセルを再利用して即時更新されます。

コピーと書き出し（CSS 変数 / JSON）

各スウォッチのコピーボタンで HEX を1クリックコピー、「全 HEX を一括コピー」で全色をまとめてコピーできます。書き出しパネルでは CSS 変数（`:root { --color-1: #...; }`）または JSON（HEX・RGB 配列・占有率を含む）を生成してコピー・ダウンロードできます。色値は CSS 互換のロケール整形なし（大文字 HEX・ピリオドの小数）で出力します。

ブラウザ内処理＝アップロードしない

画像の読み込み・縮小・量子化はすべてブラウザの Canvas API を使って端末内で完結します。画像はサーバーに送信されず、保存・共有もされません。外部サービスに画像を送りたくない方にとって最大の安心ポイントです。

活用例

参考画像・写真から配色を作る

気に入った写真・イラスト・既存サイトのスクリーンショットをドロップすると、メインカラー・アクセントカラーの候補が一覧で出ます。デザインの土台にする配色を素早く決められます。

ロゴ・ブランド素材からブランドカラーを把握

ロゴやブランド素材をドロップして正確な HEX コードを取り出せます。Webサイト・資料・SNS バナーで色を揃えるのに役立ちます。

CSS 変数 / JSON でコードに使う

抽出パレットを CSS 変数（`--color-1: ...`）や JSON に書き出してそのままコードに貼り付けられます。占有率を見れば「主役の色／差し色」の役割も決めやすくなります。

抽出の注意点

  • 抽出色・占有率は概算：高速化のため画像を縮小してから解析し、似た色をまとめているため、厳密なピクセル単位の色・割合とは一致しない場合があります。目安として使ってください。
  • 占有率の合計は 100% にならないことがあります：各色を独立に小数第1位へ四捨五入するため。無理に補正していない正直な値です。
  • 要求した色数より少ない場合があります：単色やベタ塗りなど固有色が少ない画像では、抽出できた色数だけを返します。偽の色で水増ししません。
  • 透明部分は除外：透過 PNG の透明ピクセル（α値 128 未満）は集計から除きます。完全に透明な画像は抽出できません。
  • GIF アニメーション：先頭フレームだけを静止画として解析します。

よくある質問

画像はサーバーにアップロードされますか？
いいえ。すべて端末のブラウザ内（Canvas API）で処理します。画像は送信・保存されません。これがこのツールの最大の特長です。
スポイトではなく配色全体（パレット）を取り出せますか？
はい。本ツールは画像全体から主要色（ドミナントカラー）をパレットとして抽出するのが主機能です。1ピクセルを拾う補助機能とは異なります。
占有率（%）は正確ですか？
概算です。高速化のため縮小サンプリングと色量子化を行っているため、厳密なピクセル割合とは一致しない場合があります。主要色の傾向を見る目安としてお使いください。
何色まで抽出できますか？
2〜12色の範囲でスライダーで選べます。画像の固有色が少ない場合はその数だけ返します。偽の色を水増ししません。
対応している画像形式は？
PNG / JPEG / WebP / GIF（先頭フレーム）です。SVG・HEIC などは対象外です。
抽出した色をコードに使えますか？
はい。HEX のワンクリックコピー、全色一括コピー、CSS 変数／JSON の書き出しに対応しています。そのままコードに貼り付けられます。
透過 PNG はどうなりますか？
透明部分（α値 128 未満）は集計から除外するため、透明部分が黒や白として混ざりません。完全に透明な画像は色を抽出できません。

広告と解析のために Cookie を使用します。