推荐用HSL格式定义主色系并配合CSS变量管理，如–brand-h、–brand-s、–brand-l，再通过hsl(var(–brand-h), var(–brand-s), var(–brand-l))生成颜色，便于统一调明暗、换主题和适配深色模式，避免十六进制硬编码导致维护困难。
用 hsl() 或 hsla() 替代 #rrggbb 管理主色系
十六进制写死颜色在改主题、调明暗、做深色模式时极其痛苦。比如把 #4a90e2（蓝色）调浅一点，人眼几乎无法判断该改成 #6aa1f2 还是 #5b9de5；而 hsl(208, 58%, 58%) 只需把 58% 明度调到 70% 就能清晰获得更亮的版本。
实际项目中建议将品牌主色统一定义为 hsl()，再通过 CSS 自定义属性注入：
:root {
--brand-h: 208;
--brand-s: 58%;
--brand-l: 58%;
--brand: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
--brand-light: hsl(var(--brand-h), var(--brand-s), 70%);
--brand-dark: hsl(var(--brand-h), var(--brand-s), 40%);
}
这样后续换色只需改三个数字，且所有衍生色自动同步更新。
禁用内联 rgb() 和无命名的 hsl() 值
直接写 color: rgb(74, 144, 226) 或 background: hsl(208, 58%, 58%) 会破坏可维护性——这类值无法被搜索定位，也不能被设计系统复用。一旦设计师说“把所有按钮蓝色统一变浅”，你得全局搜 74, 144, 226，还可能误伤其他地方。
立即学习“前端免费学习笔记（深入）”；
应始终通过语义化变量封装：
-
--color-primary表示主操作色（不是“蓝色”） -
--color-success表示成功状态（不是#4caf50） - 避免出现
--color-blue-500这类基于色值命名的变量，它把设计决策耦合进了命名
深色模式下优先用 color-scheme: light dark + prefers-color-scheme
硬编码两套 hsl() 值（如 --brand-light / --brand-dark）还不够。必须配合媒体查询响应系统偏好：
@media (prefers-color-scheme: dark) {
:root {
--brand-l: 42%;
--text-primary: hsl(0, 0%, 92%);
}
}
同时在 标签加上 color-scheme: light dark，让浏览器自动调整表单控件、滚动条等原生元素颜色。漏掉这句，input[type="range] 在 Safari 深色模式下仍显示亮色轨道。
透明度务必用 hsla() 或 rgba()，别用 opacity
opacity: 0.8 会让整个元素及其子节点一起变透明，常导致文字模糊、图标叠层异常；而 background: hsla(var(--brand-h), var(--brand-s), var(--brand-l), 0.1) 只影响背景，语义清晰、层级可控。
特别注意：rgba() 的 alpha 是数值（0–1），hsla() 的 alpha 同样是数值，不是百分比——写成 hsla(208, 58%, 58%, 10%) 是无效的，浏览器会忽略整条声明。
真正难的不是选哪种语法，而是坚持不让任何颜色值脱离语义变量体系。哪怕临时调试加了一行 border: 1px solid #ff6b6b，也要立刻补上 --color-warning-border 并替换掉——否则三个月后没人记得这个粉色对应什么状态。