配色パレットの作り方ガイド
業種別おすすめパターン10選

色相環を理解する

配色を語るとき、避けて通れないのが色相環（カラーホイール）だ。赤・橙・黄・緑・青・紫を円形に並べたもので、「この2色はなぜ相性がいいのか」「なぜ浮いて見えるのか」を論理的に説明するための地図になる。

色相環の構造

色相環は大きく3つのグループで構成されている。

1. 原色（Primary Colors）

   赤・青・黄の3色。他の色を混ぜて作れない、すべての配色の起点となる色だ。デジタルデザインでは光の三原色（RGB: Red, Green, Blue）が基準になる。

2. 二次色（Secondary Colors）

   原色を2つ混ぜて作られる色。橙（赤+黄）、緑（青+黄）、紫（赤+青）の3色。

3. 三次色（Tertiary Colors）

   原色と二次色を混ぜた色。赤橙、黄橙、黄緑、青緑、青紫、赤紫の6色。

暖色と寒色

色相環は暖色系（赤〜黄）と寒色系（緑〜紫）に分かれる。暖色は活発・情熱的な印象、寒色は冷静・信頼感のある印象を持つ。この特性を把握しておくだけで、業種とブランドカラーのミスマッチをかなりの確率で防げる。

色の三属性（色相・彩度・明度）

すべての色は色相（Hue）・彩度（Saturation）・明度（Brightness/Lightness）の3つの属性で定義される。カラーパレット作りの核心はここだ。「なんかチープに見える」「全体がぼんやりしている」という問題のほとんどは、この三属性のどれかが崩れていることで起きる。

色相（Hue）

色相は「何色か」を表す属性で、色相環上の位置（0〜360度）で示される。赤は0度、緑は120度、青は240度。CSSではHSL表記（例: hsl(210, 80%, 50%)）を使うと、色相番号を変えるだけで色を切り替えられるため、テーマカラーの管理が格段にラクになる。

彩度（Saturation）

彩度は色の鮮やかさを表す。100%が最も鮮やかで、0%にするとグレーになる。彩度を落とした色（デサチュレーテッドカラー）を使うと洗練された印象になるが、初心者がやりがちなのは全色を彩度100%にしてしまうことだ。パレット全体がギラついて、目が疲れる原因になる。

明度（Brightness / Lightness）

明度は色の明るさ。明度100%は白、0%は黒だ。同じ色相・彩度でも明度を変えると、まったく別の印象の色が生まれる。カラーパレットに奥行きを出すには、同じ色相で明度のバリエーション（カラースケール）を用意するのが鉄板の手法だ。

定番の配色パターン6選

感覚に頼った配色はレビューで「なんかちょっと…」と指摘されがちだ。色相環上の色の関係を根拠にした配色パターンを使えば、理論的な裏付けをもって色を選べる。以下の6パターンは実務で最も頻繁に登場する。

1. 補色（Complementary）

色相環の正反対に位置する2色の組み合わせ。最もコントラストが強く、CTAボタンと背景色の組み合わせに最適だ。ただし両方を同じ面積で使うと目がチカチカする。メインとアクセントで面積差をつけること——これが補色配色で唯一といっていい注意点。

例: 青（#2563EB）× 橙（#EA580C）、紫（#7C3AED）× 黄緑（#65A30D）

2. 類似色（Analogous）

色相環で隣り合う3色を使う配色。統一感があり、穏やかで調和のとれた印象が出る。ブランドサイトやポートフォリオに向いている。3色のうち1色をメインに据え、残り2色をサブ・アクセントに配分するのがコツだ。

例: 青（#3B82F6）・青紫（#6366F1）・紫（#8B5CF6）

3. トライアド（Triadic）

色相環上で等間隔（120度ずつ）に位置する3色の組み合わせ。バランスが良く、鮮やかな印象になる。子ども向けサービスやクリエイティブ系の表現に向いており、彩度をやや抑えると一気に大人向けの仕上がりになる。

例: 赤（#EF4444）・青（#3B82F6）・黄（#EAB308）

4. スプリットコンプリメンタリー

補色の片方を、その両隣の色に置き換えた3色の組み合わせ。補色ほど強烈ではないが、コントラストはしっかり確保できる。「補色を使いたいけど、ぶつかりすぎるのが怖い」という場面では、まずこれを試してみるといい。

5. テトラード（Tetradic / Rectangle）

色相環上で長方形を描く4色の組み合わせ。色数が多いぶん、面積配分の失敗が目立ちやすい。メイン1色を軸として固め、残り3色はアクセントとして少量投入するのが原則だ。

6. モノクロマティック（Monochromatic）

