named颜色是w3c定义的140个rgb固定别名，如tomato恒为rgb(255,99,71)；js中需用getcomputedstyle获取计算后rgb()值，不可读style.color；rgba()不支持颜色名，须先查rgb再手动转换。
Named颜色在CSS中本质就是RGB别名
浏览器解析 red、darkslategray 这类颜色时，内部直接映射为固定RGB值，不是运行时计算出来的。所以“转换”其实是查表——你不需要写JS或调用函数，只要知道标准定义即可。
W3C定义了140个标准Named颜色（CSS Color Module Level 3），每个都对应唯一RGB三元组。例如：tomato 永远是 rgb(255, 99, 71)，不会因设备或上下文变化。
用getComputedStyle在运行时提取RGB值
如果元素已用Named颜色声明（比如 color: rebeccapurple;），想在JS中拿到它的RGB数值，必须通过计算样式获取，不能直接读取CSS文本——因为原始值被浏览器转义了。
- 先用
getComputedStyle(el).color获取计算后的颜色值，结果通常是rgb(102, 51, 153)或rgba(102, 51, 153, 1) - 注意：IE返回
rgb()，但旧版Safari可能返回十六进制（极少见），现代浏览器统一为rgb()格式 - 不要依赖
el.style.color，它只读内联样式，且返回原始字符串（如"rebeccapurple"），无法直接转数字
手动查表或用工具避免硬编码
硬记140个颜色的RGB值不现实，也不可靠。实际开发中建议：
- 查W3C官方表格（搜索 “CSS named colors rgb values”），或直接看MDN的
color页面，带完整RGB/HEX对照 - 需要批量转换时，用现成的JSON数据源，比如 meodai/css-color-names 提供的
color-names.json - 警惕非标准名称：像
coolblue或crimsonred不是合法Named颜色，浏览器会当作无效值处理，退回到继承色或默认色
RGBA与透明度带来的小陷阱
Named颜色本身不支持alpha通道，但CSS允许在使用时叠加透明度，比如 color: rgba(red, 0.5); —— 这是非法写法！rgba() 的第一个参数只接受数字，不接受颜色名。
正确做法是：
- 先确认Named颜色的RGB值（如
red → rgb(255, 0, 0)） - 再显式写成
rgba(255, 0, 0, 0.5) - 或者用
color-mix()（新特性，支持color-mix(in srgb, red 50%, transparent)），但兼容性有限
别指望浏览器帮你把 red 自动“升格”成带alpha的版本——它连解析都不会通过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
