HEX颜色合法写法必须以#开头且后接3位或6位十六进制字符（0–9、a–f，大小写不敏感）；3位简写仅当RR=GG=BB时成立；八位#RRGGBBAA支持透明度但需注意浏览器兼容性；颜色失效多因CSS层叠或选择器问题而非色值本身。
HEX颜色怎么写才合法？
必须以 # 开头，后面只能跟 3 位或 6 位十六进制字符（0–9 和 a–f，大小写不敏感），其他写法浏览器直接忽略。
-
#ff0合法 → 等价于#ffff00（黄色） -
#1a2b3c合法 → 完整六位，红=1a（26）、绿=2b（43）、蓝=3c（60） -
#1234、#12345、0xff0000、#ff0000（末尾空格）全部非法
常见错误：复制设计稿色值时多带空格或引号；用取色器导出带 0x 前缀的值；手误写成 4/5 位——这些都不会报错，但颜色根本不会生效。
#RGB 简写到底怎么用？
只有当原始六位值满足「RR = GG = BB」时，才能缩成三位，比如 #000 ← #000000，#fff ← #ffffff，#39c ← #3399cc。
-
#FF5733不能简写，因为FF≠57≠33 -
#FAE可以，它展开是#FFAAEE，不是#F0A0E0 - 团队协作建议统一风格：全用六位（兼容性稳），或只对灰阶/品牌主色用三位（如
#333、#007bff）
别为了省两个字符强行简写——#09c 看起来像“蓝”，实际是 #0099cc（青蓝），和直觉有偏差，容易调错。
立即学习“前端免费学习笔记（深入）”；
想加透明度，能直接在 HEX 后面补两位吗？
可以，但得用八位格式 #RRGGBBAA，比如 #007bff80（蓝色 + ~50% 不透明），这是 CSS Color Module Level 4 标准，2026 年已广泛支持，但仍有坑：
- Safari 15.4+ 才稳定支持，旧版 Safari 和所有 IE 版本完全不识别
- 若需兼容老浏览器，必须降级为
rgba(0, 123, 255, 0.5) -
#007bff.5或#007bff50%是无效语法，会被整个丢弃
实操建议：日常开发可放心用八位 HEX，但上线前务必查一下目标用户环境的浏览器占比；CI 流程里加个 lint 规则，禁止出现 rgba() 和八位 HEX 混用。
颜色没变？别只盯着 # 后面的字母
HEX 写对了，颜色却没显示——问题几乎从不在色值本身，而在 CSS 层叠或选择器失效。
- 检查开发者工具「Computed」面板，看
color或background-color是否真被设成了你写的值 - 看「Styles」面板里那行是否被划掉（表示语法错误或被更高优先级规则覆盖）
- 常见覆盖场景：
div p { color: #333; }会盖过p { color: #f00; }；拼错属性名如text-colour（英式拼写）
真正难调试的从来不是「#FF5733 是什么色」，而是「为什么写了它却没起作用」——先确认选择器命中、属性名正确、没被覆盖，再回头改色值。
