中性色系统需用hsl(0,0%,X%)统一定义明度，避免HEX灰阶跳变；推荐明度值：96%（背景）、85%（边框）、72%（次要文本）、50%（常规文本）、30%（禁用态），并为深色模式单独设定12%–64%区间。
中性色系统不是选几个“看起来不抢眼”的灰就行，关键在于灰阶统一、明度可预测、跨设备一致。直接用 #f8f9fa 和 #e9ecef 搭配，很可能在 OLED 屏上发灰，在低亮度 iPad 上糊成一片。
为什么用 HSL 定义中性色比 HEX 更可靠
HSL 的 lightness 参数是线性可控的明度值（0%–100%），而 HEX 灰色如 #999、#ccc 在不同色域下实际亮度跳变明显——尤其当页面开启深色模式或用户开了 Windows 高对比度设置时，#e0e0e0 可能和背景只剩 5:1 对比度，文字直接不可读。
- 推荐统一用
hsl(0, 0%, X%)定义整套中性灰，X 取值建议：96%（背景）、85%（边框）、72%（次要文本）、50%（常规文本）、30%（图标/禁用态） - 避免混用
hsl()和hex，比如border: 1px solid #e0e0e0和color: hsl(0, 0%, 72%)—— 后者在 CSS 变量里可继承、可计算，前者是硬编码死值 - 所有中性色必须基于同一色相（
hsl(0, 0%, ...)）和零饱和度，否则会偏冷或偏暖，破坏“中性”前提
如何用 CSS 自定义属性搭建可维护的中性色系统
把中性色写进 :root，不是为了炫技，而是让 border、outline、hr、placeholder 全部复用同一套明度逻辑，改一个值就能全局响应。
- 在
style.css或<style>块顶部定义：
:root {
--neutral-bg: hsl(0, 0%, 96%);
--neutral-border: hsl(0, 0%, 85%);
--neutral-text-secondary: hsl(0, 0%, 72%);
--neutral-text-primary: hsl(0, 0%, 50%);
--neutral-disabled: hsl(0, 0%, 30%);
}
- 调用时别再写
color: #6c757d，统一用color: var(--neutral-text-secondary) - 注意：如果项目已用
postcss-custom-properties或构建工具处理变量，请确认它支持 HSL 值（部分旧版插件会把hsl(0,0%,96%)错误转成 HEX）
中性色在深色模式下的适配陷阱
很多人以为“中性色 = 浅灰”，结果深色模式一开，--neutral-bg: hsl(0, 0%, 96%) 变成刺眼白块。中性色系统必须包含深色分支，且不能简单反向映射。
立即学习“前端免费学习笔记（深入）”；
- 深色模式下，中性色应以
hsl(0, 0%, 12%)为基底（非纯黑#000），往上推：24%（卡片背景）、36%（边框）、48%（主文本）、64%（次要文本） - 用
@media (prefers-color-scheme: dark)覆盖变量，别用 JS 切换 class——CSS 媒体查询触发更快，且 SSR 友好 - 测试重点不是“看起来像不像深色”，而是检查
input::placeholder和button:disabled是否仍保有足够对比度（至少 4.5:1）
真正难的不是写出一套灰，而是确保这套灰在任何屏幕、任何系统偏好、任何缩放比例下，都能维持清晰的视觉层级。一旦开始用 hsl(0, 0%, X%) + var(--neutral-xxx)，你就已经绕开了 80% 的中性色翻车现场。
