カラーパレットの作り方
配色の基本と実践テクニック

色相環を理解する

配色を語るとき、避けて通れないのが色相環（カラーホイール）だ。赤・橙・黄・緑・青・紫を円形に並べたもので、「この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色だけ補色側から持ってくると、一気にメリハリが生まれる。

60:30:10ルール

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

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

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

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

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

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

2. 配色パターンを選ぶ

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

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

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

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

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

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

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

よくある失敗と対策

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

業種別おすすめ配色

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

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

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

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

1. ベースカラーを入力

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

2. 配色パターンを選択

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

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

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

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

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

配色とアクセシビリティ

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

コントラスト比の基準

色覚多様性への配慮

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

• 色だけで情報を伝えない。アイコン、テキスト、パターンを併用する
• 赤と緑の組み合わせを避ける。代わりに青と橙を使う
• エラー表示は赤色だけでなく、アイコンやテキストでも伝える
• グラフや図表は色だけでなく、形状やラベルで区別する