将颜色转换为指定的颜色类型答案

【问题标题】：Convert color to specified color type将颜色转换为指定的颜色类型
【发布时间】：2011-09-09 12:38:01
【问题描述】：

我有像0xff3a9bda, 0xff73bbf3 这样的颜色代码。我真的不知道这种颜色类型，因为我知道这些不是 RGB、aRGB、HSB 或 HEX。

当我在开发 Web 应用程序时，我的问题是，我可以使用 RGB 中的 JavaScript 和 HTML 颜色代码获取任何颜色的颜色代码，并且我想将此颜色转换为上述指定颜色类型代码.

有人可以给我一个想法或解决方案吗？

【问题讨论】：

不，除非您能对这种“指定”颜色类型的语义提供一些解释，否则世界上没有人能够提供帮助。您只显示了 32 位十六进制值。它们可能意味着任何东西。
en.wikipedia.org/wiki/RGBA_color_space -- "ARGB 值通常使用 8 个十六进制数字表示，每对十六进制数字分别代表 Alpha、Red、Green 和 Blue 通道的样本值。"

标签： javascript jquery colors

【解决方案1】：

你确定这不是 RGBA 吗？

0xff3a9bda 将是 rgba(255,58,155,0.85) (RGBA) 或 rgba(58,155,218,1) (ARGB)

您可以像这样进行转换：

var c = 0xff3a9bda;
var r = (c & (0xff << 24)) >>> 24;
var g = (c & (0xff << 16)) >>> 16;
var b = (c & (0xff << 8)) >>> 8;
var a = (c & 0xff) / 0xff;
var rgba = 'rgba(' + [r,g,b,a].join(',') + ')';

或者像这样：

var c = 0xff3a9bda;
var a = ((c & (0xff << 24)) >>> 24) / 0xff;
var r = (c & (0xff << 16)) >>> 16;
var g = (c & (0xff << 8)) >>> 8;
var b = c & 0xff;
var rgba = 'rgba(' + [r,g,b,a].join(',') + ')';

在这里试试：http://jsfiddle.net/gX6ds/1/

将#RRGGBB 转换为这种格式：

var rgb = 'AABBCC';
var c = 0xff000000 + parseInt(rgb, 16);
alert('0x' + c.toString(16));

将 R、G、B 值转换为这种格式：

var R = 0xAA, G = 0xBB, B = 0xCC;
var c = 0xff000000 + (R << 16) + (G << 8) + B;
alert('0x' + c.toString(16));

【讨论】：

想的一样，但是rgba是255,58,155,[0-1]
它基本上是一种包含 Alpha 通道 (ARGB) 的十六进制颜色。 IE 的 CSS 过滤器使用这种颜色格式（例如渐变过滤器）。
@Eonasdan - 不，不是。 RGBA 是 32 位颜色空间，A 分量仍然表示为 0 到 255 之间的整数。
所以这个网站：css-tricks.com/2151-rgba-browser-support 和这个网站：css3.info/introduction-opacity-rgba 和这个网站：24ways.org/2009/working-with-rgba-colour 错了吗？
@Eonasdan - 没错，但你误解了。 rgba() 实用程序预期的参数与实际色彩空间的工作方式无关。更重要的是，您希望[0-1] 范围内的值在十六进制/二进制中实际看起来像什么？

【解决方案2】：

没有必要把事情复杂化。您在那里有一个 32 位的颜色值，这几乎可以肯定意味着您有 4 个颜色分量（R、G、B、A），每个分量 8 位。如果格式不是 ARGB，那么它可能是 RGBA，但这取决于您自己的判断。通过反复试验当然很简单。

在任何情况下，一旦您知道哪些位代表哪些颜色分量，您需要做的就是提取 R、G 和 B（请参阅 arnaud576875 的答案），然后像 #<R><G><B> 一样将它们连接在一起以获得您的 HTML 颜色代码.

然后，您将 A 组件设置为您想要应用此颜色的任何元素的 opacity。如：

#coloredElem {
    color: #<R><G><B>;
    opacity: <A / 255.0>;
}

【讨论】：