カラーパレット抽出ツール

画像からカラーパレットを抽出

写真をアップロードして主要な色を抽出し、正確なピクセルを選んで、すぐに使えるコードを書き出せます。

ここに画像をドロップ

またはクリックしてファイルを選択

PNG・JPG・WebP形式、50MBまで対応

共有

カラーパレット抽出ツールについて

このツールは画像のピクセルを解析し、古典的な減色アルゴリズムでも使われるメディアンカット量子化という手法で、少数の代表的な色にグループ化します。パレットのサイズを選び、任意のスウォッチのカラーコードをコピーするか、スポイトで写真の正確なピクセルを取得できます。

機能:

  • 4・6・8色から選べるメディアンカット抽出
  • 画像の正確なピクセルを取得できるスポイトツール
  • カラーコードとRGB値をワンクリックでコピー
  • CSS変数・JSON・Tailwind設定として書き出し可能

カラーパレットの抽出方法

  1. 画像(PNG・JPG・WebP)をアップロードまたはドラッグ&ドロップ
  2. パレットサイズを選択(4・6・8色)
  3. スウォッチをクリックしてカラーコードをコピー、または画像をクリックして正確なピクセルを取得
  4. プロジェクト用にCSS・JSON・Tailwindのコードをコピー

よくある質問

カラーパレット抽出ツールはどのように動作しますか?

画像を縮小してピクセルの色を読み取り、メディアンカット量子化によって似た色同士をグループ化します。各グループは平均化されて1つの代表的なスウォッチになり、画像内で占める割合の大きい順に並べ替えられます。

アップロードできる画像サイズに制限はありますか?

50MBまでの画像に対応しています。非常に大きな画像は解析のために自動的に縮小されるため、元の解像度に関わらず抽出処理は高速です。

スポイトツールは何のためにありますか?

アップロードした画像の任意の場所をクリックすると、自動抽出されたパレットとは別に、そのピクセルの正確な色を取得できます。この方法で最大6色まで選択できます。

抽出された色が写真で見た色と正確に一致しないのはなぜですか?

パレットは似たピクセルのグループを平均化して作成されるため、微妙なグラデーションや陰影は個々の色ではなく少数の代表的なスウォッチに均されます。正確なピクセルの色が必要な場合はスポイトツールをご利用ください。

画像をアップロードするとどこかに送信されますか?

いいえ。デコード・縮小・色解析まで、すべての処理はブラウザ内でローカルに行われます。画像がアップロードされたり保存されたりすることはありません。

抽出したパレットを自分のウェブサイトやデザインツールで使うにはどうすればよいですか?

書き出しパネルを使って、パレットをCSSカスタムプロパティ、カラーコードのJSON配列、またはそのまま貼り付けられるTailwind設定としてコピーし、プロジェクトに直接組み込めます。

プライバシー

画像はブラウザ内でcanvasのピクセルデータとして処理され、サーバーにアップロードされることはありません。

参考資料・技術仕様

最終更新日: 2026-07-22