「お気に入りの写真の雰囲気を、そのままWebサイトやバナーの配色に使えたらいいのに」「参考にしたいデザインの画像があるのに、使われている色が分からない」——配色づくりでは、色見本を1色ずつ探して試す作業に時間がかかりがちです。
そんなとき役立つのが、画像から主要な色を抽出してカラーパレットにする方法です。この記事では、色が抽出される仕組み、抽出した色を実際の配色に落とし込む手順、無料ツールでの具体的な使い方を、初心者向けに解説します。
画像から色を抽出する仕組み
画像から抽出される「ドミナントカラー」とは、画像の中で面積・出現頻度が大きい色のことです。風景写真なら空や大地の色、商品写真なら背景色、スクリーンショットならページの背景やボタンに使われたブランドカラーが、ドミナントカラーとして先頭に近い位置に並びます。
抽出は、次のような流れで行われます。
- 画像を小さく縮小して、処理するピクセル数を減らす
- 各ピクセルの色を数え、近い色同士を同じグループにまとめる
- グループごとに平均した代表色を、出現数の多い順に並べる
1枚の画像から抽出すると、どうして色がまとまって見えるのでしょうか。理由はシンプルで、同じ写真の中の色は、もともと同じ光・同じ時間・同じホワイトバランスの中で記録されているからです。バラバラに色を選ぶより、同じ場面に登場する色を組み合わせるほうが、自然に調和の取れた配色になります。これが「好きな写真の雰囲気を配色に移したい」という願いに、画像からの抽出が合っている理由です。
抽出した色は「HEX」や「RGB」といった色コードで表されます。デザインの作業でよく使う3つの表記を、あわせて押さえておきましょう。
| 表記 | 例 | 読み方・使いどころ |
|---|---|---|
| HEX | #FF7043 | Webデザインの標準表記。CSSにそのまま貼り付けられる |
| RGB | rgb(255, 112, 67) | 光の三原色（赤・緑・青）を0〜255の数値で示したもの |
| HSL | hsl(11, 100%, 63%) | 色相・彩度・明度で表す方式。明るさだけを調整したいときに便利 |
JPEGとPNGで結果が少し変わることがある：JPEGは圧縮の性質上、もとの色がわずかに揺れて保存されます。そのため同じ画像でも、抽出結果のHEXコードは「代表色の目安」と考え、厳密な指定色が必要な場面では色変換ツールで意図した値に整理してから使うのがおすすめです。
実践：抽出した色を配色に活かす手順
パレットを抽出したら、そのまま4色を並べるのではなく、役割を決めて配置すると一気に「デザインされた」見た目に近づきます。配色の基本とされる60-30-10ルールを軸に、手順を示します。
- 参考画像からパレットを抽出する：雰囲気を借りたい写真や画像を1枚用意し、主要な色を抽出します。
- もっとも面積が大きい色をベースにする：パレットの先頭に近い色を、ページ背景や大きな面積の要素に使います（全体の約60%）。
- 2番目の色をサブに回す：見出しやカード、罫線など中程度の面積に使います（約30%）。
- 彩度の高い色をアクセントに限って使う：ボタンやリンクなど、押してほしい場所にだけ小面積で配します（約10%）。
色数の選び方は、用途によって変えるのがコツです。4色はWebサイトの配色にそのまま落とし込みたいときに適し、6〜8色は写真のテイストを細かく再現したいときや、イラストの共通色を確認したいときに向いています。まずは4色で全体のバランスを作り、足りないと感じたら色数を増やすのが失敗しにくい進め方です。
参考にする画像の選び方も、仕上がりを左右します。たとえば風景写真なら緑や青を基調とした落ち着いた配色に、都市の夜景なら暗い背景に鮮やかな光がアクセントになった、メリハリの強い配色に、スクリーンショットならそのサイトやアプリが実際に使っているブランドカラーの一覧を得られます。作りたいものの雰囲気に近い場面の写真を1枚選ぶことが、配色づくりの近道になります。
一方で、抽出結果が期待外れに感じられることもあります。背景が単色に近い画像や、霞んだ暗い写真では、似た色ばかりが並びがちです。これは抽出の失敗ではなく、画像に含まれる色の種類が少ないためです。そんなときは、別のカットの写真を試す、明るく彩度のある画像を選ぶ、色数を増やして細かい変化を拾う、といった工夫をしてみてください。
文字色に使う前はコントラスト比を確認：抽出した鮮やかな色は、白い背景にそのまま文字として載せると読みにくくなることがあります。文字に使う色は、WCAGの基準（通常の文字で4.5:1）を満たすかコントラストチェッカーで確認してから採用しましょう。
ツールで画像からパレットを抽出する
手動でスポイトを使って何度も色を拾うのは手間がかかります。スポイトでの色拾いは1回に1色しか取れないうえ、面積の大きい色がどれかを見極めるのも一苦労です。抽出ツールなら頻度の多い順に自動で並ぶため、拾い忘れがなく、色数を変えた比較もすぐにできます。Tools Hubの画像カラーパレット抽出ツールを使えば、画像をドロップするだけで主要な色が多い順に並び、4色・6色・8色の切り替えもワンクリックです。各色はHEXとRGBの両方で表示され、スウォッチをクリックするとHEXコードがコピーできます。処理はすべてブラウザ内で完結し、画像がサーバーへ送信されることはありません。
使い方（3ステップ）
画像をドロップする
パレットを取りたい画像をドロップエリアに放り込むか、クリックしてファイルを選びます。PNG・JPG・WebP・GIFに対応しています。
色の数を選ぶ
4色・6色・8色からパレットの色数を選びます。Webサイトの配色には4色、写真のテイストを細かく見たいときは8色がおすすめです。
スウォッチをクリックしてコピー
使いたい色のスウォッチをクリックするとHEXコードがコピーされます。あとはCSSやデザインツールに貼り付けるだけです。
この記事で紹介したツール
画像カラーパレット抽出ツール
画像をドロップするだけで主要な色を抽出。4/6/8色の切り替えとHEX・RGBのワンクリックコピーに対応した、ブラウザで完結する無料ツールです。
抽出した色どうしの組み合わせに迷ったら、補色や類似色など色相環での関係から配色を組み立てる「配色の決め方」の記事が、文字の見やすさの確認は「コントラスト比の調べ方」の記事がそれぞれ詳しいので、あわせて参照してください。
まとめ
- 画像からの抽出は、ピクセル色の出現頻度を集計して代表色を並べる仕組み。面積の大きい色ほど先頭に来る
- 抽出した色は60-30-10の配分でベース・サブ・アクセントに役割を分けると配色に活かしやすい
- 色数はまず4色でバランスを作り、写真のテイストを細かく再現したいときに6〜8色へ増やす
- 文字色に使う色は、コントラスト比（通常の文字で4.5:1）を確認してから採用する
よくある質問
抽出される色の順番はどう決まりますか？
画像の中で使われている面積・出現頻度が多い色から順に並びます。背景色が広い画像では背景色が先頭に来るため、「全体のベース色」を決めるときは先頭の色から検討するとスムーズです。
スマートフォンで撮った写真も使えますか？
使えます。ただしiPhoneの標準形式（HEIC）はブラウザによって読み込めない場合があるため、その場合はPNGやJPEGに変換してからドロップしてください。
抽出した色をそのまま文字色にしても大丈夫ですか？
そのまま使うと読みにくくなるケースがあります。特に彩度の高い色は白背景ではコントラストが不足しがちなので、コントラストチェッカーで基準（4.5:1）を満たすか確認してから採用してください。
画像はサーバーにアップロードされますか？
いいえ。抽出処理はすべてブラウザ内で完結し、ドロップした画像が外部へ送信されることはありません。機密性の高い素材でも安心して使えます。
