ブランド色のシェードスケールを生成

純 CSS による完全なシェードスケール

モダンなデザインシステムは色ごとに 50–950 のシェードスケールを出荷 します。color-mix() を使えば、プリプロセッサ無しで 1 つの真実の源 トークンからこのスケールを派生できます。

:root {
  --brand-500: #2563eb;
}

:root {
  --brand-50:  color-mix(in oklch, var(--brand-500), white 92%);
  --brand-100: color-mix(in oklch, var(--brand-500), white 84%);
  --brand-200: color-mix(in oklch, var(--brand-500), white 68%);
  --brand-300: color-mix(in oklch, var(--brand-500), white 48%);
  --brand-400: color-mix(in oklch, var(--brand-500), white 24%);
  --brand-600: color-mix(in oklch, var(--brand-500), black 18%);
  --brand-700: color-mix(in oklch, var(--brand-500), black 36%);
  --brand-800: color-mix(in oklch, var(--brand-500), black 54%);
  --brand-900: color-mix(in oklch, var(--brand-500), black 72%);
  --brand-950: color-mix(in oklch, var(--brand-500), black 86%);

カーブの調整

上記の比率は OKLCH で測ったとき知覚的に均一なカーブを生みます。 ブランドごとに調整可能で、非常に明るい色 (黄色系) は低い側で白を 減らし、非常に暗い色 (深い青系) は高い側で黒を減らすとよいです。

currentColor と組み合わせてコンポーネントをテーマ化

スケールが変数として存在すれば、コンポーネントは次のように書けます：

.button {
  background: var(--brand-500);
}
.button:hover {
  background: var(--brand-600);
}

…そして 1 つの --brand-500 の差し替えですべてが再テーマ化されます。 CSS 変数ジェネレーター と組み合わせ れば、トークンの残りを scaffolding できます。