The relevant knowledge of color and its conversion method

Colors on Web pages are usually represented by RGB, which is the combination of red, green, and blue color. Each color can have 256 values (0~255), three colors can be combined to achieve 0~16777215 species.

256 can be represented by a 8-bit binary number (for example, 255 binary is 11111111), so the performance of the three primary colors requires a 24-bit number, called 24-bit color system. There is also a 32-bit color system, where 8 bits are used to represent the transparency of the color.

Color can also be used to express the use of 16, such as #ffffff using 16 binary representation of white (RGB 255 255 255), the # number is 16 binary, JS using 16 in front of the need to add 0X .

For example 0x1c1 (1X16x16 + 12X + 1x1) , the number on the left is 16 times times the number adjacent to the right.

　　

(16755210). toString (16); The number 16755210 is converted to 16, the result is ffaa0a, with 24-bit color expressed as 111111111010101000001010, red and green blue each accounted for 8 bits.

If you know the primary colors, you can combine them into one color by using the following formula:

var color = Red << 16 | Green << 8 | Blue

Use the color above to substitute:

var color = 0xFF << 16 | 0xAA << 8 | 0x0A;

Or

var color = 255 << 16 | << 8 | 10

A bitwise or | is used here, which means that as long as the corresponding two binaries have one 1 o'clock, the result bit is 1, otherwise 0.

The << symbol represents the bitwise left shift operator, which can be obtained after operation

Red:111111110000000000000000

Green: 000000001010101000000000

Blue: 000000000000000000001010

If you want to extract three primary colors from a known color, you can take the following formula:

Red = Color >> & 0xFF= Color >> 8 & 0xFF= color & 0xFF;

* for Red 111111111010101000001010 Right shift 16 bit result is 000000000000000011111111

* Green right Shift 8 bit result is 000000001111111110101010, but so the red value is also taken out, so we need to do a bitwise AND & with 0XFF, the corresponding binary number is 1 o'clock, the result is 1 , otherwise 0.

000000001111111110101010

000000000000000011111111

The result is 000000000000000010101010.

* Blue directly with 0XFF do bitwise AND arithmetic

111111111010101000001010

000000000000000011111111

Get the result 000000000000000000001010.

With these concepts, you can define a method for converting colors Colortorgb:

varColortorgb =function(color, alpha) {if(typeofcolor = = = ' String ' && color[0] = = = ' # ') {color= parseint (Color.slice (1), 16); } Alpha= (Alpha = = = undefined)? 1: Alpha; varr = Color >> & 0xff, G= Color >> 8 & 0xFF, b= Color >> 0xFF, a= (Alpha < 0)? 0: ((Alpha > 1)? 1: Alpha); if(A = = 1) {        return' RGB (' + R + ', ' + G + ', ' + B + ') '; } Else {        return' Rgba (' + R + ', ' + G + ', ' + B + ', ' + A + ') '; }};

var c = Colortorgb ("#ff0acc"); RGB (255,10,0)

Finally, we enclose the method of converting decimal and binary into each other:

First, the decimal number to be converted to 2 of the N-square form, n means that 1 is followed by a few 0, and finally add the disassembled number, it becomes the binary.

Conversely, the binary can be disassembled into 1 followed by more than 0 of the form, and then become 2 of the N-square, and finally add 2 of the n-th square.

With JS can be very convenient to convert:

(+). toString (2); 11001

parseint (11001,2)//25

(+). toString (16); 19

parseint (19,16); 25

parseint (0x19,10); 25

The relevant knowledge of color and its conversion method