Convert RGB color value to decimal

Question

How to convert a RGB color value to a simple decimal?

So, I have: RGB (255,255,255) - white Its decimal equivalent: 16777215

I tried to think it could be simple:

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

Although this does not work.

Does anyone know an algorithm / equation for converting from RGB (or rgba) to decimal?

Answer 1

RGB integers are usually treated as three separate bytes, where the most significant (highest order) byte is red, the middle byte is green, and the rightmost (least significant) is blue. You can get the values ​​of these individual bytes as follows:

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

You can recreate the color from your components by moving the bytes back:

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

In your case, just replace components.r (etc.) with your actual variables.

Answer 2

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? Of course, bithaft

Answer 3

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

(I think the correct order for r, g, b values)

Update

I just checked the browser apps and I got the wrong order, so the correct formula for browsers (read HTML + CSS + javascript):

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

Assuming that r, g, b <= 255

Other APIs might expect a different order for r, g, b values. It seems that I remember at least one whose order was canceled (in my original answer), but I think what it is at the moment.

Answer 4

 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); 

Answer 5

You need to shift R to the left edge of 16, G - to 8 and / or B. Look at the values ​​as bits, and everything will become clear:

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

Shift R 16: 111111110000000000000000 Shift G 8: 000000001111111100000000

or in B: 11111111111111111111111111

Converting to decimal: 16777215

Answer 6

I agree that bithift is clearer and probably works better.

However, if you want to get a mathematical answer due to language support (for example, do it in a spreadsheet), modulus% and trunc () or floor () make this simple:

Assuming 8-bit values ​​for red, green, and blue, of course (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 the answer itself, RGB values ​​almost always have a serial number with a direct order, of course, on web pages, jpeg and png. Personally, I think it's best to multiply red by 65536 instead of blue, unless you are working with a library that requires otherwise.

To return to individual values:

• For R, simply divide by 65536 and trim the remainder.
• For G, we drop R through mod 65536, then divide by 256, trimming the remainder (the remainder is blue).
• For B, we take mod 256, which gets rid of the two high bytes.

For R & G, the number must be truncated to discard the language-specific remainder, basically we need an integer. In javascript, Math.trunc () is an easy way, and Math.floor () also works. This is not necessary for B, since this is the remainder of the module - however, it also assumes that we do not need error checking, for example, from user input, i.e. the value for B is always an integer 0-255.