CSS 変数同士を混合する

color-mix() の中でカスタムプロパティを使う

color-mix() は CSS カスタムプロパティを含む任意の有効な色値を 受け入れます。これがパレットロジックを集中管理する最もクリーンな 方法です：

:root {
  --brand: #2563eb;
  --neutral: #71717a;
  --bg: white;
}

.button {
  background: var(--brand);
  border: 1px solid color-mix(in oklch, var(--brand), black 20%);
}

.button-secondary {
  background: color-mix(in oklch, var(--brand), var(--neutral) 60%);
}

.surface {
  background: color-mix(in oklch, var(--brand) 6%, var(--bg));
}

デザインチームが新しいブランド色を試したいとき、--brand を 切り替えれば派生システム全体が追従します。

型保証のために @property と組み合わせる

ブラウザがパース時に変数を検証するように、@property で登録できます：

@property --brand {
  syntax: "<color>";
  inherits: true;
  initial-value: #2563eb;
}

これで color-mix(in oklch, var(--brand), white 25%) は有効な色入力 であることが保証されます。

領域ごとにテーマ化

変数はカスケードします。親ブロックに --brand を設定すれば、その 領域だけ再テーマ化できます：

.promo-section { --brand: #ec4899; } /* このセクションだけピンク */

完全なトークンシステムを scaffolding するには CSS 変数ジェネレーター と組み合わせ ます。