17370845950

优先用HEX表示固定色值，HSL适合动态调色与主题，RGBA用于透明及JS交互，现代项目可试点lch()提升色彩精度。

选颜色写法，核心看要不要调色、是否需要透明、团队协作是否统一。hex 最简洁适合固定色值，rgb/hsl 更适合动态调整或带透明度的场景。

固定品牌色、图标色用 HEX

品牌主色、按钮边框、字体颜色这类几乎不变化的值，用 #333、#FF6B35 这类 3 位或 6 位十六进制最直接。它体积小、可读性高、兼容性好，所有浏览器都支持，也方便设计师给值（设计稿里通常就是 hex）。

• 3 位简写（如 #fff）适合纯黑、白、灰和常见基础色
• 6 位（如 #4A90E2）更精确，推荐日常使用
• 避免混用大小写（#FF0000 和 #ff0000 效果一样，但统一小写更易维护）

要改亮度/饱和度或做主题色时优先 HSL

HSL（色相、饱和度、明度）符合人眼直觉。比如想让一个蓝色按钮变浅一点，把 hsl(210, 70%, 50%) 改成 hsl(210, 70%, 85%) 就行；换主题色只需调 h 值，不用反复试 rgb 数字。

• 适合 CSS 变量定义主题：--primary: hsl(210, 70%, 50%); --primary-light: hsl(210, 70%, 85%);
• 配合 calc() 动态计算也很自然，比如 hsl(calc(var(--base-h) + 30), 80%, 60%)
• 注意旧版 IE 不支持 hsl，如需兼容 IE11 及以下，慎用

需要透明度或与 JS 交互时用 RGB（含 rgba）

rgba 是目前最通用的透明方案（比 opacity 更精准，不影响子元素）。而且 JavaScript 获取或计算颜色时，rgb 格式天然友好——getComputedStyle 返回的就是 rgb()，用 parseInt 拆解 R/G/B 值也比解析 hex 简单。

• 半透明遮罩层：background-color: rgba(0, 0, 0, 0.6);
• 渐变中混入透明色：linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0))
• JS 动态控制颜色深浅？用 rgb(${r}, ${g}, ${b}) 拼接比 hex 计算更稳妥

现代项目可以统一用 color() 或 lch()（进阶推荐）

CSS Color Level 4 新增了 color(display-p3 ...) 和 lch()，后者基于人眼感知均匀的色彩空间，调色更准确（比如等量改变 L 值，明度变化看起来更一致）。不过目前 Safari 支持最好，Chrome/Firefox 需开启 flag 或等待稳定支持。

• 适合对色彩精度要求高的 UI，如数据可视化、设计系统
• 建议先用 HSL 做基础，再在关键组件中试点 lch()
• 搭配 PostCSS 插件（如 postcss-color-function）可降级兼容