React可复用颜色选择器：基于鼠标坐标计算RGB值的问题

你的颜色选择器是白色背景叠加两层渐变：右到左的蓝色渐变、下到上的黑色渐变，需要按照CSS渐变的叠加规则推导正确的RGB计算逻辑：

1. 蓝色渐变（gradient1）的影响：从右侧（x=255）的纯蓝色（#00f，rgb(0,0,255)）到左侧（x=0）的透明。由于渐变的红、绿通道为0，叠加后红、绿通道的基础值会被削弱为 255 - x，蓝色通道保持白色的255（渐变蓝与白色蓝数值一致）。
2. 黑色渐变（gradient2）的影响：从底部（y=255）的纯黑色（rgb(0,0,0)）到顶部（y=0）的透明。它会按比例衰减所有通道的数值，衰减比例为 (255 - y)/255（y越大，黑色越浓，通道值越低）。

结合两层渐变的叠加效果，正确的颜色计算函数如下：

function calculateColor(x: number, y: number) {
  const baseRG = 255 - x;
  const decayRatio = (255 - y) / 255;
  const r = Math.round(baseRG * decayRatio);
  const g = Math.round(baseRG * decayRatio);
  const b = 255 - y;
          
  return `rgb(${r}, ${g}, ${b})`;
}

验证目标值 #

针对你提到的目标颜色rgb(32,32,99)，代入公式验证：

• 蓝色通道：255 - y = 99 → y = 255 - 99 = 156
• 衰减比例：(255 - 156)/255 ≈ 0.388
• 红绿通道：(255 - x) * 0.388 = 32 → x ≈ 255 - 82.47 = 172.53

取x=173、y=156时，计算出的红、绿通道值约为32，与目标值完全匹配。

内容的提问来源于stack exchange，提问作者user22857059