十六进制颜色值必须为3、4、6或8位，否则浏览器静默忽略；推荐统一用6位格式并避免字符串拼接生成，以确保兼容性与精度。
十六进制颜色值必须是3位、4位、6位或8位，少一位或多一位都不生效
浏览器对 #rgb、#rgba、#rrggbb、#rrggbbaa 有严格解析规则。比如写成 #12345（5位）或 #12（2位），CSS会直接忽略该声明，元素保持默认色或继承色，不会报错，也不提示——这是最常被忽视的“静默失效”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
#abc等价于#aabbcc，适合快速手写灰阶或高对比色，但别指望它能表达微妙差异 - 需要透明度时优先用
#rrggbbaa（如#ff000080表示半透红），比rgba()更简洁，且支持所有现代浏览器（Chrome 93+、Firefox 99+、Safari 15.4+） - 避免用大写或混合大小写（如
#FF00aa），虽然合法，但团队协作中易引发格式争议，统一小写更稳妥
alpha通道的8位十六进制（#rrggbbaa）不是所有旧环境都支持
IE 完全不认 #rrggbbaa，Android 4.3 及更早 WebView 也会回退为不透明色。如果项目需兼容这些环境，不能只靠十六进制控透明度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 查目标用户 UA 分布，若仍有 >0.5% 的 Android 4.x 流量，就改用
rgba(255, 0, 0, 0.5)+filter: alpha(opacity=50)（仅 IE8）双写 - PostCSS 插件
postcss-color-hex-alpha可自动补出rgba()回退，但注意它不处理 IE8 的 filter - CSS 自定义属性里不能直接写
#rrggbbaa当变量值（如--primary: #007bff80），部分旧版 Safari 会解析失败，建议改用--primary-rgb: 0, 123, 255+rgba(var(--primary-rgb), 0.5)
颜色精度陷阱：#000 和 #000000 渲染结果可能不同
听起来荒谬，但真实存在：某些嵌入式设备、旧打印机驱动或低功耗 OLED 屏幕的 CSS 渲染引擎，对短格式 #rgb 的扩展逻辑不一致，导致 #000 被扩成 #000000，而 #fff 却扩成 #ffffff——这本身没问题；但若混用 #000 和 #000000 在同一组件中，极少数场景下会出现亚像素级色差（尤其在 border + background 交界处）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 团队代码规范强制统一用 6 位格式（
#000000而非#000），可配合 ESLint 插件stylelint-color-no-hex-name和stylelint-color-hex-length检查 - 设计系统中定义主色时，直接存 6 位值，避免从 Figma 插件导出时因“自动缩写”引入
#rgb - 做深色模式切换时，别用 JS 字符串拼接生成十六进制（如
"#" + r.toString(16) + g.toString(16) + b.toString(16)），容易漏补零，改用("#" + ((r
十六进制无法表达 HSL 或可访问性校验所需的中间态
如果你要动态调亮一个品牌色用于 hover 态，或检查文字与背景的对比度是否达标（WCAG AA/AAA），光靠 #007bff 是没法算的——它不带语义，也没法直接加减亮度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把源色存在 CSS 变量里用
--brand-h: 204、--brand-s: 100%、--brand-l: 50%，再用lighten()（Sass）或color-mix()（原生 CSS，Chrome 111+）调控 - 自动化对比度检测工具（如 axe-core、Lighthouse）输入的是 RGB 值，不是十六进制字符串，解析时记得先转
parseInt("007bff", 16)再拆通道 - CI 流程中加入 color-contrast 检查（例如用
stylelint-a11y插件），它会把#007bff和#ffffff自动转为 Lab 色彩空间比对，比人眼判断可靠得多
