HEX颜色值以#开头，支持3位或6位十六进制字符，所有现代浏览器原生支持；可直接用于color、background-color等颜色属性，但不支持opacity；混用时需注意色彩空间与兼容性差异。
HEX 颜色值直接写在 CSS 属性里就能用，不需要额外转换或声明。它本质就是一种简写且兼容性极强的颜色编码方式，所有现代浏览器（包括 IE9+）都原生支持。
HEX 颜色的格式与合法写法
CSS 中的 HEX 颜色必须以 # 开头，后接 3 位或 6 位十六进制字符（0–9 和 a–f，不区分大小写）。3 位是 6 位的简写形式，例如 #f00 等价于 #ff0000；#abc 等价于 #aabbcc。
常见错误包括：
- 漏掉
#（如写成ff0000→ 浏览器忽略该声明） - 混用大写和小写字母导致拼写误判（虽不报错，但易读性差，建议统一用小写）
- 写 4 位或 5 位（如
#1234）→ 无效，会被整个丢弃
在哪些 CSS 属性中可以直接使用 HEX 值
所有接受颜色值的属性都支持 HEX，最常用的是：
立即学习“前端免费学习笔记（深入）”；
-
color（文字颜色）：如color: #333; -
background-color：如background-color: #eef; -
border-color：如border: 1px solid #ccc; -
outline-color、fill（SVG）、stroke等
注意：opacity 不接受 HEX，它只接受 0–1 的数值；若需透明度，得换用 rgba() 或 8 位 HEX（如 #rrggbbaa，但仅支持 Chrome 72+/Firefox 63+，IE 完全不支持）。
HEX 和 RGB / HSL 混用时要注意什么
CSS 允许在同一份样式表中混合使用 #fff、rgb(255, 255, 255)、hsl(0, 0%, 100%)，但它们不是等价替换关系：
- HEX 是静态值，无法直接表达 alpha 通道（除非用 8 位 HEX，但兼容性受限）
- RGB 支持
rgb(255, 0, 0)和rgb(100%, 0%, 0%)两种写法，后者会做 gamma 校正，结果略不同 - HEX 转 RGB 无损，但 RGB 转 HEX 会四舍五入到最近整数，比如
rgb(255.4, 0.6, 127.9)→#ff0080
实际项目中，如果设计系统已定稿为 HEX（如品牌色 #2563eb），就别中途换成 rgb()，否则容易因手动计算出错或工具链解析不一致导致颜色偏移。
真正容易被忽略的是：HEX 值本身不携带色彩空间信息，浏览器按 sRGB 解释。如果你在宽色域显示器上调试，而设计稿基于 Display P3，那单纯复制 HEX 可能看起来发灰——这时候得靠 color(display-p3 ...) 或图像校准，而不是改 HEX 写法。
