Question

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

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)

Answer 1

两位数的十六进制 adecimal数字的最大值为255 = (16 ** 2 - 1)，最小值为0， alpha 的最大值为{{1最小1，这是一个简单的问题

这并不总是一个整数，所以你很可能想把它转换为一个，例如使用

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

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

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

最后，如果s = y.toString(16); // str, e.g. s = "4c"这只是一位数，那么您可能需要填一个额外的y < 16

Answer 2

基于 Paul 的回答，这里是一个单行 ECMA6 函数，它接收 hex 颜色和 alpha 并返回计算出的 hex 颜色：

const setOpacity = (hex, alpha) => `${hex}${Math.floor(alpha * 255).toString(16).padStart(2, 0)}`;

Answer 3

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

（vald - mind）/（maxd - mind）*（maxr - minr）+ minr

（0.1 - 0.0）/（1.0 - 0.0）*（255 - 0）+ 0 = 25.5~ = 0x1a

Answer 4

根据relevant portion of the W3C spec，没有RGBA值的十六进制版本。引用该规范：

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

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

Answer 5

如果用于web开发，如学习编码由Shay Howe编写的HTML和CSS，HEX颜色是最受欢迎的，但是当需要透明度时，我们必须使用RGBa或HSLa。 RGBa比HSLa有更多的支持。

Answer 6

这个is nice function

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'

如何将透明度信息添加到HEX颜色代码？

6 个答案: