将RGBA颜色转换为HTML颜色代码

Question

我在我的应用程序中有一个颜色选择器，用户可以使用它来选择应用程序输出的某些对象的颜色。该颜色选择器输出RGBA格式的颜色。但是，我需要HTML颜色代码。我需要能够将RGBA转换为HTML，而不预先知道颜色，并在稍后将其用作字符串。我该如何做？

- Nathan

---

HTML不支持半透明颜色值 - 除非alpha达到最大值或您不关心alpha，否则无法从RGBA颜色获取等效的HTML颜色代码。您是指CSS颜色值吗？正如标签和您接受的答案所示？ - BoltClock

@BoltClock canvas上下文有一个globalAlpha属性，您可以使用它来设置画布对象的透明度。 - Endre Simo

Answer 1

RGBA在CSS3中得到了原生支持：

div {
   background: rgba(200, 54, 54, 0.5); 
}

Firefox、Safari、Chrome、IE9和Opera浏览器都支持RGBA。旧版IE不支持它。

幸运的是，您可以为支持它的浏览器指定RGBA颜色，并为不支持它的浏览器提供替代方案。请查看此link以获取详细信息。

这是两个选项：-来自链接 -

1. 回退到纯色：当不透明度不可用时，允许浏览器回退到使用纯色。

h1 {
     color: rgb(127, 127, 127); 
     color: rgba(0, 0, 0, 0.5); //for modern browsers only
}

2. 使用PNG作为备选方案： 在使用透明度背景色时（不包括边框或文本），可以使用带有alpha通道的PNG来实现相同的效果。这种方法比使用CSS不够灵活，因为您需要为每个所需透明度级别创建一个新的PNG文件，但它可以是一个有用的解决方案。

h1 {
     background: transparent url(imageName.png);
     background: rgba(0, 0, 0, 0.5) none; //for modern browsers only
}

我想说的是，你不需要HTML颜色代码，只需在选择颜色后使用JavaScript或jQuery添加css属性rgba即可。我认为这样就可以了。希望能够帮到你。

- Cacho Santa

---

我认为答案是肯定的，但是 rgba 在内联样式中是被支持的，对吗？ - Nathan

@Natha，你是对的，答案是肯定的。这只是指定颜色的不同方式。1. 十六进制值 - 如 "#ff0000" 2. RGBA 值 - 如 "rgb(255,0,0, 0.5)" 3. 颜色名称 - 如 "red"。 - Cacho Santa

从9版本开始，Internet Explorer支持RGBA。 - BoltClock

在background属性值中，不需要使用transparent或none组件，因为它们会被完全覆盖（如果浏览器支持整个值）。只需编写background: url(imageName.png); background: rgba(0, 0, 0, 0.5);即可。 - Marat Tanalin

Answer 2

如果你在JavaScript中寻找实际的RGB（A）到十六进制的转换（就像你问题的文字字面意思一样）：

red = green = blue = 255;
hex = '#' + 
    ("0" + (red).toString(16)).slice(-2) + 
    ("0" + (green).toString(16)).slice(-2) +
    ("0" + (blue).toString(16)).slice(-2);

当然没有alpha等效项，但您可以设置透明度（以及/或浏览器特定的-opacity值以支持旧版浏览器）。

- Bob Davies