十六进制颜色是字符串，不可直接运算；#rrggbbaa中aa为十六进制alpha值（如50对应31%透明度），非百分比；css不支持#rrggbb(50%)等写法，需转rgba()或css变量实现透明度控制。
十六进制颜色本身是字符串，不是可计算的颜色对象
CSS 里的 #ff6b6b 就是一串字符，浏览器解析时直接映射到 RGB 值（255,107,107），不带任何元数据或运算能力。你不能对它做“加透明度”这种操作，就像不能对 "hello" 直接调用 .toUpperAlpha(0.5) 一样——CSS 没提供这种字符串操作函数。
#RRGGBBAA 中的 AA 不是百分比，而是十六进制 Alpha 值
很多人误以为写 #ff6b6b50 就等于“50% 透明”，但 50 是十六进制，对应十进制 80，实际透明度是 80 / 255 ≈ 31%，不是 50%。真正 50% 透明度该填 7F（因为 255 × 0.5 = 127.5 → 取整 127 → 十六进制 7F）。
-
00= 完全透明（不是 0%） -
80≈ 50% 透明（0x80 = 128 → 128/255 ≈ 0.502） -
CC≈ 80% 不透明（即 20% 透明，0xCC = 204 → 204/255 ≈ 0.8）
没有语法支持 #rrggbb(50%) 或 #rrggbb[0.5] 这类写法
CSS Color Module Level 4 明确只定义了两种带透明度的十六进制格式：#RRGGBBAA 和简写 #RGBA（如 #f008）。不存在任何标准允许你在六位值后加括号、百分号或小数点。
- 写
color: #ff6b6b50—— 现代浏览器能解析，但它是#RRGGBBAA，不是“+50%” - 写
color: #ff6b6b(50%)—— 语法错误，整个声明被忽略 - 写
color: #ff6b6b0.5—— 同样非法，0.5不是十六进制数字
想用百分比控制透明度？必须转成 rgba() 或拆解为 CSS 变量
设计师说“主色 #3498db 加 30% 透明”，你没法原地改十六进制，得走转换路径：
- 手动算：#3498db → rgb(52,152,219) → rgba(52,152,219,0.3)
- 用 JS 工具函数：输入
#3498db和0.3，输出rgba(52,152,219,0.3)，注意校验输入是否为空、是否含空格、是否为 3 位简写 - 在 CSS 中拆变量：
--primary-r: 52; --primary-g: 152; --primary-b: 219;，再用rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.3)
真正容易被忽略的是：哪怕你用了 #RRGGBBAA，也得手动维护那两位 AA 值——它不会随你改一个百分比参数自动重算，每次调整都得换算一次十六进制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
