如何将透明度信息添加到十六进制颜色代码？

Question

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

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

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

#RRGGBB

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

0.1

到

1

不知何故，我需要从这个透明度金额中获取 2 位字母，并将其附加到十六进制值才能工作。

有人知道如何将 Alpha 信息附加到十六进制颜色代码吗？它的数学公式是什么？

我想如果有人知道如何将具有透明度的 RGBA 颜色值转换为十六进制，这个问题也可以得到解答：

rgba(255, 255, 255, 0.6)

Answer 1

这个是个不错的功能

function addAlpha(color, opacity) {
    // coerce values so it 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'

Answer 2

基于 Paul 的答案，这是一个单行 ECMA6 函数，它接收

hex

颜色和

alpha

并返回计算出的

hex

颜色：

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

Answer 3

两位数 hex 十进制数的最大值为

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

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

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

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

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

最后，如果

y < 16

这只是一位数字，那么你可能需要额外填充一个

0

ret = y < 16 ? '0' + s : s;

Answer 4

来自 user956584 的

答案存在接近 0 或 0 的不透明度问题。（它们被转换为 100% alpha）。我在这里修好了

function changeColorAlpha(color, opacity) 
{
    //if it has an alpha, remove it
    if (color.length > 7)
        color = color.substring(0, color.length - 2);

    // coerce values so ti is between 0 and 1.
    const _opacity = Math.round(Math.min(Math.max(opacity, 0), 1) * 255);
    let opacityHex = _opacity.toString(16).toUpperCase()

    // opacities near 0 need a trailing 0
    if (opacityHex.length == 1)
        opacityHex = "0" + opacityHex;

    return color + opacityHex;
}
console.log(changeColorAlpha('#FFFFFF00', 0));  // return "#FFFFFF00"

https://jsfiddle.net/gomador/5wfvrpxa/12/

Answer 5

一如既往，使用线性缩放。

（vald - 心灵）/（maxd - 心灵）*（maxr - minr）+ minr

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

Answer 6

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

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

因此，解决方法是使用

rgba(r, g, b, a)

 格式或单独设置透明度。

Answer 7

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