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

How to add Transparency information to a HEX color code?

本文关键字：十六进制 颜色 代码 添加 信息 透明度      更新时间：2023-09-26

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

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

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

#RRGGBB

还有一个滑块允许用户更改文本的透明度。它从0.1运行到1

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

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

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

rgba(255, 255, 255, 0.6)

这是一个很好的函数

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'

根据 Paul 的回答，这里有一个单行 ECMA6 函数，它接收hex颜色并alpha并返回计算出的hex颜色：

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

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

根据 W3C 规范的相关部分，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

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

来自

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/

相关文章：