合法十六进制颜色值必须以#开头，后接3位（如#f00）或6位（如#ff0000）十六进制数字，不区分大小写；4位、7位、8位及缺#均无效。
十六进制颜色值在 css 中怎么写才合法
十六进制颜色必须以 # 开头，后面跟 3 位（如 #f00）或 6 位（如 #ff0000）十六进制数字，不区分大小写。浏览器会把 #f00 自动扩展为 #ff0000，但不要写成 #ff00（4 位）或 #fff0000（7 位），这些是无效的。
常见错误：#ff00000（多一位）、ff0000（缺 #）、#FF0000FF（8 位不是标准 hex，是 hex + alpha 的非标准写法，应改用 #ff000080 或 rgba()）。
实际建议：
- 团队项目中统一用 6 位写法（如
#3a86ff），避免缩写带来的可读性差异 - 需要透明度时，不要强行用 8 位 hex（如
#3a86ff80），它只在部分现代浏览器支持，且不是所有工具链能解析，优先用rgba()或hsla() - 设计系统中若需提取主色变量，用 6 位更利于正则匹配和自动化处理
RGB 和 RGBA 的参数范围与常见误用
rgb() 接收三个 0–255 的整数或 0%–100% 的百分比，rgba() 第四个参数是 0–1 的小数（不是百分比）。很多人写成 rgba(255, 0, 0, 50%) 或 rgba(255, 0, 0, 50)，这会导致整个声明失效。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 动态生成颜色时（比如 js 计算亮度后调整 alpha），
rgba()比 hex 更直接，不用转进制 - 需要做颜色插值动画（如 hover 渐变透明度），
rgba()在 CSS transition 中兼容性更好，而 hex 不支持 alpha 动画 - 服务端渲染或 CSS-in-JS 中，拼接
rgb(${r}, ${g}, ${b})比拼 hex 字符串更少出错
HSL 和 HSLA 为什么更适合调色逻辑
HSL 的三个维度（色相 h、饱和度 s、明度 l）更贴近人眼对颜色的感知。比如想让一个蓝色按钮“变亮一点”，直接把 l 从 50% 改成 70% 就行；换成 RGB，你得同时调三个通道，还容易偏色。
关键细节：
-
h是 0–360 的无单位数字（不是度数符号），s和l必须带%，漏掉会无效（如hsl(240, 100, 50)错，应为hsl(240, 100%, 50%)） - HSLA 的 alpha 参数和 RGBA 一样，是 0–1 小数，不是百分比
- 某些旧版 safari 对
hsl()解析有 bug（尤其在 calc() 内嵌套时），如需兼容 ios 12 以下，先测hsl(0, 0%, 100%)是否正常显示白色
不同颜色格式对 CSS 变量和自定义属性的影响
CSS 自定义属性（--color-primary: #3a86ff）本身不解析颜色值，只是字符串。但当你在 var(--color-primary) 中使用它时，浏览器会在计算时校验格式——如果变量存的是 hsl(240 100% 50%)（新语法，空格分隔），老浏览器会直接忽略；而 hsl(240, 100%, 50%)（逗号分隔）兼容性更好。
工程实践建议：
- 定义主题色变量时，优先用
hsl()格式（如--primary-h: 240; --primary-s: 100%; --primary-l: 50%），方便用hsl(var(--primary-h), var(--primary-s), var(--primary-l))组合，也利于 dark mode 切换（只改--primary-l） - 避免在 CSS 变量里存带 alpha 的 hex（如
--bg: #3a86ff80），因为无法被color-mix()或contrast()等新函数识别 - postcss 或构建工具中若启用了颜色函数转换（如 postcss-color-function），注意它默认只处理
rgb()/hsl()，不处理 hex，所以 hex 值不会被自动降级或补全
真正难的不是记住哪几种写法，而是当你要把设计稿里的一个「带透明度的浅灰」同步到组件库、又得兼顾暗色模式和低版本 android webview 时，得立刻判断该用 hsla() 拆解明度，还是用 rgba() 固定通道，或者干脆退回到两个独立的 hex 变量。