不透明色调作为 Javascript 中 rgba 值的十六进制值答案

【问题标题】：Opaque tone as hex value from rgba value in Javascript不透明色调作为 Javascript 中 rgba 值的十六进制值
【发布时间】：2019-10-01 06:56:56
【问题描述】：

我正在寻找一种方法，该方法将采用 rgba() 值并将其转换为 #hex 值，但是，我不希望 alpha 通道包含在 return 语句中。不过，它确实需要影响结果。

举个例子：

如果我通过了rgba(17, 160, 173, 1)，我希望返回#11a0ad (#rrggbb)，而不是#11a0adff (#rrggbbaa)。
如果我通过了rgba(17, 160, 173, 0.55)，我希望返回#7ccbd2 (#rrggbb)，而不是#11a0ad8c (#rrggbbaa)。

// Examples
rgbaToHex(17, 160, 173, 1); // returns '#11a0ad'
rgbaToHex(17, 160, 173, 0.55); // returns '#7ccbd2'

基本上我想从返回的#hex 值中消除任何不透明度，但是原始rgba() 值的不透明度会影响返回的#hex 值是原始颜色还是原始的不透明色调颜色（来自所述 Alpha 通道）。

这是我从 Sketch 的 GUI 中提取的一个可视化示例：

我接近解决了这个问题，使用以下等式：

// rgb(14, 14, 14) --> #0e0e0e
// rgba(14, 14, 14, 0.5)

  const colSpace = 255;

  const r = 14, g = 14, b = 14, a = 0.5;

  const rDiff = colSpace - r, // 241
        gDiff = colSpace - g, // 241
        bDiff = colSpace - b; // 241

  const opaqueR = Math.round(r + rDiff * a), // 135
        opaqueG = Math.round(g + gDiff * a), // 135
        opaqueB = Math.round(b + bDiff * a); // 135


  const opaqueRGB = `rgb(${opaqueR}, ${opaqueG}, ${opaqueB})`

  // rgb(135, 135, 135) --> #878787

当您通过 rgba(14, 14, 14, 0.5) 时，Sketch 的 GUI 会返回 rgb(134, 134, 134) 或 #868686。所以我的等式并不算太远。

上面的等式取r、g 和b 颜色值以及255 之间的差值，然后将差值乘以 Alpha 通道。

当您在灰度中工作并且 Alpha 通道为 50% 时，此等式似乎运行良好。但是当您传递更复杂的 rgba() 值或不同的 Alpha 通道时会中断。

以前有人用 Javascript 解决过这个问题吗？如何使用 Javascript 从 rgba() 值导出不透明的色调？

【问题讨论】：

标签： javascript colors hex rgb rgba

【解决方案1】：

您需要在 2 种颜色之间进行合成，因此请使用以下公式：

const opaqueR = Math.round((1-a)*255+a*r)

其他颜色也一样。 255 这里是背景 r 组件，它可以与其他 bg 颜色一起使用。

【讨论】：