javascript 将 RGB 颜色值转换为十进制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8468855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert a RGB colour value to Decimal
提问by sazr
How do I convert a RGB colour value to just plain decimal?
如何将 RGB 颜色值转换为纯十进制？
So I have: RGB(255,255,255) is white
Its decimal equivalent is: 16777215
所以我有： RGB(255,255,255) 是白色
它的十进制等价物是：16777215
I have tried thinking it might just be:
我试过认为它可能只是：
var dec = r*g*b; // but this doesn't work
Although that doesn't work.
虽然那行不通。
Anyone know of the algorithm/equation to convert from RGB (or rgba) to decimal?
有人知道从RGB（或rgba）转换为十进制的算法/方程吗？
回答by Wayne
RGB integers are typically treated as three distinct bytes where the left-most (highest-order) byte is red, the middle byte is green and the right-most (lowest-order) byte is blue. You can retrieve the values of these individual bytes like this:
RGB 整数通常被视为三个不同的字节，其中最左边（最高位）字节是红色，中间字节是绿色，最右边（最低位）字节是蓝色。您可以像这样检索这些单个字节的值：
var c = 0xff03c0; // 16712640
var components = {
r: (c & 0xff0000) >> 16,
g: (c & 0x00ff00) >> 8,
b: (c & 0x0000ff)
};
You can re-create a color from its components by shifting the bytes back in:
您可以通过将字节移回从其组件重新创建颜色：
c = (components.r << 16) + (components.g << 8) + (components.b);
In your case, simply substitute components.r(etc) with your actual variables.
在您的情况下，只需components.r用您的实际变量替换（等）即可。
回答by Sam Brown
A much better answer (in terms of clarity) is this:
一个更好的答案（就清晰度而言）是这样的：
'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 is your long integer (decimal) that you want to make. Easy huh? Sure, bitshift
LONG 是您要生成的长整数（十进制）。容易吧？当然，位移
回答by Andrew Cooper
var dec = (b & 0xff) << 16 + (g & 0xff) << 8 + (r & 0xff);
(I think that's the correct order for the r,g,b values)
（我认为这是 r,g,b 值的正确顺序）
Update
更新
I just checked for browser applications and I got the order wrong, so the correct formula for browsers (read HTML+CSS+javascript) is:
我刚刚检查了浏览器应用程序，但顺序错误，因此浏览器的正确公式（阅读 HTML+CSS+javascript）是：
var dec = r << 16 + g << 16 + b;
Assuming r,g,b values <= 255
假设 r,g,b 值 <= 255
Other API's may expect a different order for the r,g,b values. I seem to remember at least one that has the order reversed (per my original answer), but I think which one it is at the moment.
其他 API 可能期望 r、g、b 值的顺序不同。我似乎记得至少有一个顺序颠倒了（根据我的原始答案），但我认为现在是哪一个。
回答by sharon_antony
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);
回答by Martin James
You need to left-shift the R by 16, the G left by 8 and or both in to the B. Look at the values as bits and all will become clear:
您需要将 R 左移 16 位，将 G 左移 8 位，或者将两者都移到 B 中。将这些值视为位，一切都会变得清晰：
R 255 = 11111111B G 255 = 11111111B B 255 = 11111111B
R 255 = 11111111B G 255 = 11111111B B 255 = 11111111B
Shift R 16: 111111110000000000000000 Shift G 8: 000000001111111100000000
R 16 班：111111110000000000000000 G 班 8：000000001111111100000000
or into B: 111111111111111111111111
或转B：111111111111111111111111
Convert to decimal: 16777215
转换为十进制：16777215
回答by Myndex
I agree that bitshift is clearer and probably better performance.
我同意 bitshift 更清晰，性能可能更好。
That said, if you want a math answerdue to language support (such as doing this in a spreadsheet) modulus % and trunc() or floor() make it simple:
也就是说，如果由于语言支持（例如在电子表格中执行此操作）而需要数学答案，请使用模数 % 和 trunc() 或 floor() 使其变得简单：
Assuming 8 bit values for red green and blue of course (0-255):
假设红绿蓝有 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;
Discussion:Pointing to sam's answer, RGB values are nearly always big endian in terms of order, certainly on webpages, jpeg, and png. Personally I think it's best to multiply red by 65536 instead of blue, unless you're working with a library that requires it otherwise.
讨论：指向 sam 的答案，RGB 值在顺序方面几乎总是大端，当然在网页、jpeg 和 png 上。我个人认为最好将红色乘以 65536 而不是蓝色，除非您正在使用需要它的库。
To return to separate values:
要返回单独的值：
- For R, just divide by 65536 and truncate the remainder.
- For G, we discard R via mod 65536 then dividing by 256, truncating the remainder (remainder is blue).
- For B, we take mod 256, which disposes of the two higher bytes.
- 对于 R，只需除以 65536 并截断余数。
- 对于 G，我们通过 mod 65536 丢弃 R，然后除以 256，截断余数（余数为蓝色）。
- 对于 B，我们采用 mod 256，它处理两个较高的字节。
For R & Gthe number needs to be truncated to discard the remainder, language specific, mainly we want the integer. In javascript Math.trunc() is the easy way, and Math.floor() also works. It's not needed for Bas that IS the remainder from the modulus — however this also assumes that we don't need error checking such as from user input, i.e. the value for B is always an integer 0-255.
对于R & G需要截断数字以丢弃余数，语言特定，主要是我们想要整数。在 javascript 中 Math.trunc() 是最简单的方法，而且 Math.floor() 也有效。B不需要它，因为它是模数的余数——但是这也假设我们不需要诸如来自用户输入的错误检查，即 B 的值始终是 0-255 的整数。
