カラーパレットと配色ガイド:色彩理論からプロ級のUI配色までの実践

開発ツール

色彩理論の基礎

HSLカラーモデル

H(Hue)色相:0-360°、色相環上の角度
S(Saturation)彩度:0-100%、グレー→純色
L(Lightness)輝度:0-100%、黒→白
色相値 色
0° / 360° 赤
60° 黄
120° 緑
180° シアン
240° 青
300° マゼンタ

色相環

         0° 赤
    300°       60°
  マゼンタ       黄
  240°         120°
    青          緑
        180° シアン

5つの定番配色手法

1. モノクロマティック(単色配色)

同じ色相で、彩度と輝度だけを変える手法です。

:root {
  --primary-50: hsl(220, 100%, 97%);   /* 最も薄い青 */
  --primary-100: hsl(220, 100%, 94%);
  --primary-200: hsl(220, 100%, 88%);
  --primary-300: hsl(220, 100%, 78%);
  --primary-400: hsl(220, 100%, 68%);
  --primary-500: hsl(220, 100%, 58%);  /* ベースの青 */
  --primary-600: hsl(220, 100%, 48%);
  --primary-700: hsl(220, 100%, 38%);
  --primary-800: hsl(220, 100%, 28%);
  --primary-900: hsl(220, 100%, 18%);  /* 最も濃い青 */
}

適した場面:シンプル、プロフェッショナル、ブランド感が強い

2. アナロゴス(類似色配色)

色相環上で30°隣り合う色を使います。

:root {
  --analogous-1: hsl(200, 80%, 50%);  /* 青 */
  --analogous-2: hsl(220, 80%, 50%);  /* 青紫 */
  --analogous-3: hsl(240, 80%, 50%);  /* 紫 */
}

適した場面:調和がとれた、自然で温かみのあるデザイン

3. コンプリメンタリー(補色配色)

色相環上で180°向かい合う色を使います。

:root {
  --primary: hsl(220, 80%, 55%);    /* 青 */
  --complement: hsl(40, 80%, 55%);  /* オレンジ */
}

適した場面:高コントラスト、目を引く、CTAボタン

4. トライアディック(三角配色)

色相環上で120°ずつ等間隔に配置された3色を使います。

:root {
  --triadic-1: hsl(0, 70%, 55%);    /* 赤 */
  --triadic-2: hsl(120, 70%, 55%);  /* 緑 */
  --triadic-3: hsl(240, 70%, 55%);  /* 青 */
}

適した場面:活発でカラフル、子供向けプロダクト

5. スプリットコンプリメンタリー(分裂補色配色)

補色の両側30°の色を使います。

:root {
  --primary: hsl(220, 80%, 55%);     /* 青 */
  --split-1: hsl(10, 80%, 55%);      /* 赤オレンジ */
  --split-2: hsl(50, 80%, 55%);      /* 黄オレンジ */
}

適した場面:豊かでありながら散らからない、補色より柔らかい印象

WCAGコントラスト基準

コントラストの計算

コントラスト比 = (L1 + 0.05) / (L2 + 0.05)

L1 = 明るい色の相対輝度
L2 = 暗い色の相対輝度

相対輝度の計算:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
(R/G/B は事前に sRGB のリニア化が必要)

WCAG 2.1 基準

レベル 本文テキスト 大きなテキスト UIコンポーネント
AA 4.5:1 3:1 3:1
AAA 7:1 4.5:1 -

大きなテキスト:≥18pt(24px)または ≥14ptの太字

JavaScriptでコントラストをチェック

