将 RGB 颜色值转换为十进制

Posted 2023-02-23

【中文标题】将 RGB 颜色值转换为十进制

【英文标题】：Convert a RGB colour value to Decimal

【发布时间】：2012-01-18 02:59:28

【问题描述】：

如何将 RGB 颜色值转换为纯十进制？

所以我有：RGB(255,255,255) 是白色的 它的十进制等值是：16777215

我试着认为它可能只是：

var dec = r*g*b; // but this doesn't work

虽然这行不通。

有人知道从 RGB（或 rgba）转换为十进制的算法/方程式吗？

【问题讨论】：

16,777,215 是 RGB(255,255,255) 的十六进制版本 0x00FFFFFF 的十进制等效值。

您打算如何处理这些值？你给了他们什么软件/功能/等？

我有来自 Flash 应用程序的颜色值，它是十进制的，我需要在 html/css 中显示它们，并且反之亦然。

【参考方案1】：

RGB 整数通常被视为三个不同的字节，其中最左边（最高阶）字节为红色，中间字节为绿色，最右边（最低阶）字节为蓝色。您可以像这样检索这些单个字节的值：

var c = 0xff03c0; // 16712640
var components = 
    r: (c & 0xff0000) >> 16, 
    g: (c & 0x00ff00) >> 8, 
    b: (c & 0x0000ff)
;

您可以通过将字节移回其中来从其组件中重新创建颜色：

c = (components.r << 16) + (components.g << 8) + (components.b);

在您的情况下，只需将 components.r (etc) 替换为您的实际变量即可。

【参考方案2】：

一个更好的答案（就清晰度而言）是这样的：

'Convert RGB to LONG:
 LONG = B * 65536 + G * 256 + R

'Convert LONG to RGB:
 B = LONG \ 65536
 G = (LONG - B * 65536) \ 256
 R = LONG - B * 65536 - G * 256

LONG 是您想要制作的长整数（十进制）。 容易吧？ 当然，位移

【讨论】：

@DanielA.White 可能不这么认为，但我看不出这个问题的任何其他答案如何像这个问题一样清晰。即使我能理解这一点。

这对于不了解位操作的人来说似乎更容易，就像对于不读法语的人来说，英语不好的答案似乎比法语的好答案要好。学习位操作，从长远来看，您将学习使我的答案更加清晰的概括原则。

其实它的：LONG = R * 65536 + G * 256 + B（你把 B 和 R 弄混了）见rapidtables.com/web/color/RGB_Color.html

【参考方案3】：

var dec = (b & 0xff) << 16 + (g & 0xff) << 8 + (r & 0xff);

（我认为这是 r,g,b 值的正确顺序）

更新

我刚刚检查了浏览器应用程序，我的顺序错误，所以浏览器的正确公式（阅读 HTML+CSS+javascript）是：

var dec = r << 16 + g << 16 + b;

假设 r,g,b 值

其他 API 可能期望 r、g、b 值的顺序不同。我似乎记得至少有一个顺序颠倒了（根据我的原始答案），但我认为目前是哪个。

【讨论】：

您的订单可能是对的，在这种情况下，我的回答是错误的:(

正确的顺序是什么？为谁？顺序取决于谁在读取该值。

@Nicol - 不，正确的顺序取决于 API。我不确定 Win32 API，但对于基于浏览器的应用程序（我假设在这里解决）我很确定 Blue 是高位字节（三个），Red 是低位字节.

好像弄错了颜色，你确定这是正确的顺序吗？

如果这些变量只包含单独的颜色分量，那么位掩码真的没有意义。

【参考方案4】：

我同意 bitshift 更清晰，性能可能更好。

也就是说，如果由于语言支持（例如在电子表格中执行此操作）而需要 数学答案，则模数 % 和 trunc() 或 floor() 会变得简单：

假设红色绿色和蓝色当然是 8 位值 (0-255)：

var rgbTotal = red * 65536 + green * 256 + blue;

var R = Math.trunc( rgbTotal / 65536 );
var G = Math.trunc( ( rgbTotal % 65536 ) / 256 );
var B = rgbTotal % 256;

讨论： 指向 sam 的答案，RGB 值在顺序方面几乎总是大端，当然在网页、jpeg 和 png 上。就我个人而言，我认为最好将红色乘以 65536 而不是蓝色，除非您正在使用需要它的库。

要返回单独的值：

对于 R，只需除以 65536 并截断余数。 对于 G，我们通过 mod 65536 丢弃 R，然后除以 256，截断余数（余数为蓝色）。 对于 B，我们采用 mod 256，它处理了这两个 更高的字节数。

对于R & G，需要截断数字以丢弃余数，特定于语言，主要是我们想要整数。在 javascript Math.trunc() 是简单的方法，并且 Math.floor() 也可以。 B 不需要它，因为它是模数的余数 - 但是这也假设我们不需要错误检查，例如来自用户输入，即 B 的值始终是整数 0- 255.

【参考方案5】：

if (color.substr(0, 1) === '#') 
    return color;

var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
return rgb.toString(10);

【讨论】：

rgb.toString(10) 是需要的

【参考方案6】：

您需要将 R 左移 16，将 G 左移 8 或两者都移入 B。将值视为位，一切都会变得清晰：

R 255 = 11111111B G 255 = 11111111B B 255 = 11111111B

Shift R 16: 111111110000000000000000 移位 G 8：000000001111111100000000

或转入B：111111111111111111111111

转换为十进制：16777215