CSS十六进制颜色正确写法及示例

在CSS中，十六进制颜色值看似简单，却暗藏诸多易被忽视的规范细节：必须以#开头，严格采用3位（如#f53）或6位（如#FF5733）十六进制字符，不区分大小写，但绝不接受4位、5位、0x前缀或非十六进制字母等错误写法；它本身不支持透明度，需改用rgba()或新兴的8位hex（如#007bff80，注意兼容性）；真正导致“颜色不生效”的往往不是#后的代码写错，而是选择器未匹配、属性名拼写错误（如text-colour）、层叠优先级被覆盖，或复制粘贴引入不可见字符——掌握这些底层逻辑，才能高效调试、避免踩坑。

十六进制颜色值的基本写法

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 值本身很简单，真正出问题的地方往往不在“怎么写”，而在“写在哪”“被谁覆盖”“有没有被解析”。检查时优先确认选择器是否命中、属性名是否拼对、是否被更高优先级规则压制——而不是反复改 # 后面的字母。

本篇关于《CSS十六进制颜色正确写法及示例》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！