画像カラーパレット抽出
画像をアップロードすると、使われている主要な色を自動で抽出してカラーパレットを作ります。色の数（4/6/8色）を選び、HEX・RGBコードをワンクリックでコピー可能。処理はすべてブラウザ内で完結します。
パレットを抽出したい画像をドロップ
クリックまたはドラッグ&ドロップ (PNG / JPG / WebP / GIF)
使い方
- 1
画像をドロップ
パレットを取りたい画像をドロップまたはクリックで選択します。
- 2
色の数を選ぶ
4色・6色・8色からパレットの色数を選ぶと、主要な色が多い順に並びます。
- 3
コードをコピー
スウォッチをクリックするとHEXコードがコピーされ、デザインやメモに貼り付けられます。
このツールの特長
- 画像から主要な色を自動抽出（4/6/8色から選択）
- HEX・RGBコードを表示し、クリック1つでコピー
- 使用頻度の多い色から順にパレットを表示
- すべてブラウザ内で完結、画像は送信しない
こんな場面で便利
Webサイトの配色づくり
参考画像や写真から色を拾い、サイトやバナーの配色のベースにする。
写真のトーン再現
好きな写真の色味を抽出して、画像編集や動画のカラーグレーディングの目安にする。
スクショから色を確認
スクリーンショットから使われているブランドカラーやUIの色をすばやく調べる。
詳しい説明
画像を小さく縮小したうえでピクセル色の出現頻度を集計し、近い色をまとめて平均した代表色を、多い順に抽出します。写真なら空・肌・植物といった画面内の主要な色味を、スクリーンショットならUIに使われているブランドカラーを、手軽に拾い出せます。
抽出した色は、Webサイトやバナーの配色づくり、写真のカラーグレーディングの再現、イラストの共通色の確認などに活用できます。コントラストチェッカーと組み合わせれば、抽出した色どうしの見やすさ（WCAG適合）も確認できます。
画像データはブラウザ内でのみ処理され、サーバーへ送信されることはありません。元画像の細かい色まですべて拾い上げるものではなく、主要色の目安を得るためのツールとしてお使いください。
よくある質問
どんな仕組みで色を抽出していますか？
画像を小さく縮小したうえでピクセル色の出現頻度を集計し、近い色をまとめて平均した代表色を、多い順に表示します。
抽出される色の順番は決まっていますか？
画像内で使われている面積・頻度が多い色から順に並びます。背景の面積が広い画像では、その背景色が先頭に来ます。
元の画像のすべての色が取れますか？
いいえ。本ツールは主要色の目安を抽出するものです。細かい色まで正確に拾うには、画像編集ソフトのスポイトをご利用ください。
画像はサーバーに送信されますか？
いいえ。抽出処理はすべてブラウザ内で完結し、アップロードした画像が外部へ送信されることはありません。
関連ガイド
ガイド配色の決め方｜補色・類似色・トライアドの基本と選び方
配色の決め方を色相環ベースで解説します。補色・類似色・トライアド・モノクロームの4つの組み合わせと色相の角度、60-30-10ルール、文字と背景のコントラストの考え方を、Webサイトや資料の例つきで初心者向けにまとめました。
ガイド画像からカラーパレットを作る方法｜写真の色をそのまま配色に活かす
画像からカラーパレットを作る方法を解説します。好きな写真やスクリーンショットから主要な色（ドミナントカラー）を抽出して、Webサイトやバナーの配色づくりに活かす手順を、色数の選び方と失敗しないコツとあわせて初心者向けにまとめます。ブラウザで使える無料ツールも紹介します。
関連ツール
カラーパレット生成
ベースの色から補色・類似色・トライアド・モノクロームの配色を生成。HEX・RGB・HSLコードをコピーしてデザインに使えます。
コントラストチェッカー
文字の色と背景の色のコントラスト比を計算し、WCAGの達成基準（AA・AAA）との適合を即座に判定します。読みやすい配色づくりの確認に役立ちます。
色変換
HEX・RGB・HSL形式の相互変換。カラーピッカーから直接選択もできます。
画像圧縮
画像ファイルのサイズを簡単に圧縮。圧縮後の見た目と容量を確認しながら、WebサイトやSNS投稿向けに調整できます。
すべての処理はブラウザ内で実行されます。ファイルがアップロードされることはありません。
検証: 2色画像からの抽出結果・色数変更・HEXコピー・ENページを自動テストで確認
今日の豆知識
風景写真からパレットを抽出すると、空・植物・大地など被写体ごとの色が主要色として並びます。写真の「テイスト」を配色に移したいとき、まず1枚抽出してみるのがおすすめです。