Webサイトのデザインにおいて、配色は印象を大きく左右する重要な要素です。しかし「どの色を組み合わせればいいかわからない」「なんとなくダサくなる」と悩む方も多いのではないでしょうか。この記事では、色の基礎知識から実践的な配色テクニック、アクセシビリティまで、初心者にもわかりやすく解説します。

色の基礎知識（RGB・HSL・HEX）

CSSで色を指定する方法は複数あります。まずは代表的な3つの形式を理解しましょう。

HEX（16進数カラーコード）

最もよく使われる形式です。#の後に6桁の16進数で色を表現します。

color: #FF5733;  /* 赤みのあるオレンジ */
color: #333333;  /* 濃いグレー */
color: #FFFFFF;  /* 白 */

先頭2桁が赤(R)、中央2桁が緑(G)、末尾2桁が青(B)の値を表します。各色は00〜FFの範囲で指定します。

RGB（赤・緑・青）

光の三原色（赤・緑・青）の組み合わせで色を表現します。各値は0〜255の範囲です。

color: rgb(255, 87, 51);   /* 赤みのあるオレンジ */
color: rgba(0, 0, 0, 0.5); /* 50%透明の黒 */

rgba()を使えば透明度（アルファ値）も指定できるため、半透明のオーバーレイなどに便利です。

HSL（色相・彩度・明度）

人間の直感に近い色の指定方法です。色相（Hue: 0-360度）、彩度（Saturation: 0-100%）、明度（Lightness: 0-100%）で色を表現します。

color: hsl(14, 100%, 60%);   /* 赤みのあるオレンジ */
color: hsl(14, 100%, 80%);   /* 同系統の薄い色 */
color: hsl(14, 100%, 40%);   /* 同系統の濃い色 */

HSLの大きな利点は、色相を固定したまま明度や彩度だけを変えられること。同系色のバリエーションを作りやすく、統一感のある配色が簡単にできます。

配色の黄金比 70-25-5ルール

プロのデザイナーがよく使う配色の法則が「70-25-5ルール」です。3色を以下の比率で使い分けます。

  • 70% - ベースカラー: 背景や余白に使う最も面積の大きい色。白やライトグレーなど、控えめな色を選ぶ
  • 25% - メインカラー: ヘッダー、ナビゲーション、見出しなどに使うブランドカラー。サイトの印象を決める色
  • 5% - アクセントカラー: ボタン、リンク、CTAなど注目させたい要素に使う色。メインカラーと対照的な色を選ぶ
:root {
  --base-color: #F5F5F5;    /* 70% ライトグレー */
  --main-color: #2C3E50;    /* 25% ダークネイビー */
  --accent-color: #E74C3C;  /* 5%  レッド */
}

この比率を守るだけで、バランスの取れた見やすいデザインになります。色選びに迷ったらまずこのルールに従いましょう。

配色パターンの作り方

色相環（カラーホイール）を使った基本的な配色パターンを紹介します。

補色配色（Complementary）

色相環で正反対に位置する2色の組み合わせです。コントラストが強く、メリハリのあるデザインに向いています。例: 青とオレンジ、赤と緑。

類似色配色（Analogous）

色相環で隣り合う色の組み合わせです。まとまりが良く、落ち着いた印象になります。例: 青・青緑・緑。自然界にも多い配色パターンです。

トライアド配色（Triadic）

色相環を3等分した位置にある3色の組み合わせです。バランスが良く、活気のあるデザインに向いています。例: 赤・青・黄。

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

見た目の美しさだけでなく、誰でも読みやすいことが良い配色の条件です。WCAG（Web Content Accessibility Guidelines）では、テキストと背景のコントラスト比について以下の基準を定めています。

レベル通常テキスト大きなテキスト
AA（最低限）4.5:1 以上3:1 以上
AAA（推奨）7:1 以上4.5:1 以上

よくある失敗例として、以下のような組み合わせがあります。

  • 薄いグレーのテキスト（#999）を白背景に置く → コントラスト不足
  • 赤い背景に緑のテキスト → 色覚多様性に配慮できていない
  • 画像の上に直接テキストを置く → 背景によっては読めない

色覚多様性（いわゆる色覚異常）を持つ方は日本人男性の約5%を占めます。色だけで情報を伝えず、アイコンやテキストラベルも併用しましょう。

CSSでの色指定テクニック

実務で役立つCSSの色指定テクニックをいくつか紹介します。

CSS変数（カスタムプロパティ）で一元管理

サイト全体の配色をCSS変数で管理すると、色の変更が圧倒的に楽になります。

:root {
  --primary: #3498DB;
  --primary-light: #5DADE2;
  --primary-dark: #2471A3;
  --text-color: #333333;
  --bg-color: #FFFFFF;
}

.button {
  background-color: var(--primary);
  color: var(--bg-color);
}

.button:hover {
  background-color: var(--primary-dark);
}

ダークモード対応

prefers-color-schemeメディアクエリを使えば、OSの設定に応じて自動的にダークモードに切り替えられます。

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #E0E0E0;
    --bg-color: #1A1A1A;
  }
}

カラーコードの形式変換（HEX → RGB → HSL）は、手計算では面倒です。カラーコード変換ツールを使えば、瞬時に相互変換できます。

HEX・RGB・HSLのカラーコードを相互変換

カラーコード変換ツールを使ってみる

まとめ

Webデザインの配色は、70-25-5ルールを基本に、コントラスト比とアクセシビリティに配慮することが大切です。HEX・RGB・HSLの3つの色指定方法を使い分け、CSS変数で色を一元管理すると、保守しやすいコードになります。

配色を考える際には、カラーコード変換ツールを使ってHEX・RGB・HSLを自由に変換しながら、最適な色を見つけてみてください。