Webデザインやグラフィックデザインにおいて、配色はユーザーの印象を決定づける最も重要な要素のひとつです。

しかし、「何色を組み合わせればバランスが良いのか」「アクセシビリティを満たす配色とは何か」といった疑問を持つ方も多いのではないでしょうか。

この記事では、色彩理論の基礎から、画像からの配色抽出テクニック、WCAGコントラスト基準まで、実務で使える配色知識を体系的に解説します。

配色理論の基本

配色理論の出発点は色相環（カラーホイール）です。色相環は、赤・橙・黄・緑・青・紫の色が円形に配置されたもので、色と色の関係性を視覚的に理解するためのツールです。

色の三属性

すべての色は、次の3つの属性で定義されます。

属性 説明 CSS表記
色相（Hue） 赤・青・緑などの色味。0〜360°で表現 HSLのH値
彩度（Saturation） 色の鮮やかさ。0%（灰色）〜100%（純色） HSLのS値
明度（Lightness） 色の明るさ。0%（黒）〜100%（白） HSLのL値
💡 HSLで色を考える

HEXやRGBは機械向けの表記です。配色を考えるときは、人間の感覚に近いHSLで考えると直感的です。色相を固定して明度だけ変えれば、統一感のあるバリエーションが簡単に作れます。

6つの配色ルール

色相環上の位置関係に基づいて、調和の取れた配色パターンが体系化されています。目的に応じて使い分けましょう。

配色ルール一覧

ルール 色相の関係 印象 適した用途
補色 H + 180° 強いコントラスト、活動的 CTAボタン、アクセント
類似色 H ± 30° 穏やか、調和的 ブランドカラー、背景
トライアド H + 120°, +240° バランスが良い、華やか 子ども向け、イベント
スプリット補色 H + 150°, +210° 補色より穏やか 初心者向け、汎用
テトラディック H + 90°, +180°, +270° 豊かで多彩 ダッシュボード、インフォグラフィック
モノクロマティック 同一色相、明度変化 上品、統一感 ミニマルデザイン、テキスト
⚠️ 補色の使い方に注意

補色同士（例：赤と緑）を同じ面積で隣接させると、ハレーションと呼ばれる目がチカチカする現象が起きます。補色はアクセントとして小面積で使い、60-30-10ルール（メイン60%、サブ30%、アクセント10%）を意識しましょう。

画像から配色を抽出するテクニック

プロのデザイナーが美しい配色を作る方法のひとつが、優れた写真やアート作品からの色抽出です。自然や芸術作品には、人間が本能的に「美しい」と感じる配色が含まれています。

Median Cutアルゴリズム

画像から代表色を抽出する代表的なアルゴリズムがMedian Cut（中央値分割）です。

  1. 画像の全ピクセルをRGB色空間に配置
  2. 最も色の幅が広い軸（R/G/B）で中央値を求めて二分割
  3. 目標の色数になるまで再帰的に分割を繰り返す
  4. 各グループの平均色を代表色として出力

良い抽出結果を得るコツ

  • 色が豊かな画像を選ぶ：風景写真、料理、花など色のバリエーションが多いもの
  • 色数は5〜8色が最適：少なすぎると特徴を捉えられず、多すぎると扱いにくい
  • 白/黒の多い画像は避ける：背景が白の製品写真などは抽出結果が単調になりがち
  • ブランドイメージに近い画像を使う：ムードボードの写真からブランドカラーを導き出す手法が有効
💡 抽出後の調整

抽出した色をそのまま使うのではなく、HSLで微調整するのがプロの手法です。彩度を揃えたり、明度に段階をつけたりすることで、より洗練されたパレットになります。

グラデーションデザインのコツ

CSSグラデーションは、フラットな単色では表現できない奥行きと温かみをデザインに加えます。

美しいグラデーションの原則

原則 内容
色相の近い色を使う 色相差30〜60°の色は自然なグラデーションになる
中間色の灰色を避ける 補色のグラデーションは中間が灰色くすみになりやすい
明度差をつける 同じ明度だと平坦に見えるので、一方をやや明るくする
角度は135°が定番 左上→右下の斜めグラデーションが最も自然

CSSグラデーションの種類

  • linear-gradient：直線方向のグラデーション。ボタン、バナー、背景に最適
  • radial-gradient：放射状のグラデーション。スポットライト効果、バッジに最適
  • conic-gradient：円錐形のグラデーション。円グラフ、カラーホイールに最適
📝 カラーストップの位置

カラーストップの位置を50%付近に集中させると、くっきりした境界のグラデーションになります。逆に均等に配置すると、なめらかなブレンドになります。目的に応じて使い分けましょう。

コントラストとアクセシビリティ

WCAG（Web Content Accessibility Guidelines）は、すべてのユーザーがWebコンテンツにアクセスできるようにするための国際規格です。配色において特に重要なのがコントラスト比です。

WCAG 2.1 コントラスト基準

レベル 通常テキスト 大きいテキスト（18pt以上） 用途
AA（最低基準） 4.5:1 以上 3:1 以上 一般的なWebサイト
AAA（推奨基準） 7:1 以上 4.5:1 以上 官公庁、アクセシビリティ重視サイト

コントラスト不足を防ぐポイント

  • 薄いグレーのテキストは要注意：#999999（灰色）と白背景のコントラスト比は約2.85:1でAA不合格
  • 色だけで情報を伝えない：エラー表示を赤色だけにせず、アイコンやテキストも併用
  • プレースホルダーテキスト：入力欄のプレースホルダーもコントラスト基準を意識する
  • ボタンのホバー状態：ホバー時もコントラスト基準を維持する
⚠️ 法的要件になりつつある

欧州のEAA（European Accessibility Act）や米国のADA訴訟の増加により、Webアクセシビリティは「あると良い」から「必須」へと変わりつつあります。コントラストチェックは配色設計の最終工程として必ず行いましょう。

実践ワークフロー

ここまでの知識を踏まえて、実際のプロジェクトで配色を決める手順を紹介します。

ステップ1：インスピレーションを集める

ブランドイメージに合う写真やデザイン作品を3〜5点収集し、画像抽出タブでそれぞれの主要色を抽出します。共通する色の傾向を見つけましょう。

ステップ2：ベースカラーを決める

抽出した色の中からブランドの核となる1色を選びます。これをベースカラーとして配色生成タブに入力し、6つのルールで展開します。

ステップ3：60-30-10ルールで構成する

  • 60% メインカラー：背景色やベースとなる色
  • 30% セカンダリカラー：カードや見出しの背景色
  • 10% アクセントカラー：CTAボタン、リンク、アイコン

ステップ4：コントラストを検証する

コントラストチェッカータブで、テキストと背景の組み合わせをすべて検証します。WCAG AA基準（4.5:1以上）をクリアしない場合は、提案される代替カラーを活用しましょう。

ステップ5：グラデーションで仕上げる

ボタンやヒーローセクションにグラデーションを適用する場合は、グラデーションタブでCSS出力します。配色パレットの中から色を選ぶと統一感が保たれます。

💡 お気に入り機能を活用

カラーパレットジェネレーターの各タブで色をクリックすると、自動的にお気に入りに保存されます。プロジェクト単位で配色を集めておき、最終的にどの色を採用するか比較検討しましょう。

🎨 カラーパレットジェネレーターを使ってみよう

画像からの配色抽出、6つの配色ルール、グラデーションビルダー、WCAGコントラストチェッカーを1つのツールに。完全ブラウザ完結で安全に使えます。

カラーパレットを使う →
この記事をシェア