RGB调色深浅需等比缩放R、G、B三通道值，保持色相不变；纯灰阶要求R=G=B；CSS中可用calc()配合变量动态调节，或优选HSL的L值或brightness()滤镜实现更语义化的明度控制。
用 RGB 数值精确控制颜色深浅，核心是调整三个通道（R、G、B）的数值比例与整体亮度水平。RGB 中每个通道取值范围是 0–255，数值越低颜色越暗，越高越亮；若三通道等比例增减，色相不变，只改变明度（即“深浅”）。
理解 RGB 与亮度的关系
纯灰阶（如 #808080）就是 R=G=B 的结果。当 R=G=B=0 时为纯黑，R=G=B=255 时为纯白。只要保持三值相等，就能得到同一色相下的不同深浅——比如 (100, 100, 100) 比 (180, 180, 180) 更深，但都是灰色系。
手动调亮/调暗一个已有 RGB 颜色
对非灰阶色（如蓝色 (0, 102, 204)），想变浅又不偏色，可按比例提升各通道值，但不能超过 255；想变深则等比降低，但不能低于 0。
- 调亮示例：原色 (0, 102, 204)，乘以系数 1.2 → (0, 122, 245)，四舍五入后仍有效
- 调暗示例：原色 (0, 102, 204)，乘以系数 0.7 → (0, 71, 143)
- 注意：直接加减固定值（如全+20）会改变色相，尤其在某通道接近边界时（如 R=250 再+20 就溢出）
用 CSS 自定义属性 + calc() 实现动态明度调节
借助 CSS 变量和 calc()，可在运行时灵活调整亮度：
立即学习“前端免费学习笔记（深入）”；
:root {
--r: 0;
--g: 102;
--b: 204;
--lightness: 0.8; /* 0.5=原色，<0.5变暗，>0.5变亮 */
}
<p>.my-btn {
background-color: rgb(
calc(var(--r) <em> var(--lightness)),
calc(var(--g) </em> var(--lightness)),
calc(var(--b) * var(--lightness))
);
}⚠️ 注意：calc() 中的数值需为整数，浏览器会自动取整；--lightness 建议控制在 0.2–1.4 范围内，避免截断失真。
更稳妥的替代方案：hsl() 与 brightness() 滤镜
若目标是语义化控深浅，推荐优先使用 HSL：
- HSL 中的 L（Lightness）直接对应明度，例如 hsl(210, 100%, 40%) 比 hsl(210, 100%, 60%) 更深，且色相饱和度不变
- 或用 filter: brightness(1.2) 简单提亮容器，但它是作用于渲染后的整体效果，可能影响子元素和透明度
