2025年対応！CSS LCHカラーを使った美しい配色のコツ完全ガイド

/* LCHカラーの基本記法 */
.example {
color: lch(50% 130 20);
background-color: lch(90% 132 130);
border-color: lch(70% 100 240 / 0.8); /* アルファ値付き */
}

C = sqrt(a² + b²)
h = arctan(b/a) × (180/π)

/* 段階的なフォールバック実装 */
:root {
/* レベル1: 基本的なフォールバック */
--primary-color: #6366f1;

/* レベル2: LCHサポート時の上書き */
--primary-color: lch(59% 0.18 264);
}

@supports (color: lch(50% 100 200)) {
  .modern-color {
  background-color: lch(70% 120 180);
  }
}

@supports not (color: lch(50% 100 200)) {
  .modern-color {
  background-color: #4a90e2; /* フォールバック色 */
  }
}

:root {
/* ブランドプライマリカラー */
--brand-primary: lch(59% 0.18 264); /* 青系 */
--brand-secondary: lch(70% 0.15 120); /* 緑系 */
--brand-accent: lch(65% 0.20 45); /* オレンジ系 */
}

:root {
--base-color: lch(60% 120 200);

/* 明度を調整したバリエーション */
--color-light: lch(from var(--base-color) calc(l + 20) c h);
--color-dark: lch(from var(--base-color) calc(l - 20) c h);

/* 彩度を調整したバリエーション */
--color-muted: lch(from var(--base-color) l calc(c * 0.5) h);
--color-vivid: lch(from var(--base-color) l calc(c * 1.3) h);

/* 補色の生成 */
--color-complement: lch(from var(--base-color) l c calc(h + 180deg));
}

/* アクセシビリティを考慮したカラーパレット */
:root {
/* 明度を段階的に調整 */
--color-50: lch(95% 20 200);
--color-100: lch(90% 25 200);
--color-200: lch(80% 35 200);
--color-300: lch(70% 45 200);
--color-400: lch(60% 55 200);
--color-500: lch(50% 65 200); /* ベースカラー */
--color-600: lch(45% 60 200);
--color-700: lch(40% 55 200);
--color-800: lch(35% 45 200);
--color-900: lch(25% 35 200);
}

/* アクセシビリティを考慮したテキストカラー */
.accessible-text {
/* 背景色 */
background-color: lch(90% 20 200);

/* WCAG AA準拠のテキスト色（コントラスト比 4.5:1以上） */
color: lch(25% 15 200);
}

.high-contrast-text {
background-color: lch(95% 10 180);
/* WCAG AAA準拠（コントラスト比 7:1以上） */
color: lch(15% 20 180);
}

/* 色覚障害に配慮したステータス表示 */
.status-success {
background-color: lch(75% 60 130); /* 緑系・明るめ */
border-left: 4px solid lch(45% 80 130); /* より濃い緑でボーダー */
}

.status-error {
background-color: lch(75% 60 20); /* 赤系・同じ明度 */
border-left: 4px solid lch(45% 80 20); /* より濃い赤でボーダー */
}

.status-warning {
background-color: lch(75% 60 80); /* 黄系・同じ明度 */
border-left: 4px solid lch(45% 80 80); /* より濃い黄でボーダー */
}

/* ライト・ダークテーマ対応 */
:root {
--bg-lightness: 95%;
--text-lightness: 15%;
--accent-chroma: 80;
--accent-hue: 200;
}

[data-theme="dark"] {
--bg-lightness: 10%;
--text-lightness: 90%;
--accent-chroma: 60;
}

.adaptive-colors {
background-color: lch(var(--bg-lightness) 5 220);
color: lch(var(--text-lightness) 10 220);
accent-color: lch(60% var(--accent-chroma) var(--accent-hue));
}

/* ガマット外の色を避ける安全な値の例 */
.safe-colors {
/* 彩度を控えめに設定 */
--safe-blue: lch(50% 80 240);    /* 安全な青 */
--safe-red: lch(50% 80 20);      /* 安全な赤 */
--safe-green: lch(50% 80 130);   /* 安全な緑 */
}

/* CSS Custom Propertiesでのパフォーマンス最適化 */
:root {
/* 頻繁に使用する色を事前定義 */
--lch-primary: lch(59% 0.18 264);
--lch-secondary: lch(70% 0.15 120);
}

/* 計算の多い相対色は必要な箇所のみで使用 */
.special-component {
background: lch(from var(--lch-primary) calc(l + 10) c h);
}