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

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

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

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

#RRGGBB

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

0.1

运行到

1

不知何故，我需要从这个透明量中得到一个2位数的字母，并将其附加到十六进制值中，以便它工作

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

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

rgba(255, 255, 255, 0.6)

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

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

---

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

一如既往，使用线性缩放

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

---

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

一个两位数十六进制数的最大值为

255=（16**2-1）

，最小值为

0

，你的阿尔法最大值为

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;

ret=y<16？“0'+s:s；

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

根据Paul的回答，这里是一个单行ECMA6函数，它接收

hex

颜色和

alpha

并返回计算出的

hex

颜色：

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

---

.toString（16）

也很有可能。不要忘记填充：）这只会生成另一种颜色，alpha=1