配色需承担信息层级、交互反馈和品牌识别三重作用，须用CSS变量系统化管理，命名语义化，保障可访问性对比度，并与深色模式、排印、阴影等协同演进。
配色不是选几个好看的颜色堆上去，而是让颜色承担信息层级、交互反馈和品牌识别三重作用。直接套用「莫兰迪色卡」或「渐变紫+荧光绿」大概率导致文字看不清、按钮没点击欲、整站显得廉价。
如何用 CSS 变量系统化管理配色
硬编码 #4a6fa5 或 hsl(210, 30%, 55%) 会让后续调整成本飙升。CSS 自定义属性（变量）是唯一可持续的方案，且原生支持 cascade 和 :root 范围控制。
- 所有主色、中性色、状态色统一定义在
:root下，命名体现语义而非物理值，例如--color-primary、--color-text-secondary、--color-success - 避免使用
--color-blue-500这类基于色板编号的命名，它无法表达用途，一旦设计系统升级蓝系，所有引用处都得手动排查 - 中性色建议按功能分层：文本（
--color-text-primary/--color-text-secondary）、背景（--color-bg-surface/--color-bg-overlay）、边框（--color-border-subtle），而非只分深浅
:root {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-text-primary: #1e293b;
--color-text-secondary: #64748b;
--color-bg-surface: #ffffff;
--color-bg-muted: #f8fafc;
--color-border-subtle: #e2e8f0;
--color-danger: #ef4444;
}
确保可访问性的最小对比度实操检查
WCAG AA 级要求：正常文本（≤18pt 或 ≤14pt 加粗）与背景对比度 ≥ 4.5:1；大文本 ≥ 3:1。这不是“建议”，而是影响屏幕阅读器用户能否读取按钮文字的关键阈值。
- 别信眼睛——用浏览器插件（如 axe DevTools）或在线工具（WebAIM Contrast Checker）输入
rgb(255, 255, 255)和#334155实时验算，不是靠感觉说“应该够白” - 悬停态颜色必须重新验证对比度，
--color-primary-hover常比基础色更暗，可能跌破 4.5:1 - 禁用状态（
disabled）的按钮文本常被设为#94a3b8+ 白底，实际对比度仅 ~2.8:1，应改用更深灰（如#475569）并降低透明度替代
响应式配色适配深色模式的正确写法
@media (prefers-color-scheme: dark) 不是简单把所有 background-color 改成黑。深色模式下，纯黑（#000000）会加剧视觉疲劳，且阴影、浮层、文字层次全需重构。
立即学习“前端免费学习笔记（深入）”；
- 深色背景不用
#000，改用#0f172a（slate-900）或#1e293b（slate-800），保留色彩温度和层次感 - 文字颜色不能直接反色（如白字变黑字），深色模式下
--color-text-primary应设为#e2e8f0，--color-text-secondary设为#94a3b8，否则灰度过高导致辨识困难 - 慎用
color-scheme: dark—— 它仅提示浏览器表单控件样式，不接管自定义组件，真正生效靠媒体查询 + 变量重定义
@media (prefers-color-scheme: dark) {
:root {
--color-bg-surface: #0f172a;
--color-bg-muted: #1e293b;
--color-text-primary: #e2e8f0;
--color-text-secondary: #94a3b8;
--color-border-subtle: #334155;
}
}
最常被忽略的一点：配色方案必须和字体排印、间距系统、阴影深度同步演进。一个 --shadow-sm 在浅色模式下是 0 1px 2px rgba(0,0,0,0.05)，到了深色模式若不改成 0 1px 2px rgba(0,0,0,0.3)，卡片就会“浮不起来”。颜色从来不是孤立存在的参数。
