rgb()函数不接受百分比作为颜色分量值——实际支持但需严格换算：50%等价于128，100%为255；混用单位会导致声明失效；真按比例混合应使用color-mix()。
百分比在 rgb() 里根本不能用
直接说结论：rgb() 函数不接受百分比作为颜色分量值——哪怕你写成 rgb(50%, 0%, 100%)，浏览器也会当作无效声明丢弃。CSS 规范里明确要求 rgb() 的三个参数必须是 number（0–255 整数）或 percentage（0%–100%），但注意：这里的“百分比”不是“颜色比例”的自由缩放，而是对 0–255 区间的等比例映射，即 50% 等价于 128，100% 等价于 255，0% 是 0。
常见错误现象：rgb(25%, 50%, 75%) 看起来像“取四分之一红、一半绿、四分之三蓝”，但实际渲染的是 rgb(64, 128, 191)，和直觉中的“比例控制”无关；更糟的是，如果混用单位（比如 rgb(100, 50%, 200)），整个声明会失效。
- 只用整数：稳妥、兼容性好，
rgb(34, 139, 34)（森林绿） - 只用百分比：语义清晰但易误解，
rgb(13%, 55%, 13%)≈rgb(33, 140, 33)，适合设计系统中统一用百分比表达“相对强度” - 别混用：一旦出现
rgb(100, 50%, 200)，Chrome/Firefox 都会跳过该样式
想真正按比例混合颜色？用 color-mix()（现代方案）
color-mix() 才是 CSS 中真正支持“颜色比例混合”的函数，它能按指定权重把两种（及以上）颜色线性插值。它目前在 Chrome 111+、Safari 16.4+、Firefox 119+ 支持，Edge 同步 Chromium 版本即可。
使用场景：主题色渐变过渡、状态色微调（如 hover 时加 10% 主色）、灰度图叠加色调。
立即学习“前端免费学习笔记（深入）”；
- 语法是
color-mix(in srgb, <color-1><percentage>, <color-2><percentage>)</percentage></color-2></percentage></color-1> - 两个百分比加起来必须为 100%，比如
color-mix(in srgb, red 30%, blue 70%) - 不支持单色 + 百分比“提亮/降暗”，那得用
color()或oklch()转换空间 - 旧浏览器 fallback 必须写：先定义
color: blue;，再覆盖color: color-mix(...);
button {
color: blue;
color: color-mix(in srgb, blue 80%, white 20%);
}
为什么不用 hsl() 或 oklch() 控制“比例”？
hsl() 的 lightness 和 saturation 看似是“比例”，但它们不是线性颜色混合比例，而是色彩模型内部参数。调高 lightness: 80% 不等于“混入 80% 白色”，而是在 HSL 圆柱体上沿明度轴移动，结果受色相影响极大（比如 hsl(0, 100%, 80%) 是浅粉，不是浅红）。
oklch() 更接近人眼感知，其中 chroma（色度）和 lightness 可调，但它依然不是“两种颜色的混合比例”，而是单色的坐标定位。
- 需要“红 + 黄 = 橙”的混合效果？必须用
color-mix() - 只想让一个颜色变浅？
color-mix(in srgb, 70%, white 30%)比调hsl()的lightness更可预测 - 想兼容老浏览器？回到
rgba()叠加半透层，或预计算好目标色值
真要手算 rgb 百分比对应值？记住这个换算关系
如果你在写构建脚本、PostCSS 插件，或者调试时需要手动验证，rgb(a) 中的百分比换算是严格线性的：value = round(percentage × 255 / 100)。不是四舍五入到小数，而是取整到最接近的整数。
-
0%→0，1%→3（因为 255×0.01=2.55→3） -
33%→84（255×0.33=84.15→84），不是 85 -
66%→168（255×0.66=168.3→168） - 反向推算：看到
rgb(204, 102, 51)，除以 255 得80%, 40%, 20%，可读性确实更高
复杂点在于：不同渲染引擎对舍入的实现完全一致，但设计师给的“50%透明度”这种说法，和 rgb() 百分比毫无关系——那是 opacity 或 alpha 通道的事。别被“百分比”这个词带偏了方向。