function getContrastRatio(color1: string, color2: string): number {
  const l1 = getRelativeLuminance(color1);
  const l2 = getRelativeLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

function getRelativeLuminance(hex: string): number {
  const rgb = hexToRgb(hex);
  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255]
    .map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function meetsWcagAA(fg: string, bg: string, isLargeText = false): boolean {
  const ratio = getContrastRatio(fg, bg);
  return isLargeText ? ratio >= 3 : ratio >= 4.5;
}

プロ級のカラーパレットを生成する

Tailwind CSS風のカラースケール

function generatePalette(baseHue: number, baseSat: number) {
  const lightnesses = [97, 94, 88, 78, 68, 58, 48, 38, 28, 18];
  return lightnesses.map((l, i) => ({
    name: `${(i) * 100}`,
    value: `hsl(${baseHue}, ${baseSat}%, ${l}%)`,
  }));
}

// 青のパレットを生成
const bluePalette = generatePalette(220, 80);
// 50: hsl(220, 80%, 97%)
// 100: hsl(220, 80%, 94%)
// ...
// 900: hsl(220, 80%, 18%)

OKLCH色空間(より均一)

/* OKLCHはHSLより知覚的に均一 */
:root {
  --blue-50: oklch(97% 0.01 250);
  --blue-500: oklch(62% 0.19 250);
  --blue-900: oklch(30% 0.12 250);
}
色空間 知覚の均一性 ブラウザ対応
HSL ❌ 不均一 すべて
OKLCH ✅ 均一 Chrome 111+, Safari 15.4+
OKLAB ✅ 均一 Chrome 111+, Safari 15.4+

ダークモードの配色

/* ライト */
:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
}

/* ダーク:単純な反転ではなくコントラストを下げる */
[data-theme="dark"] {
  --bg: #111827;
  --surface: #1f2937;
  --text: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #374151;
}

ダークモード配色の原則

  1. 純粋な黒 #000 は使わない:#111827 などのダークグレーを使う
  2. プライマリカラーの彩度を下げる:ダークモードで高彩度は眩しい
  3. コントラスト ≥ 4.5:1 を維持:WCAG AA基準
  4. シャドウはより暗い背景レイヤーに置き換える:ダークモードではシャドウが見えない

定番カラーパレット集

テック / SaaS

プライマリ:#3b82f6 (ブルー 500)
セカンダリ:#8b5cf6 (バイオレット 500)
アクセント:#06b6d4 (シアン 500)
背景:#f8fafc
テキスト:#0f172a

EC / コンシューマー

プライマリ:#f97316 (オレンジ 500)
セカンダリ:#ef4444 (レッド 500)
アクセント:#22c55e (グリーン 500)
背景:#ffffff
テキスト:#1f2937

金融 / プロフェッショナル

プライマリ:#1e40af (ブルー 800)
セカンダリ:#059669 (グリーン 600)
アクセント:#d97706 (アンバー 600)
背景:#f9fafb
テキスト:#111827

ToolsKuで配色を生成する

  1. カラー変換ツールまたはグラデーションジェネレーターを開く
  2. ベースカラーを選択
  3. カラースケール(50-900)を自動生成
  4. コントラストがWCAG AAを満たすかチェック
  5. ダークモードの効果をプレビュー
  6. CSS変数のコードをコピー

よくある質問

なぜ配色が「くすんで」見えるのか?

HSLでは明度が高い/低い領域で彩度の知覚が一定になりません。OKLCH色空間を使うと、よりクリーンなカラースケールを生成できます。

ダークモードで色が眩しすぎる?

彩度を20〜30%下げ、輝度を5〜10%上げます:

/* ライト */
--primary: hsl(220, 80%, 55%);

/* ダーク:彩度を下げる */
--primary: hsl(220, 60%, 65%);

色覚特性への配慮を確認するには?

  • 色だけに頼って情報を伝えない(アイコン/テキストを追加)
  • 赤緑の組み合わせは色覚特性に不親切なので、青とオレンジで代替
  • 色覚シミュレーターでテスト

まとめ

良い配色は、色彩理論 + コントラスト基準 + 実際のテストから生まれます。5つの定番配色手法、WCAGコントラスト基準、OKLCH色空間をマスターすれば、プロ級のカラーパレットを生成できます。覚えておいてほしいのは、配色はアートではなくエンジニアリングだということ。従うべき基準があり、測定できるツールがあるのです。

#调色板#颜色搭配#色彩理论#UI设计#教程