CSS颜色合法值仅限keyword、hex、rgb()/rgba()、hsl()/hsla()等原始语法；keyword语义受限且不支持alpha，hex/rgb/hsl更适合精确控制与动态交互。
CSS 颜色表示方式确实多，新手常在 rgb(255, 0, 0)、#ff0000、red、hsl(0, 100%, 50%) 之间反复横跳，不是记混就是改错地方。根本原因不是记不住，而是没理清它们各自的定位和约束条件。
哪些颜色值是浏览器真正支持的合法值
CSS 规范只认几类原始语法，其他都是这些的变体或别名。实际能直接写进 color、background 等属性里的，只有：
-
keyword：比如red、transparent、rebeccapurple（共 149 个标准关键字，大小写敏感，Red不合法） -
hex：3 位（#f00）、4 位（#f00a，含 alpha）、6 位（#ff0000）、8 位（#ff0000aa），不能有空格或前缀 -
rgb()/rgba()：数值范围是0–255或0%–100%，alpha 是0–1小数；rgba(255, 0, 0, 0.5)和rgb(100%, 0%, 0%)都合法，但rgb(256, 0, 0)会静默降为rgb(255, 0, 0) -
hsl()/hsla()：h 是0–360度（可省略单位），s/l 是0%–100%；注意hsl(0, 100%, 50%)是纯红，但hsl(0, 0%, 0%)是黑，不是灰——初学者常误以为 h=0 总是红 -
hwb()、lab()、lch()：现代浏览器支持（Chrome 117+、Firefox 120+），但不建议新手优先用，兼容性差且计算反直觉
什么时候该用 keyword，什么时候必须用 hex/rgb
关键字看着方便，但非常受限：
- 无法表达中间色：没有
lightish-blue或desaturated-green这种词，连darkgray和darkgrey都是不同颜色（前者偏蓝紫，后者偏青灰） - 语义易误导：
orange在 CSS 中是固定值#ffa500，不是你设计稿里那个更黄或更红的橙 - 团队协作时难对齐：设计师给的
#e63946，你写成crimson（#dc143c）会导致明显色差 - 唯一推荐用 keyword 的场景：系统级基础色，如
currentcolor、transparent、inherit，或明确要求语义化的按钮状态色（:disabled { background: gray; }）
alpha 透明度最容易踩的三个坑
加透明不等于“调淡”，理解错就会导致视觉失控：
立即学习“前端免费学习笔记（深入）”；
-
rgba(0, 0, 0, 0.5)是半透黑，叠加在白色背景上显示为灰色，但叠加在图片上会透出底图——而hsla(0, 0%, 0%, 0.5)效果相同，但hsl(0, 0%, 50%)是纯灰，完全不透明 -
#00000080（8 位 hex）和rgba(0, 0, 0, 0.5)数值等价，但前者不支持 IE，后者在旧 Safari 里可能被忽略 - 不要对 keyword 加 alpha：
red(0.5)不合法，必须写成rgba(255, 0, 0, 0.5)或#ff000080
新手建立判断习惯的最小行动清单
不用背全表，每次写颜色前快速过一遍：
- 这个色是不是设计系统里明确定义的？是 → 直接复制 HEX 或 RGB 值，别转 keyword
- 需要微调亮度或饱和度？→ 用
hsl()，改第二个（饱和度）或第三个（亮度）参数，比反复试rgb()数值快得多 - 要和 JS 动态交互（比如根据数据生成颜色）？→ 统一用
rgb()或hsl()字符串拼接，避免 keyword 查表开销 - 是否要适配深色模式？→ 别用
black/white，改用color-scheme: light dark+ 自定义属性，例如--bg: #ffffff; --bg-dark: #121212;
/* 示例：同一颜色的四种写法，效果一致但适用场景不同 */
.text-red { color: #f00; } /* 快速手写，无 alpha */
.text-red-alpha { color: #ff000080; } /* 需透明，现代项目首选 */
.text-red-semantic { color: red; } /* 仅用于示意“错误”语义，且接受色差 */
.text-red-dynamic {
color: hsl(0, 100%, 50%); /* 后续想用 JS 改 saturation，就从这里入手 */
}真正卡住人的从来不是颜色有多少种写法，而是没分清「哪一种在什么上下文里不会悄悄失效」。比如在 CSS 变量里存 --primary: red;，后面用 color: var(--primary); 看似没问题，但一旦要加透明，就得重写整个逻辑——这种隐性耦合，比记不住 hsl 参数难调试多了。
