十六进制颜色值必须以#开头，后接3位或6位十六进制字符（如#ff0或#1a2b3c），不支持4位、5位或带0x前缀等写法；透明度需用rgba()或8位hex（如#007bff80），传统#rrggbb不支持alpha。
十六进制颜色值的基本写法
CSS 中的十六进制颜色必须以 # 开头，后面跟 3 位或 6 位十六进制字符（0–9 和 a–f，不区分大小写）。浏览器只认这种格式，其他写法（比如漏掉 #、多加空格、用 0x 前缀）都会被忽略。
-
#ff0是合法的缩写形式，等价于#ffff00（黄色） -
#f0f→#ff00ff（品红） -
#1a2b3c是完整 6 位写法，每位分别表示红、绿、蓝通道 -
#1234或#12345是无效格式，CSS 不支持 4 位或 5 位 hex
CSS 中写在哪里都一样，但要注意作用域和优先级
hex 值本身没有“写法错误”，但常因选择器失效、拼写错误或层叠覆盖导致颜色没生效。比如：
- 写在未匹配的选择器里（
.btnn { color: #007bff; }，但 HTML class 是btn） - 被更具体的选择器覆盖（
div p { color: #333; }覆盖了p { color: #f00; }） - 属性名写错（
text-colour: #000;→ 应为color，英式拼写不被识别）
透明度怎么加？不能直接在 hex 后加 alpha
CSS 的传统 #rrggbb 不支持透明度。想带 alpha，得换用其他格式：
- 用
rgba()：例如rgba(0, 123, 255, 0.5) - 用 8 位 hex（CSS Color Module Level 4）：
#007bff80（前 6 位是颜色，后 2 位是 alpha，80≈ 50% 透明）——但注意：IE 完全不支持，Safari 15.4+ 才开始稳定支持 - 避免写成
#007bff.5或#007bff50%，这些不是标准语法，会被丢弃
常见报错和调试建议
浏览器开发者工具不会报“hex 格式错误”，而是静默忽略非法值。排查时重点看 computed 样式里 color 等属性是否显示为预期颜色，以及 styles 面板中该行是否被划掉（表示无效）。
立即学习“前端免费学习笔记（深入）”；
- 复制粘贴 hex 值时容易带入不可见字符（如零宽空格），建议手动重输
#开头 - 设计稿给的
0xFFA500是编程语言风格，CSS 中必须去掉0x→ 写成#ffa500 - 变量里用 hex？可以，但需配合
var(--primary-color)和:root { --primary-color: #007bff; }，不能写成--primary-color: #007bff;却在别的地方漏定义
:root {
--brand-blue: #007bff;
}
.button {
background-color: var(--brand-blue);
color: #fff;
}
hex 值本身很简单，真正出问题的地方往往不在“怎么写”，而在“写在哪”“被谁覆盖”“有没有被解析”。检查时优先确认选择器是否命中、属性名是否拼对、是否被更高优先级规则压制——而不是反复改 # 后面的字母。
