使用Sharp为无fill属性SVG上色：如何计算lightness或更优方案

最优实现方法 #

如果你的需求是把SVG中的黑色元素（无fill默认显示黑色）替换为指定的RGB目标色，无需调整lightness参数，直接使用composite配合in混合模式即可，这是最可靠的方式：

sharp('你的输入SVG路径')
  .composite([{
    // 创建与SVG尺寸匹配的纯色层（目标色）
    input: { 
      create: { 
        width: 1, 
        height: 1, 
        channels: 4, 
        background: { r: 255, g: 255, b: 0, alpha: 1 } // 替换为你的目标RGB
      } 
    },
    blend: 'in' // 仅在原SVG的不透明区域（黑色元素）显示目标色
  }])
  .png()
  .toFile('输出PNG路径');

这个方法的核心是利用in混合模式：只有原图像中存在像素的区域（黑色图标部分）会被目标色覆盖，透明背景保持不变，无论目标色是红色、黄色还是其他颜色，都能直接得到准确的结果。

关于你现有方法的问题解释 #

你之前使用modulate({ lightness: X }) + tint()的组合，本质是基于图像灰度值与目标色的乘法混合：

• 原SVG的黑色元素灰度值为0，modulate({ lightness: X })是将灰度值提升至X/100（比如X=50时，灰度值变为0.5）；
• tint()会将这个灰度值与目标色的RGB值相乘，得到最终颜色：(目标R * 灰度值, 目标G * 灰度值, 目标B * 灰度值)。

所以：

• 红色目标色(255,0,0)搭配lightness=50，得到的是暗红色(127,0,0)，你觉得“正确”是因为这个亮度符合你的预期；
• 黄色目标色(255,255,0)搭配lightness=50，得到的是暗黄色(127,127,0)（也就是你说的“脏棕色”），而lightness=100时，灰度值为1，相乘后得到纯黄色(255,255,0)。

如何计算对应lightness（若坚持使用原有方法） #

如果你希望通过原有方法得到指定亮度的目标色，需要先确定你想要的最终颜色的RGB值，再反推lightness：
假设最终颜色为(R_final, G_final, B_final)，目标色为(R_target, G_target, B_target)，则：

灰度值 = R_final / R_target = G_final / G_target = B_final / B_target
lightness = 灰度值 * 100

比如你想要纯黄色(255,255,0)，目标色也是(255,255,0)，则灰度值=1，lightness=100；如果你想要暗黄色(127,127,0)，则灰度值=0.5，lightness=50。

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