如何用纯CSS实现Material Design色调调色板？求CSS函数及最佳实践

核心结论 #

是的，调整HSL函数中的lightness（亮度）值是实现Material Design色调系统的核心思路，同时配合微调saturation（饱和度），就能基于同一色相生成完整的调色板。HSL/HSLA是最适合这类需求的CSS颜色函数，因为它的参数完全对应Material Design色调系统的三个维度：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。

具体实现方法 #

1. 用CSS变量统一管理基础色相

先定义主色相的变量，比如Material Design官方蓝色的色相为210°：

:root {
  --primary-hue: 210; /* 可替换为其他颜色的色相值 */
}

2. 基于HSL生成全系列色调

Material Design的调色板通常包含从50（最浅）到900（最深）的10个层级，每个层级通过调整饱和度和亮度实现：

/* 浅色调（亮度高，饱和度略降） */
.color-50 { color: hsl(var(--primary-hue), 100%, 98%); }
.color-100 { color: hsl(var(--primary-hue), 90%, 92%); }
.color-200 { color: hsl(var(--primary-hue), 80%, 80%); }
.color-300 { color: hsl(var(--primary-hue), 70%, 65%); }

/* 主色调（中等饱和度和亮度） */
.color-500 { color: hsl(var(--primary-hue), 100%, 50%); }

/* 深色调（亮度低，饱和度微调） */
.color-600 { color: hsl(var(--primary-hue), 100%, 40%); }
.color-700 { color: hsl(var(--primary-hue), 100%, 30%); }
.color-800 { color: hsl(var(--primary-hue), 100%, 20%); }
.color-900 { color: hsl(var(--primary-hue), 100%, 10%); }

3. 进阶：用color-mix()简化生成

CSS的color-mix()函数可以更直观地生成中间色调，无需手动计算亮度参数：

.color-50 { color: color-mix(in hsl, hsl(var(--primary-hue), 100%, 50%), white 95%); }
.color-900 { color: color-mix(in hsl, hsl(var(--primary-hue), 100%, 50%), black 80%); }

最佳实践 #

• 对齐官方规范：参考Material Design官方提供的色调数值（比如每个层级的饱和度、亮度参数），确保生成的调色板符合设计语言
• 变量优先：用CSS变量集中管理所有色调，后续修改色相或调整参数时只需改动一处，维护成本极低
• 可访问性检查：生成色调后，用浏览器开发者工具验证文本与背景的对比度，确保符合WCAG标准
• 动态主题支持：如果需要切换主题，只需修改--primary-hue变量，全系列色调会自动更新，无需重复定义

内容的提问来源于stack exchange，提问作者623