1つの色相で明度と彩度だけを変化させる配色。統一感が最も強く、6パターンの中で最も失敗しにくい。ミニマルなデザインやコーポレートサイトに向いているが、単調さが出やすいのが弱点。アクセントカラーを1色だけ補色側から持ってくると、一気にメリハリが生まれる。

業種別おすすめ配色パターン10選

「色彩理論はわかったけど、結局クライアントの業種に合う色はどれ？」——実務で最も多い質問だ。以下の10パターンは、業種ごとの心理的効果と実績に基づいたおすすめ配色だ。各パターンのカラーコードはそのまま使えるよう具体的に記載した。カラーパレットジェネレーターで微調整して、プロジェクトに最適化してほしい。

1. コーポレート（信頼感）

金融・保険・法律事務所など、信頼と堅実さを訴求する業種に。ネイビーは「誠実さ」「知性」を連想させ、ゴールドが「品質」を添える。日本の大企業サイトの定番パレットだ。

2. EC/ショップ（購買意欲）

ネットショップやセールページに。赤は「衝動」「緊急性」を喚起し、購買行動を促すことが研究で示されている。ブラックで高級感を加え、ホワイトで視認性を確保する。

3. テクノロジー（先進性）

IT企業・SaaS・スタートアップに。ブルーは世界で最も好まれる色で「信頼」を、パープルが「イノベーション」を表現する。ダーク背景との組み合わせでモダンな印象が増す。

4. ヘルスケア（安心感）

病院・クリニック・フィットネスに。グリーンは「自然」「回復」、ライトブルーは「清潔さ」を連想させる。白を多用して清潔感を最大化する。

5. 教育（親しみ）

学習サービス・スクール・キッズ向けに。オレンジは「親しみ」「エネルギー」、イエローは「楽しさ」「好奇心」を表す。堅すぎない温かみのあるパレットだ。

6. 飲食（食欲）

レストラン・カフェ・フードデリバリーに。レッドとオレンジは食欲を増進させることが色彩心理学で確認されている。クリーム色の背景が温かみと上品さを加える。

7. ファッション（洗練）

アパレル・ジュエリー・高級ブランドに。モノクロをベースに差し色を1つだけ加えるのがファッション業界の常套手段。差し色を変えるだけでシーズンごとのトーン変更も容易だ。

8. ポートフォリオ（個性）

クリエイター・デザイナー・エンジニアの自己紹介サイトに。ダーク背景にネオンカラーを映えさせると、ギャラリーサイト級のインパクトが出る。

9. 不動産（重厚感）

不動産・建築・住宅メーカーに。ダークグリーンは「安定」「資産」、ゴールドは「高品質」を連想させる。白が信頼感と清潔さを補完する。

10. ベビー/キッズ（優しさ）

マタニティ・ベビー用品・キッズ向けサービスに。パステルカラーは「柔らかさ」「安全」「可愛らしさ」を伝える。彩度を30〜50%に抑えた淡い色で構成するのがポイントだ。

配色の黄金比率「60:30:10ルール」

インテリアデザインの世界から来た法則だが、Webデザインとの相性が抜群にいい。3色の面積配分を60% : 30% : 10%にすると、なぜかバランスが整ってしまう。「色が多いのに統一感がある」デザインの多くは、意識的か無意識かを問わずこの法則に従っている。

Webページでの具体的な適用例

実際のWebページで60-30-10ルールがどう機能するか、具体的に見てみよう。

• 60% ベースカラー（白 / ライトグレー）: ページ全体の背景、コンテンツエリアの余白、本文テキストの背景。圧倒的に大きな面積を占め、「息がつける空間」を作る
• 30% サブカラー（ブランドカラー）: ヘッダー/フッターの背景、カードの見出し、サイドバー、セクション区切り。ページの骨格を形成し、ブランドの存在感を示す
• 10% アクセントカラー（補色/差し色）: CTAボタン、リンクテキスト、通知バッジ、アイコンハイライト。少量だからこそ目立ち、ユーザーの視線を誘導する

Webデザインでの実践テクニック

ブランドカラーからパレットを展開する

実務では「ブランドカラーはこれ」と1色だけ渡されてスタートするケースが大半だ。そこからどうパレットを広げるか——以下の手順が基本の流れになる。

1. ブランドカラーをベースに設定

   クライアント指定の色をメインカラーとして設定。指定がなければ業種やコンセプトから色相を決める。

2. 配色パターンを選ぶ

   サイトの目的に合わせて、補色・類似色・トライアドなどのパターンを選択。落ち着いたサイトなら類似色、インパクトが必要なら補色が向いている。

