背景色“脏”或“刺眼”源于明度、饱和度、色相搭配失衡，而非颜色本身；应使用HSL系统化调控（主背景L=85–98、S=0–12%），严控对比度≥4.5:1，同页背景功能层级≤3种，相邻元素H差≥15°且L差≥5%，深色模式需同步调整border与shadow。
为什么 background-color 看起来“脏”或“刺眼”
不是颜色本身有问题，而是缺乏明度、饱和度和色相的系统搭配。常见现象包括：background-color: #ff6b6b 搭配 color: #333 时文字发灰看不清；background-color: #e0f7fa 和 border: 1px solid #00acc1 并列时产生视觉抖动；或者多个区块用不同浅色背景（如 #f8f9fa、#eef2f7、#f5f5f5）却看不出层级。
用 HSL 而不是 HEX 快速校准背景色
HEX 难以直观判断冷暖、轻重，HSL 可直接控制：H（色相）、S（饱和度）、L（明度）。项目中多数背景应落在 L=85–98 之间，S 控制在 0–12%（中性灰）或 4–10%（带倾向的米白/浅蓝灰），避免使用 hsl(0, 0%, 99%)（发亮刺眼）或 hsl(210, 8%, 82%)（灰中带浊，易显旧）。
- 主背景推荐：
hsl(0, 0%, 98%)（干净白）、hsl(210, 4%, 96%)（偏冷不僵硬） - 卡片/模块背景建议比主背景降低 3–5 个明度点，例如主背景是
hsl(0, 0%, 98%)，卡片用hsl(0, 0%, 95%) - 慎用高饱和背景（如
hsl(120, 60%, 90%)），它会严重干扰文字可读性和视觉节奏
检查 contrast ratio 是否达标（尤其浅色背景+浅灰字）
即使看着“差不多”，background-color: #f9fafb + color: #6b7280 的对比度可能只有 2.1:1，远低于 WCAG AA 要求的 4.5:1。别靠肉眼估，用浏览器开发者工具的“无障碍”面板实时测，或输入值到在线工具（如 webaim.org/contrast-checker）验证。
/* 错误示例：对比不足 */
.card {
background-color: #f9fafb;
color: #9ca3af; /* 太浅，对比度仅 ~2.8:1 */
}
<p>/<em> 调整后（保持柔和感但达标） </em>/
.card {
background-color: #f9fafb;
color: #1f2937; /<em> 深灰，对比度 ~12:1，仍属柔和不生硬 </em>/
}同一页面中背景色数量不要超过 3 种语义级
不是指“用了几个 HEX 值”，而是指承担不同功能的背景层级。比如：body 一种（全局底色）、.card 一种（内容容器）、.highlight 一种（临时强调）。多出的所谓“设计感”色块（如侧边栏用 #f0f9ff、按钮 hover 用 #e0f2fe、状态标签用 #fff7ed）实际增加认知负担，且极易因明度接近导致层次消失。
立即学习“前端免费学习笔记（深入）”；
- 优先复用同一 HSL 基础色，只调 L（明度）：例如基色
hsl(215, 8%, 94%)→ 卡片hsl(215, 8%, 92%)→ 悬停hsl(215, 8%, 90%) - 避免在相邻元素上使用 H 相差小于 15° 且 L 相差小于 5% 的组合（人眼难分辨差异）
- 深色模式切换时，别只改
background-color，同步检查border-color和box-shadow的明度是否匹配，否则会出现“背景换了但边框浮在上面”的割裂感
真正卡住的往往不是选哪个色，而是没意识到：背景不是“填色”，而是空间定义者——它要让文字可读、让组件可分、让交互有反馈。调一个 background-color 前，先问它在这一页里“承担什么角色”。
