HEX颜色值必须严格写成#RRGGBB或#RGB格式，漏井号、位数错误（如#RRGGB）、混用大小写或非标准简写（如#f635）均会导致失效；RGBA的alpha参数须为0–1小数而非百分比；HSL更直观因可独立调节色相、饱和度、明度。
HEX 颜色值怎么写才不出错
HEX 是最常用也最容易写错的颜色格式，本质是十六进制的 RGB 缩写，必须严格满足 #RRGGBB 或简写 #RGB 形式。常见错误是漏掉井号、混用大小写（虽然不报错但易读性差）、或写成 #RRGGB 这类位数不对的值。
-
#ff6b35✅ 正确：6 位，全小写更稳妥 -
ff6b35❌ 缺少#，浏览器当无效值忽略 -
#FF6B35⚠️ 合法但建议统一小写，避免团队协作时风格混乱 -
#f63✅ 简写合法，等价于#ff6633；但#f635❌ 4 位不是标准 HEX，会被忽略
RGB 和 RGBA 的透明度陷阱
rgb() 本身不支持透明，想加 alpha 必须用 rgba() —— 这是新手最常漏掉的细节。而且 rgba() 的第四个参数是 0–1 的浮点数，不是百分比，写成 rgba(255, 107, 53, 50%) 会直接失效。
-
rgb(255, 107, 53)✅ 纯色，三参数均为 0–255 整数 -
rgba(255, 107, 53, 0.6)✅ 半透，alpha=0.6 -
rgba(255, 107, 53, 60)❌ 数值超范围，整条声明被丢弃 -
rgba(255, 107, 53, 60%)❌ CSS 不接受百分比形式的 alpha，仅支持小数
HSL 为什么调色更直观
hsl() 把颜色拆成「色相（H）」「饱和度（S）」「明度（L）」，比 RGB 更符合人眼对色彩的直觉。比如想让一个蓝色变浅一点，调高 L 就行；想让它更灰，就压低 S。而 RGB 改一个值往往牵连多个通道，容易失衡。
-
hsl(12, 100%, 60%)→ 暖橙色；hsl(12, 100%, 80%)→ 更亮的同色系橙 -
hsl(210, 70%, 50%)→ 饱和蓝；hsl(210, 30%, 50%)→ 灰蓝，饱和度降了 - H 范围是 0–360（度），S 和 L 是百分比，注意不要写成
hsl(210, 70, 50)（缺 % 符号） - IE9+ 支持
hsl()，但 IE8 及更早只认 HEX/RGB，需按需回退
选颜色值类型的关键判断点
没有“最好”的格式，只有“更适合当前场景”的格式。真正影响决策的是可维护性、协作习惯和功能需求。
立即学习“前端免费学习笔记（深入）”；
- 需要精确复用品牌色？用变量名 + HEX，比如
--primary: #ff6b35，语义清晰又兼容老浏览器 - 要做渐变或动态调整明暗？优先 HSL，
lighten()类函数在预处理器里才好写，纯 CSS 里靠hsl()手动微调也比 RGB 直观 - 要叠加半透明遮罩？RGBA 是刚需，HEX 不支持 alpha，HSLA 也可用但不如 RGBA 普遍
- 团队用设计系统？确认是否已定义颜色 token，别自己另起一套 HEX 值，哪怕它“看起来一样”
实际项目里经常混用：主色用 HEX 定义变量，状态色用 HSL 基于主色推导，按钮悬停用 RGBA 加一层透明黑。关键不是统一格式，而是统一逻辑。
