javascript 如何将透明度信息添加到十六进制颜色代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19799777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add Transparency information to a HEX color code?
提问by TK123
I have to modify some code and the previous developer left this comment:
我不得不修改一些代码，之前的开发人员留下了这个评论：
color: color, // e.g. '#RRGGBBFF' - Last 2 digits are alpha information
On the page there is a color picker that let's the user change text color. It gives HEX values like so:
在页面上有一个颜色选择器，让用户可以更改文本颜色。它给出了这样的十六进制值：
#RRGGBB
And there is a slider that allows the user to change a text's transparency. It runs from 0.1to 1
还有一个滑块，允许用户更改文本的透明度。它从0.1到1
Somehow I need to get a 2 digit letter from this transparency amount and append it to the HEX value for it to work.
不知何故，我需要从这个透明度量中获取一个 2 位字母并将其附加到 HEX 值以使其工作。
Does anyone know how to append Alpha information to HEX color codes? What is the math formula for it?
有谁知道如何将 Alpha 信息附加到 HEX 颜色代码？它的数学公式是什么？
I guess the question can also be answered if anyone knows how to convert RGBA color values with transparency into HEX:
我想如果有人知道如何将具有透明度的 RGBA 颜色值转换为 HEX，也可以回答这个问题：
rgba(255, 255, 255, 0.6)
回答by Paul S.
A two-digit hexadecimal number has a maximum value of 255 = (16 ** 2 - 1)and minimum of 0, your alphahas maximum 1and minimum 0, so it's a simple matter of
两位十六进制数的最大值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
this won't always be an integer, so you'll most likely want to convert it to one, for example using
这并不总是一个整数，所以你很可能想把它转换成一个，例如使用
y = Math.floor(x); // int, e.g. y = 76
converting this into a base-16 string will give you your desired output
将其转换为 base-16 字符串将为您提供所需的输出
s = y.toString(16); // str, e.g. s = "4c"
finally, if y < 16this will only be one digit, so you may need to pad an extra 0
最后，如果y < 16这只是一位数字，那么您可能需要额外填充 0
ret = y < 16 ? '0' + s : s;
回答by Ignacio Vazquez-Abrams
As always, use linear scaling.
与往常一样，使用线性缩放。
(vald - mind) / (maxd - mind) * (maxr - minr) + minr
(vald - mind) / (maxd - mind) * (maxr - minr) + minr
(0.1 - 0.0) / (1.0 - 0.0) * (255 - 0) + 0 = 25.5 ~= 0x1a
(0.1 - 0.0) / (1.0 - 0.0) * (255 - 0) + 0 = 25.5 ~= 0x1a
回答by jfriend00
Per the relevant portion of the W3C spec, there is no hex version of RGBA values. Quoting from that spec:
根据W3C 规范的相关部分，RGBA 值没有十六进制版本。引用该规范：
Unlike RGB values, there is no hexadecimal notation for an RGBA value.
与 RGB 值不同，RGBA 值没有十六进制表示法。
So, the work-around is that you use the rgba(r, g, b, a)format or you set transparency separately.
因此，解决方法是使用rgba(r, g, b, a)格式或单独设置透明度。
回答by Kim-Trinh
If using for web dev, as referred in Learn to code HTML&CSS written by Shay Howe, HEX color is the most popular but when transparency needed we have to use RGBa or HSLa. RGBa has more support than HSLa.
如果用于 Web 开发，如 Shay Howe 编写的 Learn to code HTML&CSS 中所述，HEX 颜色是最受欢迎的，但是当需要透明度时，我们必须使用 RGBa 或 HSLa。RGBa 比 HSLa 有更多的支持。
