画像から配色を抽出する方法：実用的なカラーパレットの作り方

最終更新：2026年6月30日

写真からカラーパレットを抽出することは、一緒に属しているように感じる色のセットを構築する最も速い方法です。写真は調和のとれた色合いを選ぶという大変な作業をすでに終えています。抽出は単にそれらを測定するだけです。本ガイドでは、抽出が実際にどのように機能するか、デザインシステムで使用できるパレットを生み出す手法、そしてそれらの色がアクセシブルである状態を保つためのコントラストルールについて解説します。

クイックアンサー：画像から色を抽出する方法は？

カラーピッカーツールで画像を開き、最も頻度の高い5〜7色のサンプルを取り、それぞれの色が占める面積によって重み付けを行います。ほぼ重複する色は破棄し、支配的な色（dominant）を1色、セカンダリーカラーを1〜2色、アクセントカラーを1色残します。次に、60-30-10ルールを適用します：60%が支配的、30%がセカンダリー、10%がアクセントです。公開する前に、すべてのテキストと背景の組み合わせをWCAG contrast checkerでチェックしてください。見た目は良いがコントラストに失敗するパレットは、実際のテキストには使えません。

なぜ写真から色を抽出するのか？

優れた写真は、撮影者またはシーン自体がそのように構成しているため、すでに調和のとれたパレットを含んでいます。これらの色を抽出することで、ゼロから16進数コードを選ぶのではなく、その調和性を引き継ぐことができます。これが、ブランドデザイナーがヒーロー画像、創設者の好きな風景写真、または製品写真から着手する理由です。

カラーホイールから色を選ぶという代替方法は機能しますが、技術的には正しいものの感情的に平坦なパレットになりがちです。実際の画像から取り出された色は、それらに意図的な感覚を与えるコンテキストを帯びています。

カラー抽出はどのように機能するか？

抽出は、何千もの個別のピクセルを少数の代表的な色に削減します。主に3つの手法があり、それぞれにトレードオフがあります。

• Frequency counting は高速ですが、空のような大きな背景色に重きを置きすぎることがあります。
• Median cut は速度と品質のバランスが取れており、ほとんどのエディターが使用する方法です。
• K-means は最も「デザインされた」結果を生み出しますが、処理が遅いです。

実用的な詳細：抽出を行う前に、必ず画像を100×100ピクセル程度にダウンスケールしてください。フル解像度の写真は数百万のピクセルを持ちますが、その余分なディテールはトップカラーを変えることはなく、単にカウントを遅くするだけです。Mozilla canvas pixel manipulation referenceには、ブラウザベースの抽出器の基盤となるピクセル読み取りステップが文書化されています。

どの色を残すべきか？

抽出は、実際に使用できるよりも多くの色を返すことがよくあります。写真からは12個の候補が得られるかもしれませんが、使用可能なパレットは5〜7色です。フィルタリングのステップこそが、ほとんどのパレットが失敗する場所です。

• 最も面積を占める支配的な色（dominant）を1色残すこと。これはニュートラルカラーか空の色であることが多いです。
• 支配的な色をサポートするセカンダリーカラーを1〜2色残すこと。
• コールトゥアクションやハイライトのために、正確に1つのアクセントカラーを残すこと。
• ほぼ重複する色は破棄すること。3段階異なる緑は、単一の濁った色として認識されます。
• デザインで必要でない限り、純粋な黒と純粋な白は破棄すること。

パレットを適用するための60-30-10ルール

色を手に入れたら、60-30-10ルールはそれぞれどれくらいの量を使うべきかを教えてくれます。これはインテリアデザインからのガイドラインであり、インターフェースにきれいに応用できます。

具体的な例：森の写真から抽出した場合、支配的な緑、より明るいセカンダリーの緑、そして茶色のアクセントが得られるかもしれません。この緑が60%でページ背景になり、明るい緑が30%でカードを埋め尽くし、茶色が10%でコールトゥアクションボタンを強調します。その結果は、文字通りの森であることなく、まるで森のように感じられます。

アクセシビリティのために色をチェックする方法は？

コントラストに失敗するパレットは、完成されたパレットではありません。テキストが読みやすいためには、背景に対して最低限のコントラスト比が必要です。標準はWCAG 2.1です。

• 通常のテキストには、背景に対して少なくとも4.5:1のコントラストが必要です。
• 大きなテキスト（18ptまたは14pt bold）には3:1が必要です。
• 可能であればボディテキストで7:1を目指しましょう。これは視力の低い読者にとって役立ちます。

