掌握十六进制（#rrggbb/#rgb）、rgb()/rgba()、命名色三种写法即可：十六进制缩写需满足每组数字重复，rgba()的alpha必须为0–1小数，命名色推荐用w3c前20个高频名。
html 颜色不用记“大全”，掌握三种可靠写法就够了：十六进制、rgb()、命名色——其他都是它们的变体或兼容性妥协。
十六进制颜色怎么写才不翻车
最常用也最容易出错。不是所有 #fff 都等于 #ffffff，浏览器虽能容错，但缩写规则有严格前提：必须是每组两位重复（#f0f → #ff00ff），#1234 这种四字符写法根本无效，会被忽略。
-
#rgb和#rrggbb都合法，但#rgb要求每个字母/数字都重复一次（#abc等价于#aabbcc） - 大小写不敏感，
#FF0000和#ff0000效果一样，但团队协作建议统一小写 - Alpha 通道不能直接加在十六进制后面（
#ff000080是无效的），要用rgba()或八位十六进制（#ff000080在 CSS Color Module Level 4 中支持，但 IE 完全不认）
rgb() 和 rgba() 的参数陷阱
rgb() 看似简单，但参数类型和取值范围容易混淆：三个参数可以是 0–255 的整数，也可以是 0%–100% 的百分比，但不能混用（rgb(255, 50%, 0) 会直接失效）。rgba() 第四个参数是 alpha，必须是 0–1 的小数，不是 0–100 的百分比。
-
rgb(255, 0, 0)和rgb(100%, 0%, 0%)都合法，效果相同 -
rgba(255, 0, 0, 0.5)正确；rgba(255, 0, 0, 50%)错误；rgba(255, 0, 0, 50)也错误 - IE8 及更早版本不支持
rgba()，若需兼容，得配 fallback 色（如先写color: red;再写color: rgba(255,0,0,0.5);）
命名色有哪些真能用，哪些该避开
CSS 标准定义了 140+ 个命名色（如 tomato、rebeccapurple），但实际可用性取决于浏览器支持。像 orange、blue、black 这类基础名没问题；而 darkslategray 这种带连字符的，拼错一个字母（比如少个 a）就回退到默认色，且无报错提示。
立即学习“前端免费学习笔记（深入）”；
- 命名色全部不支持透明度，
color: tomato;就是纯色，没法直接加 alpha - 部分名字存在歧义：CSS 里
gray是#808080，但 windows 系统色里的gray是#808080，而老式 Mac 的gray曾指#777—— 不同上下文含义可能不同 - 推荐只用 W3C 标准列表前 20 个高频名（
red、green、blue、black、white等），其余优先用十六进制或 rgb
真正麻烦的不是写法本身，而是同一套颜色在不同设备、不同浏览器渲染引擎下肉眼可见的偏差——比如 #00ff00 在 OLED 屏上比 LCD 更刺眼，而 hsl() 虽然语义清晰，但旧版 safari 对它的解析曾有 bug。颜色这事，写对只是起点。