3. 明度バリエーションを作成

   メインカラーの50〜900スケールを用意し、ホバー状態、disabled状態、背景色などに使い分ける。カラースケール生成ツールで自動生成できる。

4. ニュートラルカラーを追加

   テキスト用のグレー系カラーを追加。ブランドカラーを少し混ぜた「カラードグレー」にすると、全体の統一感がぐっと増す。

5. セマンティックカラーを定義

   成功（緑）、エラー（赤）、警告（黄）、情報（青）のUI用カラーを追加して完了。

よくある失敗と対策

• 色を使いすぎる → メインは3〜5色に絞る。それ以上は明度のバリエーションで対応
• 彩度が高すぎる → メイン以外の色は彩度を落として調和させる
• 背景と文字のコントラスト不足 → WCAG基準4.5:1以上をコントラストチェッカーで確保する
• モニター環境による色の見え方の差 → sRGB色空間内で作業する
• ダークモード未考慮 → 最初からライト/ダーク両方のパレットを用意する

アクセシビリティに配慮した配色

どれだけ美しい配色でも、ユーザーが読めなければデザインの意味が半分になる。WebデザインではWCAG（Web Content Accessibility Guidelines）のコントラスト比基準が実質的な最低ラインだ。

コントラスト比の基準

WCAG 2.1 のコントラスト比要件を満たすコツ

コントラスト比の計算は人間の目では正確に判断できない。「たぶん大丈夫」で進めると、後からアクセシビリティ監査で大量に引っかかる。設計段階で必ずツールで検証する習慣をつけたい。

1. 背景色とテキスト色のペアで検証する

   パレットの全色の組み合わせをチェックするのが理想だが、最低限「背景色 × 本文テキスト」「背景色 × リンク色」「ボタン背景 × ボタンテキスト」の3組は必ず確認する。

2. 明度差でコントラストを稼ぐ

   同じ色相でも、明るい背景に暗いテキスト（またはその逆）にすればコントラスト比は上がる。彩度の高い色同士の組み合わせは見た目は派手でもコントラスト比は低い場合がある。

3. 微調整は明度で行う

   コントラスト比が基準に足りない場合、色相を変えるのではなく明度を調整する方がデザインの統一感を保てる。

色覚多様性への配慮

日本人男性の約5%——20人に1人——は色覚異常（色弱）を持つ。特に赤と緑の区別が困難なP型・D型色覚への対応は、Webアクセシビリティの基本事項として押さえておきたい。

• 色だけで情報を伝えない。アイコン、テキスト、パターンを併用する
• 赤と緑の組み合わせを避ける。代わりに青と橙を使う
• エラー表示は赤色だけでなく、アイコンやテキストでも伝える
• グラフや図表は色だけでなく、形状やラベルで区別する
• 色覚シミュレーションツール（Chrome DevTools の Rendering タブ）で実際の見え方を確認する

ダークモード対応の配色設計

2026年現在、ダークモード対応はもはやオプションではなく標準仕様だ。「あとからダークモード対応」は手戻りが大きいため、配色設計の初期段階でライト/ダーク両方のパレットを用意するのが最善のアプローチとなる。

ライトモードからダークモードへの色変換ルール

ダークモードは単純に色を「反転」するのではない。以下のルールに従って変換すると、自然で目に優しいダークUIが実現する。

CSS変数を使った実装例

CSS変数（カスタムプロパティ）でカラーパレットを管理すれば、ダークモード切り替えが最小限のコード変更で実現できる。

カラーパレット作成ツールの活用

理論を頭に入れたら、あとは手を動かすだけ。ツールを使えば、色彩理論に基づいた正確な配色を秒速で生成できる。

カラーパレットジェネレーターの使い方

当サイトのカラーパレットジェネレーターでは、ベースカラーを1色入力するだけで補色・類似色・トライアド・スプリットコンプリメンタリーなど全パターンを自動生成する。クライアントへの提案前に複数パターンをざっくり確認する用途にも使える。

1. ベースカラーを入力

   HEXコード（例: #3B82F6）を入力するか、カラーピッカーで直感的に色を選びます。

2. 配色パターンを選択

   補色、類似色、トライアドなどのパターンをタブで切り替えます。リアルタイムでプレビューが更新されます。

3. カラーコードをコピー

   気に入った配色が見つかったら、各色のHEX/RGB/HSLコードをワンクリックでコピーする。

カラー変換とスケール生成

パレットを決めたあとの実装段階では、色の形式変換が地味に頻繁に発生する。カラーコード変換ツールでHEX/RGB/HSL/CMYKを相互変換しながら、カラースケール生成ツールでブランドカラーの明度バリエーションを揃えると、この工程の時間をかなり圧縮できる。