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