JavaScript中的rgba值将十六进制值作为不透明音调

Question

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

例如：

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

#11a0ad8c

基本上，我想消除返回的// Examples rgbaToHex(17, 160, 173, 1); // returns '#11a0ad' rgbaToHex(17, 160, 173, 0.55); // returns '#7ccbd2' 值中的任何不透明度，但是使原始#hex值的不透明度影响返回的rgba()值是否是原始颜色或原始颜色的不透明色调（来自所述alpha通道）。

这是我从Sketch的GUI中提取的一个直观示例：

我使用以下公式接近解决这个问题：

#hex

当您传递// 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 时，Sketch的GUI返回rgb(134, 134, 134)或#868686。因此，我的方程式并不太遥远。

上面的等式采用rgba(14, 14, 14, 0.5)，r和g颜色值之间的差，以及b，然后将差值乘以alpha通道。

当您在灰度模式下工作且Alpha通道为255时，此等式似乎运行良好。但是当您传递更复杂的50%值或其他Alpha通道时会中断。

有人以前用Java解决了这个问题吗？如何使用JavaScript从rgba()值得出不透明的音调？

Answer 1

您需要两种颜色之间的构图，因此请使用以下公式：

%>%

与其他颜色相同。 255是背景r的组件，它将与其他bg颜色一起使用。