10

我必须修改一些代码，之前的开发人员留下了这个评论：

color: color, // e.g. '#RRGGBBFF' - Last 2 digits are alpha information

页面上有一个颜色选择器，可以让用户更改文本颜色。它给出了 HEX 值，如下所示：

#RRGGBB

还有一个滑块允许用户更改文本的透明度。它从0.1到1

不知何故，我需要从这个透明度量中获取一个 2 位字母并将其附加到 HEX 值以使其工作。

有谁知道如何将 Alpha 信息附加到 HEX 颜色代码？它的数学公式是什么？

我想如果有人知道如何将具有透明度的 RGBA 颜色值转换为 HEX，也可以回答这个问题：

rgba(255, 255, 255, 0.6)
4

6 回答 6

8

这是一个不错的功能

function addAlpha(color, opacity) {
    // coerce values so ti is between 0 and 1.
    var _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
    return color + _opacity.toString(16).toUpperCase();
}
addAlpha('FF0000', 1); // returns 'FF0000FF'
addAlpha('FF0000', 0.5); // returns 'FF000080'
于 2021-07-15T17:21:11.077 回答
6

两位十六进制数的最大值为255 = (16 ** 2 - 1)，最小值为0，您的alpha具有最大值1和最小值0，因此很简单

// say we start with        e.g. alpha = 0.3
x = alpha * 255;  // float, e.g. x = 76.5

这并不总是一个整数，因此您很可能希望将其转换为一个，例如使用

y = Math.floor(x);  // int, e.g. y = 76

将其转换为 base-16 字符串将为您提供所需的输出

s = y.toString(16); // str, e.g. s = "4c"

最后，如果y < 16这只是一个数字，那么您可能需要额外填充 0

ret = y < 16 ? '0' + s : s;
于 2013-11-05T21:58:01.080 回答
5

hex根据 Paul 的回答，这里有一个接收颜色alpha并返回计算颜色的单行 ECMA6 函数hex：

const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, 0)}`;
于 2021-02-10T19:03:36.797 回答
1

根据W3C 规范的相关部分，没有 RGBA 值的十六进制版本。引用该规范：

与 RGB 值不同，RGBA 值没有十六进制表示法。

因此，解决方法是您使用rgba(r, g, b, a)格式或单独设置透明度。

于 2013-11-05T21:57:16.527 回答
1

与往常一样，使用线性缩放。

(vald - mind) / (maxd - mind) * (maxr - minr) + minr

(0.1 - 0.0) / (1.0 - 0.0) * (255 - 0) + 0 = 25.5 ~= 0x1a

于 2013-11-05T21:57:23.013 回答
0

如果用于 Web 开发，如 Shay Howe 编写的 Learn to code HTML&CSS 中所述，HEX 颜色是最流行的，但当需要透明度时，我们必须使用 RGBa 或 HSLa。RGBa 比 HSLa 有更多的支持。

于 2017-04-30T03:42:26.437 回答