颜色代码失效主因是语法不规范或兼容性问题：十六进制缩写需满足每组数字自身重复（如#f63→#ff6633），#1234非法；rgba()的alpha必须为0–1小数，命名色无透明度且部分跨平台不一致，优先级和opacity也会影响最终呈现。
直接写对颜色代码不难，难的是写完发现没生效、透明度失效、或者换台设备颜色就偏了。核心问题从来不是“怎么写”，而是“为什么浏览器不认你写的”。
十六进制写法必须满足缩写前提，#123 不等于 #112233
很多人以为 #f63 是 #ff6633 的简写，没错——但仅当每组数字**自身重复**时才成立：#f63 → #ff6633，#abc → #aabbcc。而 #1234 这种四字符写法根本不是标准，所有浏览器都会忽略它；#123 能生效，是因为它被解析为 #112233，不是靠“猜”，是靠规则。
-
#f0f合法，等价于#ff00ff -
#ff00ff合法，六位全显式更稳妥 -
#f0f8非法，会被丢弃（不是八进制，也不是 CSS Color Level 4 的八位格式） -
#ff00ff80在现代浏览器中可能生效（CSS Color Module Level 4），但 IE 完全不支持，别指望兼容
rgba() 的 alpha 参数必须是 0–1 小数，不是百分比或整数
写 rgba(255, 0, 0, 50%) 或 rgba(255, 0, 0, 50) 都会失败——前者语法错误，后者被当作无效值处理，浏览器回退到默认色或继承色。alpha 是一个归一化通道，0 表示全透明，1 表示不透明。
- 半透红色：用
rgba(255, 0, 0, 0.5)，不是0.5写成50或50% - IE8 及更早版本不支持
rgba()，必须加 fallback：color: red; color: rgba(255, 0, 0, 0.7); - 动态生成时注意 JS 字符串拼接：不要写成
`rgba(${r}, ${g}, ${b}, ${opacity * 100}%)`
命名色看似简单，但兼容性和语义风险比想象中高
W3C 定义了 140+ 个命名色，但实际能稳定用的，建议只选前 20 个高频名（如 red、blue、tomato、rebeccapurple）。不是所有名字都跨平台一致：gray 在 CSS 中是 #808080，但旧版 macOS 渲染曾把它映射为 #777；orange 在某些安卓 WebView 中偏黄。
- 命名色一律不支持透明度：
color: tomato;没法加 alpha，要透明就得换rgba()或hsla() - 拼写必须精确：
darkgrey和darkgray都合法，但值不同（darkgrey是#a9a9a9，darkgray是同一色，实际是同义词；但lightgoldenrodyellow少个字母就彻底失效） - 避免用
transparent当颜色值来“清空”背景——它不是“无色”，而是带 alpha=0 的黑色，有时会干扰混合模式
最常被忽略的一点：颜色是否生效，往往和 background-color 无关，而是被更高优先级的样式（比如内联 style="background-color: #000"）、!important、或者父元素的 opacity 拖累。调试时先看开发者工具的 Computed 面板里最终计算出的值，再反推哪一层覆盖了你写的颜色代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
