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

【问题标题】：Convert RGBA color to HTML color code将 RGBA 颜色转换为 HTML 颜色代码
【发布时间】：2012-07-07 22:33:44
【问题描述】：

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

【问题讨论】：

HTML 不支持半透明颜色值 - 除非 alpha 被最大化或者您不关心 alpha，否则您将无法从 RGBA 颜色获得等效的 HTML 颜色代码。您是否指的是 CSS 颜色值，如标签和您接受的答案所示？
@BoltClock canvas 上下文有一个globalAlpha 属性，可用于设置画布对象的透明度。

标签： html css colors rgba

【解决方案1】：

CSS3 原生支持 RGBA：

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 颜色代码，你只需要添加 css 属性 rgba - 使用 javascript 或 jquery - 在你选择颜色之后，我认为你已经完成了。

希望对你有帮助。

【讨论】：

我认为答案是肯定的，但是内联样式支持 rgba 对吗？
@Natha，你是对的，答案是肯定的。这只是指定颜色的另一种方式。 1. 一个 HEX 值 - 如 "#ff0000" 2. 一个 RGBA 值 - 如 "rgb(255,0,0, 0.5)" 3. 一个颜色名称 - 如 @987654329 @
Internet Explorer 从版本 9 开始支持 RGBA。
在background 属性值中不需要transparent 或none 组件，因为它完全被覆盖（如果浏览器支持整个值）。只写background: url(imageName.png); background: rgba(0, 0, 0, 0.5); 就足够了。

【解决方案2】：

如果您正在寻找 JavaScript 中从 rgb(a) 到 hex 的实际转换（您的问题文本确实要求）：

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 值以支持旧版浏览器）。

【讨论】：