十六进制颜色合法写法为#RRGGBB（六位）或#RGB（三位），字符限0-9和a-f（不区分大小写）；七位、含非法字符或混用于rgba()等函数中均无效。
十六进制颜色怎么写才合法
不是所有带 # 的字符串浏览器都认。六位写法必须是 #RRGGBB，每位只能是 0-9 或 a-f（不区分大小写）；三位写法是简写，#RGB 等价于 #RRGGBB，比如 #f03 展开就是 #ff0033。
常见错误现象：
-
#ff00333（七位）→ 解析失败，整个颜色被忽略 -
#ff00gg（含非法字符g）→ 同样失效，回退到默认色 -
#F03写成大写没问题，但混用如#F0g会卡在g处截断
CSS里哪些地方能直接用#开头的颜色值
几乎所有接受颜色的 CSS 属性都支持，比如 color、background-color、border-color、box-shadow 的颜色部分。但注意：不能用在需要函数语法的地方，比如 rgba() 或 hsl() 的参数里——那里要填数字，不是字符串。
使用场景举例：
立即学习“前端免费学习笔记（深入）”；
-
color: #333;✅ 常用，简洁 -
border: 1px solid #ccc;✅ 简写高效 -
background: linear-gradient(#000, #fff);✅ 渐变起点终点都支持 -
color: rgba(#000, 0.5);❌ 语法错误，rgba()第一到三参数必须是 0–255 的数字
三位和六位写法有啥实际区别
没有渲染差异，只是书写长度不同。三位写法仅当 R/G/B 分量各自是双同值时才有效（如 #aabbcc 可简为 #abc），否则无法简写。
容易踩的坑：
-
#8b4513（巧克力色）不能简写成#8b4，因为b ≠ 4，4 ≠ 1，1 ≠ 3→ 浏览器会当作无效值处理 - 自动压缩工具（如 PostCSS）可能把六位转三位，但只对可简写的生效；手动乱简会悄悄破坏颜色
- 团队协作时，统一用六位更安全，避免有人误判可否简写
兼容性和性能影响几乎可以忽略
十六进制颜色从 CSS1 就支持，所有现代浏览器甚至 IE6 都能正确解析。它比 rgb() 或命名色（如 red）更紧凑，但性能差异微乎其微，不用为此做取舍。
真正要注意的是可维护性：
- 纯黑写成
#000没问题，但#000000更利于后续替换成变量或 HSL - 如果项目用了 CSS 自定义属性或主题系统，硬编码
#值会让换色成本变高 - 设计师给的色值如果是
#FF6B6B，别手抖改成#ff6b6b再提交——大小写混用虽合法，但 Git diff 会显得多余
#，就基本不会出错。 
