CSS颜色关键字最省事，直接用red、blue等16个基础色名兼容性最好；扩展色名需备选值；currentColor特殊；关键字无透明度，需转rgba/hsla；不适用于设计系统。
用 color 和 background-color 直接写关键字就行
CSS 里定义颜色，最省事的方式就是用浏览器内置的关键字，比如 red、blue、transparent。它们不用记十六进制或 RGB 值，写起来快，读起来也直观。
但得注意：这些关键字是大小写不敏感的（Red 和 red 都行），但惯例全小写；而且不是所有“听起来像颜色”的词都合法——比如 lightblue 是有效的，但 light-blue 或 light blue 就会失效。
-
color: red;→ 文字变红色 -
background-color: aliceblue;→ 背景用淡天蓝 -
border-color: rebeccapurple;→ 边框用 Rebecca 紫（这个是后来加的，IE 不支持）
16 个基础色名在所有浏览器都稳，别乱试生僻名
CSS 2.1 规定了 16 个经典关键字，从 black 到 white，包括 aqua、fuchsia、lime 这些带点复古感的名字。它们在 IE6+、Chrome、Firefox、Safari 全部原生支持，没兼容性风险。
而 CSS3 新增了 140 多个扩展色名（比如 darkseagreen、honeydew），虽然现代浏览器基本都认，但旧版 Safari 或某些嵌入式 WebView 可能解析失败， fallback 机制又不会自动降级——它就直接当无效值扔掉，变成默认色（通常是黑色或透明）。
立即学习“前端免费学习笔记（深入）”；
- 稳妥组合：只用这 16 个：
black,silver,gray,white,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,teal,aqua - 想用新名字？加个备用值：
color: #e0f7fa; color: lightseagreen;（后者覆盖前者，但顺序不能反） -
currentColor是个特殊关键字，代表当前元素的color值，常用于 SVG 或边框继承文字色，别把它和普通色名混着用
关键字不支持透明度，要 alpha 就得换 rgba() 或 hsla()
所有颜色关键字都是纯色，没有透明通道。你写 color: red; opacity: 0.5; 是可以的，但它影响整个元素（包括子元素），不是“红+半透”这个颜色本身。
如果真需要某个关键字色带透明度（比如 “半透的 blue”），必须转成数值形式：
-
blue对应rgb(0, 0, 255)→ 半透写成rgba(0, 0, 255, 0.3) - 或者用
hsl()更直观：hsl(240, 100%, 50%)是 blue，加 alpha 就是hsla(240, 100%, 50%, 0.3) - 别写
color: blue(0.3);—— 这语法根本不存在，浏览器直接忽略整条声明
别把关键字当设计系统源头，它只是快捷入口
项目里真要管颜色，靠关键字撑不了多久。它没法做明暗变化（比如 lighter red）、没法批量替换、没法对接设计稿的 HEX 值，更没法做主题切换。
关键字适合快速原型、临时调试、或者教学示例。一旦开始写组件库或维护多主题 UI，就得上 CSS 自定义属性（--primary-color: #4285f4;）或预处理器变量。
顺手提一句：system-ui 是字体关键字，不是颜色关键字——有人搜“CSS 系统色”会误点进来，它和颜色无关，别往 color 里填它。
