画像をアップロードするだけで配色パレットを自動生成。スポイト機能でピンポイントの色取得もでき、 CSS変数・Tailwind設定・JSON形式でそのままコピーできます。
画像から配色パレットを抽出するツールとは？仕組みと使い方
画像から配色パレット抽出ツールは、写真やイラスト、ロゴなどの画像に含まれる主要な色を自動で分析し、HEX・RGB・HSLの3形式でパレットとして抽出できる無料ツールです。
画像全体の色を「k-means法」と呼ばれる手法でグループ分けし、各グループの平均色を代表色として算出することで、画像の印象に近い配色を自動生成します。さらにスポイト機能を使えば、画像内の任意の1点をクリックして、その位置の正確な色を個別に取得することもできます。
抽出した配色は、CSSカスタムプロパティやTailwindの設定形式、JSON形式でそのままコピーできるため、Webサイトやアプリの配色設計にすぐに活用できます。似た機能として、テキストから直接カラーコードを作成したい場合はカラーコード変換ツールもあわせてご利用ください。
こんなシーンで便利です
Webサイトやアプリのメインカラーを決めたい時に
参考にしたい写真やデザインカンプをアップロードし、そこから抽出した配色をもとにメインカラー・アクセントカラーを検討したい場合に使えます。
ロゴや商品写真からブランドカラーを分析したい時に
既存のロゴや商品写真に使われている色をパレットとして可視化し、ブランドカラーの一貫性を確認・整理したい場合に活用できます。
ムードボードやプレゼン資料の配色を素早くまとめたい時に
参考画像から配色を自動抽出し、そのままパレット画像として書き出せるため、資料作成の配色検討を素早く進められます。
デザインカンプの特定の箇所の色を正確に拾いたい時に
自動抽出だけでなく、スポイト機能でデザインカンプや写真の特定の1点をクリックし、狙った箇所の正確な色をピンポイントで取得したい場合に便利です。
使い方は簡単 4ステップ
- 配色を抽出したい画像をアップロードします。
- 抽出する色数（4〜12色）を選択すると、自動でパレットが生成されます。
- 各スワッチをクリックしてHEX/RGB/HSLをコピー、またはスポイトで画像内の任意の点をクリックして色を取得します。
- 必要な色だけを選び、CSS変数・Tailwind設定・JSON・パレット画像としてまとめてコピーまたは保存します。
※画像・抽出した色データともに外部へ送信されることはなく、すべてブラウザ内の処理のみで完結します。
ご利用時の注意点
- 抽出処理は画像を一度縮小したうえで行われるため、非常に細かい模様やノイズの多い画像では、実際の見た目と印象がやや異なる場合があります。
- 透過PNGの背景など、透明度の低い部分は配色の計算対象から自動的に除外されます。
- スポイト機能は、画像を内部的にやや高い解像度で保持した別のキャンバス上でクリック位置の色を取得しています。極端に画質の粗い画像では、取得した色が周辺のピクセルと平均化される場合があります。
- 「使用率」はパレット抽出時のサンプリング結果に基づく目安であり、画像全体の正確なピクセル比率と完全に一致するとは限りません。
抽出する色数の目安
画像の種類や用途に応じて、以下を目安に色数を選ぶとバランスの良い配色になります。
| 色数 | 向いている用途 |
|---|---|
| 4色 | ロゴやアイコンなど、要素数が少ないシンプルな配色を把握したい時に |
| 6色 | Webサイトのメインカラー・アクセントカラーなど、基本的な配色設計に（標準的な色数） |
| 8色 | 写真やイラストなど階調が豊かな画像から、より詳細な配色バリエーションを把握したい時に |
| 10〜12色 | グラデーションや複雑な背景を含む画像から、細かなニュアンスまで抽出したい時に |
画像から配色を抽出して活用するための考え方
配色抽出の仕組みと、実務で活用するためのポイントを解説します。
結論：画像の配色は「色のクラスタリング」によって自動抽出される
画像には数千〜数百万色ものピクセルが含まれていますが、そのままでは配色として扱いづらいため、本ツールでは色の近いピクセル同士をk-means法によるクラスタリングでグループ化し、各グループの平均色を代表色としています。
色数を増やすほど画像の細かなニュアンスまで拾える一方、少なくするほど画像全体の「印象」に近いシンプルな配色になります。
抽出した配色をWebサイトやデザインにそのまま活かす方法
抽出したパレットは、CSSカスタムプロパティ（CSS変数）としてそのままコピーすれば、既存のスタイルシートに貼り付けるだけで利用できます。Tailwind CSSを使ったプロジェクトであればTailwind設定形式のコピーが、デザインツールやプログラムに連携したい場合はJSON形式のコピーがそれぞれ役立ちます。
スポイト機能とパレット抽出、それぞれの使い分け
自動抽出は画像全体の傾向を素早く把握したい時に、スポイト機能は特定のロゴ・文字・アイコンなど、狙った箇所の正確な色を取得したい時に向いています。両方を組み合わせることで、画像全体のバランスを踏まえつつ、重要な部分の色だけを正確に反映した配色を作ることができます。
アクセシビリティを考慮した配色選び（コントラスト比の確認）
抽出した色を背景色として使う場合、文字色とのコントラスト比が十分でないと読みにくくなります。本ツールの詳細パネルでは、各色に対して黒文字・白文字どちらが読みやすいか、およびWCAGのAA基準（コントラスト比4.5以上）を満たすかを確認できるため、配色を決める際の参考にしてください。
よくある失敗と対策
抽出色数を少なく設定したまま、画像に含まれる重要な色を見落とす
4色など少ない色数のまま配色を確定してしまい、画像に含まれる印象的なアクセントカラーが平均化されて反映されなかった失敗です。
💡 対策・解決策を見る▼
透過PNGの背景色が誤って配色に混ざってしまう
半透明処理された背景など、透明度が中途半端なピクセルが多く含まれる画像で、意図しない背景色がパレットに混ざってしまうケースです。
💡 対策・解決策を見る▼
コントラスト比を確認せず、読みにくい配色をそのまま採用してしまう
見た目の印象だけで抽出色を背景色・文字色として採用してしまい、公開後に文字が読みにくいという指摘を受けてしまう失敗です。
💡 対策・解決策を見る▼
スポイトで拾った色をそのままアクセントカラーにして全体のバランスが崩れる
画像内の一部分だけをスポイトで拾い、それを単体でアクセントカラーとして採用した結果、画像全体の配色バランスと合わない仕上がりになってしまうケースです。
💡 対策・解決策を見る▼
抽出したHEXコードをそのまま転記し、ブランドカラーとの微妙な色ズレに気づかない
画像から抽出した色をそのままブランドカラーとして採用してしまい、公式に定められたブランドカラーのHEXコードと微妙にずれていることに後から気づく失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.画像はサーバーに送信されますか。プライバシーが心配です
A. 送信されません。本ツールは画像の読み込みから配色の抽出まで、すべての処理をブラウザ内で完結させています。外部サーバーへのアップロードは一切発生せず、ページを閉じれば画像データはその場で破棄されます。
Q.何色まで抽出できますか
A. 4色・5色・6色・8色・10色・12色の中から選択できます。ロゴなど要素の少ない画像は4〜6色、写真やグラデーションを含む画像は8〜12色を選ぶと、より画像の特徴を反映した配色になります。
Q.抽出した色の精度はどの程度ですか、どのような仕組みで色を決めていますか
A. 画像を一度縮小したうえで、色の近いピクセル同士を「k-means法」と呼ばれる手法でグループ分けし、各グループの平均色を代表色として抽出しています。写真全体の傾向を表す配色としては十分な精度ですが、1ピクセル単位の厳密な色が必要な場合はスポイト機能をご利用ください。
Q.スポイト機能で正確な位置の色を取得できますか
A. はい。「スポイトで取得」をオンにして画像内をクリックすると、クリックした位置の色をHEX/RGB/HSLで取得できます。自動抽出されたパレットとは別に一覧表示され、個別にコピーや削除が可能です。
Q.抽出した配色をCSSやTailwindでそのまま使えますか
A. はい。「CSS変数をコピー」でCSSカスタムプロパティ（:root { --color-1: ...; }）形式、「Tailwind設定をコピー」でTailwindのcolors設定に近い形式、「JSONをコピー」でHEX・RGB・HSL・使用率を含むJSON形式として、それぞれワンクリックでコピーできます。
Q.透過PNGの場合、背景の透明な部分はどう扱われますか
A. 透明度が低いピクセル（ほぼ透明な部分）は配色の計算から除外しています。そのため、背景が透過されたロゴ画像などでも、実際に描画されている部分の色を中心にパレットが抽出されます。
Q.抽出した色数やパレットの内容を後から変更できますか
A. はい。色数のボタンを押すとその場でパレットが再抽出されます。また、各スワッチ右上の丸いアイコンをクリックすると、その色を書き出し対象から一時的に除外することもできます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。