実際に使用する予定のすべての組み合わせをテストしてください — アクセントが支配的な色の上にあるか、テキストがセカンダリーの色の上にあるかなど。WebAIM contrast checkerは標準の無料ツールであり、W3C WCAG 2.1 contrast guidanceが数学的な定義を定めています。アクセントカラーが背景で失敗する場合、そのアクセントを暗くするか、背景を明るくしてパスするまで調整してください。

パレットをデザインシステムに変換する

一連の16進数コードは、役割を割り当ててバリアントを構築しない限り、システムではありません。これはムードボードと開発者が使えるものとを分けるステップです。

1. 色を色相ではなく、役割（primary, secondary, accent, surface, text）で名前を付ける。
2. 両方のモードに対応できるよう、それぞれのライトおよびダークバリアントを生成する。
3. 彩度や輝度をわずかにシフトさせることで、ホバー状態とアクティブ状態を定義する。
4. パレットをツールの変数にロックし、一貫性を保つ。

パレットが配置されると、残りの構築作業はより速くなります。ボタン、ヘッダー、カードはすべて同じ名前付きトークンから引き出されます。このシステム内に配置される画像については、画像圧縮ツール と 画像リサイズツール を通して実行し、システムのパフォーマンス予算に合わせる必要があります。image optimization guideでは、色豊かなデザインを高速に保つためのフォーマットとサイズの決定について解説しています。

抽出が間違ったパレットを出す場合

抽出は、ブランドが必要とするものではなく、写真に含まれているものを測定します。一般的な失敗モードがいくつかあります。

• 明るい空がカウントを支配し、結果的に青色が5色になってしまう。
• 小さくても重要なアクセントカラーが、面積が少ないために落ちてしまう。
• 圧縮アーティファクトが、本物のスウォッチのように見えるノイズカラーを導入する。
• 照明が混ざった写真が濁ったミッドトーンを生み出す。

抽出されたパレットがおかしいと感じた場合は、生の頻度ではなく、知覚的な影響（輝度、彩度、エッジコントラスト）によって重み付けをしてください。または、異なるソース画像を選ぶのも良いでしょう。ソース写真は、結果のパレットが使用可能かどうかという点で最大の要因であるため、すでに望むムードを持っているものを選んでください。サンプリングされたものではなく、制御された二色パレットを望むスタイライズされたブランド作業の場合、duotone effect guideは画像を2色にマッピングする方法を意図的に解説しています。抽出された色がロゴやアイコンセットも駆動する場合、SVG to PNG converterはパレットが触れるすべてのサイズでベクターマークの鮮明さを保ちます。

よくある質問

画像から色を抽出する方法は？

ツールが画像のピクセルを類似性に基づいてクラスター化し、最も頻度の高い色をパレットとして返します（通常は5〜6色）。各色には16進数またはRGBの値が付随しています。結果は、推測ではなく写真に基づいたデータ駆動型のパレットです。

どの抽出された色を残すべきですか？

支配的な色（最も頻度が高いもの）、アクセントを1〜2色、そしてニュートラルカラーです。互いに近すぎる色や、ごく小さな領域にしか現れない色は破棄してください。通常5色が十分です。それ以上になるとパレットが断片化します。60-30-10ルールに従って適用してください。

60-30-10ルールとは何ですか？

比率ガイドライン：デザインの60%を支配的な色、30%をセカンダリーな色、10%をアクセントカラーで構成します。これにより、パレットが濁るのを防ぎ、バランスを保ちます。抽出された色はこれらの役割に直接フィードされます。

アクセシビリティのために色をチェックする方法は？

テキストと背景色のコントラスト比をWCAGのしきい値（通常のテキストで4.5:1）に対してテストします。見た目は良いパレットでも、明るいアクセントが明るい背景に乗っている場合、アクセシビリティに失敗することがあります。コントラストを修正するために色相ではなく明度を調整してください。

パレットは何色あるべきですか？

通常は5色：支配的な色、セカンダリーカラーを1〜2色、アクセント、そしてニュートラルです。それ以上になるとパレットが断片化し、一貫して適用するのが難しくなります。5色は60-30-10の比率ルールにきれいに対応します。

抽出したパレットをデザインに適用する方法は？

60-30-10ルールを使用します：支配的な色がデザインの60%（通常は背景）、セカンダリーカラーが30%（表面、二次要素）、アクセントが10%（コールトゥアクション、ハイライト）を占めます。この比率がパレットを濁らせることなくバランスを保ちます。ソース写真に現れたとしても、これら3つの役割に合わない抽出された色はすべて破棄してください。