hex颜色值合法格式仅有#rrggbb（6位）和#rgb（3位简写），如#ff0000、#f00；漏#、4/5位、空格或0x前缀均无效且被浏览器静默忽略。
直接写 # 开头的 3 位或 6 位十六进制字符就能用，浏览器原生支持，不用转、不用声明、不报错——但写错格式会静默失效。
HEX颜色值的合法格式有哪些
CSS 只认两种格式：#rrggbb（6 位）和 #rgb（3 位简写），其余全是无效值。
-
#ff0000、#00ff00、#0000ff是标准写法，每两位分别对应红、绿、蓝通道 -
#f00等价于#ff0000，#abc等价于#aabbcc；但#f0f0或#12345这类 4 位、5 位写法会被整个丢弃 - 漏掉
#（如写成ff0000）或混入空格（如# ff0000）也会被忽略 - 设计稿里常见的
0xFFA500是编程语言风格，CSS 中必须去掉0x→ 改为#ffa500
哪些CSS属性能直接用HEX值
所有接受颜色值的属性都支持 HEX，但不是所有颜色相关功能都能靠它实现。
- 可用：
color、background-color、border-color、outline-color、fill（SVG）、stroke（SVG） - 不可用：
opacity不接受 HEX；它只认 0–1 的数字，比如opacity: 0.5 - 透明度要加？得换格式：
rgba(0, 123, 255, 0.5)或 8 位 HEX#007bff80（Chrome 72+/Firefox 63+/Safari 15.4+ 支持，IE 完全不支持） - 别写
#007bff.5或#007bff50%—— 这些不是标准语法，浏览器直接忽略
HEX值没生效？先查这三处
浏览器不会报“HEX 错误”，而是静默跳过。颜色没变，大概率不是 HEX 本身的问题，而是上下文出错了。
- 选择器没匹配上：比如写了
.btnn { color: #007bff; }，但 HTML 里 class 是btn - 被更高优先级规则覆盖：例如
div p { color: #333; }会盖过p { color: #f00; } - 属性名拼错：
text-colour（英式拼写）不被识别，必须是color - 复制粘贴带入了不可见字符（比如零宽空格），建议手动重输
#开头的部分
用CSS变量管理HEX值时要注意什么
变量本身不解决格式问题，但能放大错误影响范围——定义错一次，全局都错。
- 必须在
:root或有效作用域里定义，比如：:root { --primary: #007bff; } - 使用时必须配合
var()函数：color: var(--primary);，不能直接写color: --primary; - 变量值里不能带单位或额外符号，
--primary: #007bff;合法，--primary: "#007bff";或--primary: #007bff !important;都非法 - 如果主题色来自 Display P3 色域的设计稿，单纯复制 HEX 值在宽色域屏上可能发灰——这不是写法问题，得靠
color(display-p3)或校准流程解决
真正容易被忽略的是：HEX 值没有 alpha、没有色彩空间声明、也不带语义。它只是 sRGB 下的一串静态编码。你复制它、粘贴它、用它，都没问题；但一旦涉及透明、宽色域、设计系统协同，就得跳出 HEX 看更底层的约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
