Material DesignカラースケールをCSS変数で構築

CSSカスタムプロパティを使用してMaterial Design風のカラースケールを生成。単一のベースカラーから50〜950のシェードステップを作成します。

Color Scales

詳細な説明

Material Designカラースケールの構築

Material Designは10段階のカラースケール(50〜900)を使用して一貫したUIパレットを作成します。CSSカスタムプロパティを使えば、プリプロセッサなしでこのシステムを再現でき、実行時にカラーの保守と切り替えが容易になります。

シェード生成戦略

ベースカラーの色相彩度をHSLで固定し、明度軸をほぼ白からほぼ黒まで変化させてスケールを構築します:

:root {
  /* indigo scale */
  --indigo-50:  hsl(231, 48%, 97%);
  --indigo-100: hsl(231, 48%, 94%);
  --indigo-200: hsl(231, 48%, 86%);
  --indigo-300: hsl(231, 48%, 77%);
  --indigo-400: hsl(231, 48%, 66%);
  --indigo-500: hsl(231, 48%, 50%);
  --indigo-600: hsl(231, 48%, 40%);
  --indigo-700: hsl(231, 48%, 32%);
  --indigo-800: hsl(231, 48%, 24%);
  --indigo-900: hsl(231, 48%, 17%);
  --indigo-950: hsl(231, 48%, 10%);
}

なぜ11段階か?

追加の950ステップは、ダークモードの背景に不可欠なほぼ黒のトーンでオリジナルのMaterialパレットを拡張します。900と純粋な黒の間のギャップを埋め、急激なコントラストの変化を防ぎます。

コントラストの維持

各ステップは、意図されたテキストカラーに対して少なくとも4.5:1のコントラスト比を維持する必要があります。シェード50〜300は通常900テキストとペアにし、シェード600〜950は50テキストとペアにします。出荷前にコントラストチェッカーでペアリングをテストしてください。

コンポーネントでのスケール使用

ハードコードされた値の代わりにコンポーネントスタイルでスケールを参照します:

.button-primary {
  background: var(--indigo-500);
  color: var(--indigo-50);
}
.button-primary:hover {
  background: var(--indigo-600);
}

これにより、単一の変数ブロックを変更するだけでカラーファミリー全体を入れ替えることができます。

ユースケース

Material Designガイドラインに従うデザインシステム、または単一のベースカラーから一貫した明度ステップで体系的なマルチシェードカラーパレットが必要なプロジェクト。

試してみる — CSS Variable Generator

フルツールを開く