CSS原生支持HEX、RGB、HSL三种颜色格式，无需额外声明；常见错误是HEX多写#、RGB漏逗号、HSL缺%单位，导致样式静默失效；推荐HSL定义主题色变量便于系统性调整，HEX用于固定品牌色，RGB适用于透明度控制。
直接在 CSS 中写 HEX、RGB、HSL 颜色值就能用，不需要额外声明
浏览器原生支持这三种格式，只要赋值给 color、background-color、border-color 等接受颜色的属性，立刻生效。不用注册、不用导入、不依赖任何预处理器。
常见错误是把 #FF5733 写成 ##FF5733（多了一个 #），或把 rgb(255, 87, 51) 写成 rgb(255 87 51)（漏了逗号），导致样式失效且控制台不报错——浏览器直接忽略整条声明。
- HEX：必须以
#开头，6 位（如#FF5733）或 3 位缩写（如#F53），不区分大小写 - RGB：用
rgb(r, g, b)，每个值范围是0–255；带透明度用rgba(r, g, b, a)，其中a是0–1小数 - HSL：用
hsl(h, s%, l%)，h是 0–360 的色相角，s和l必须带%单位，漏掉会无效
HEX 最简洁，但调色困难；HSL 最适合系统性调整明暗和饱和度
比如想让所有主按钮从深蓝变成浅蓝，用 HEX 得手动换好几个值（#0A4D8C → #4A7DBD）；而 HSL 只需调 l%：从 hsl(210, 60%, 28%) 改成 hsl(210, 60%, 55%)，色相和饱和度不变，亮度提升，语义清晰且可预测。
RGB 在需要精确控制透明度时更直观（rgba(10, 77, 140, 0.8) 比 hsla(210, 60%, 28%, 0.8) 更易读），但无法单独调节“变亮”或“变灰”这类操作。
立即学习“前端免费学习笔记（深入）”；
- 团队协作中建议用 HSL 定义主题色变量，便于后续用 CSS 自定义属性统一管理
- HEX 适合固定品牌色（如 logo 色），复制粘贴方便，兼容性最好（IE8+）
- 避免混用：同一组件内别一会儿用
#0A4D8C，一会儿用rgb(10, 77, 140)，增加维护成本
在 CSS 自定义属性里统一管理颜色，比硬编码更灵活
把颜色抽成 --primary: hsl(210, 60%, 28%) 这样的变量，不仅方便全局替换，还能配合 calc() 动态微调。例如：background-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%))。
注意：自定义属性本身不解析颜色格式，它只是字符串容器。所以 --color-1: #0A4D8C 和 --color-2: hsl(210, 60%, 28%) 都合法，但不能写成 --color: hsl(210, 60%, calc(28% + 10%))——calc() 在 hsl() 内部不生效。
- 定义位置优先选
:root，确保全局可访问 - 变量名建议带语义，如
--text-primary、--bg-surface，而不是--blue-1 - 旧版 Safari 对 HSL 自定义属性的支持略滞后，如需兼容 iOS 13.3 以下，先测一下渲染是否准确
浏览器 DevTools 里可以直接点颜色块切换格式，但别全信实时转换结果
Chrome / Edge 的样式面板点击颜色值会弹出拾色器，并显示当前值对应的 HEX / RGB / HSL 表示。这个转换是近似的——尤其当原始值是 HSL 或带 alpha 的 RGBA 时，转成 HEX 会四舍五入丢精度（比如 hsl(210, 60%, 28.3%) 转成 HEX 后可能是 #0A4D8C，再转回 HSL 就变成 hsl(210, 60%, 28%)）。
- 调试时以源码写的格式为准，不要依赖 DevTools 显示的“等价”值去反推逻辑
- 颜色对比度检查工具（如 axe 或 Lighthouse）识别的是最终渲染色，不是你写的字符串格式
- 动画中频繁切换颜色格式（如从 HEX 插值到 HSL）可能触发重排，性能敏感场景建议统一用一种格式
