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

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

这是一个不错的功能

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

一个两位十六进制数的最大值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;

Answer 4

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

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

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