不能混用，浏览器会整个声明失效；CSS规范要求rgb()三个参数必须统一为0–255整数或0%–100%百分比，混用导致解析失败、属性被划掉、颜色回退。
rgb()函数里数字和百分比混用会怎样
直接说结论：不能混用，浏览器会整个声明失效。比如 rgb(255, 50%, 100) 看似合理，但实际被当作无效值，元素颜色退回到继承值或默认色（通常是透明黑）。
原因很简单：CSS规范要求 rgb() 的三个参数必须统一类型——要么全是 0–255 整数，要么全是 0%–100% 百分比。中间插一个百分号，解析器就卡住，不报错也不渲染。
- 常见错误现象：
color: rgb(128, 50%, 0);写完发现文字没变色，检查控制台也无报错，容易误以为是其他样式覆盖 - 调试建议：在开发者工具中看该 CSS 属性是否被划掉（strikethrough），划掉即表示解析失败
- 百分比换算口诀：100% = 255，50% = 128，20% ≈ 51，1% ≈ 2.55（向下取整后为 2 或 3）
为什么不用rgba()而坚持用rgb()调混合比
因为混合比这件事，本质是控制 R/G/B 三通道各自的强度，跟透明度无关。rgba() 第四个参数是 alpha，它影响的是“这团颜色盖上去之后透出多少背景”，不是“红绿蓝各自掺多少”。想调深红变浅红？改 R 值或整体缩放比例；想让红色更“冲”一点？提高 R 相对 G/B 的占比——这些都发生在 RGB 三维空间内，alpha 是垂直于这个空间的第四维。
- 典型误用场景：以为
rgba(255, 0, 0, 0.5)是“半饱和红”，其实它是“半透明纯红”，背景一变，视觉上就不是红了 - 真正调混合比的操作：比如要 70% 红 + 20% 绿 + 10% 蓝，对应
rgb(179, 51, 26)（255×0.7≈179，以此类推） - 注意：CSS 里没有内置“加权混合函数”，所有比例都要手动算成 0–255 或 0%–100% 后填进
rgb()
用 CSS 自定义属性动态调整 RGB 分量是否可行
可行，但得绕开 rgb() 的语法限制。不能写 rgb(var(--r), var(--g), var(--b))，因为 CSS 不支持在函数内插值变量（直到 color-mix() 和 hwb() 等新特性普及前，这是硬限制）。
立即学习“前端免费学习笔记（深入）”；
- 当前稳妥方案：用
color-mix()（Chrome 111+、Safari 16.4+ 支持），例如color-mix(in srgb, red 70%, green 20%, blue 10%) - 兼容性兜底方案：用 JS 动态拼字符串赋值给
style.color，比如el.style.color = `rgb(${r}, ${g}, ${b})` - 别踩的坑：试图用
@property声明number类型的自定义属性再塞进rgb()，依然无效——解析阶段变量还没代入，rgb()已经报错了
想做渐变混合时，rgb()数值怎么选才不突兀
人眼对亮度变化比对色相变化更敏感。直接线性插值 R/G/B 三值（比如从 rgb(255, 0, 0) 到 rgb(0, 255, 0)）会产生中间发灰、发褐的断层感，尤其在暗背景下明显。
- 真实可用技巧：先把起止色转成
lch()或oklch()，按亮度（L）、色度（C）、色调（H）分别插值，再转回 RGB 渲染——浏览器原生支持lch()，且color-mix(in lch, ...)就是干这事的 - 快速判断法：如果两个
rgb()值的亮度近似（可用0.2126*R + 0.7152*G + 0.0722*B粗略算），那它们之间线性过渡相对安全 - 容易被忽略的点：显示器 gamma 校正会让 128 看起来比 50% 亮度更暗，所以视觉上“等比混合”往往需要 R/G/B 各自乘上 2.2 次方再平均，再开 1/2.2 次方还原——这一步通常由
lch()底层处理，不必手算
