Foreword
Data in this chapter explains the concept of color on a computer system, combined with the subsequent application of some of the canvas. Because it is "you do not know it does not matter," the boundaries of knowledge, so as an extension of this series, not interested students can skip.
We started colorful story!
They have limited ability to welcome people to discuss cattle, criticism.
Let's talk about start with an old friend CSS
We are familiar with CSS style color representation, generally have the following types, canvas is a direct follow these general wording, but the final wording of transparency contained slightly different.
-
#RRGGBB: Hexadecimal format, red, green and blue are represented by two hexadecimal digits. -
#RGB: Abbreviation for hexadecimal format, will be repeated when the three primary colors is converted into six formats, e.g.#fb0->#ffbb00. -
rgb(R,G,B): Function expression, the three primary colors are represented by an integer value from 0 to 255. -
rgba(R,G,B,A): Contains transparency function expression, wherein the parameter alpha is 0 to 1, to specify a color transparency must use this format.
As a front-end personnel usually use a lot, but before you could look ignorant to force myself to write the string is actually a hexadecimal color?
I thin to be. I.e., where R is red (red), G that is green (green), B i.e. blue (Blue), the three commonly used is a display of three primary colors , are superposed type primary , Encyclopedia summarized below.
[Science] is the primary colors that can not be mixed through the deployment of other colors derived "basic colors."
Mixing the primary colors in various proportions, can produce other new color. In mathematical vector space to explain the color system, the primaries in a space as a set of basis vectors, and can be combined to a "color space." Since the human eye there are three different colors to the photoreceptor, and therefore can be seen in the color space is typically expressed by the three primary colors, three colors is called "primary colors." In general overlay-type of the three primary colors are red, green, blue (also known as the three primary colors used in televisions, projectors and other display devices); and reduction type three primary colors are magenta, yellow, cyan (for books, magazines printing, etc.).
Decryption color values
Each color is synthesized by the superposition of three primary colors, so we need to tell the computer that the ratio (concentration) of each primary color, this is a quantization scale integer from 0 to 255, it can be said that 256 level, the greater the means that each more primary colors (thicker).
[PS] as to why the 256 level?
Because the computer each primary color is represented by 8-bit binary (0 or 1), which is a total of 8 th of 2562.
Each color is 256 level, it may have its portfolio 256*256*256=16777216, in other words, a color with 24-bit binary representation, converted to the metric is 0 to 16777215.
Here you should be able to read the above CSS colors represent the three meanings of the way before it, as rgba(R,G,B,A)more than to join the A, represents transparency, this is an extended version of 32-bit color systems, more than one additional level of transparency of the 8-bit binary representation , CSS simplified as it represents 0-1.
-
- *
To give an example!
With #FF55F3this color example to explain. (Preceded by 0x represents a hexadecimal number, js is not case-sensitive, so as not to know what is hexadecimal, your own Baidu)
Red is 0xFF, is green 0x55, blue 0xF3.
Decimal conversion: 255 is red, 85 green, 243 is blue. That this value and rgb(255,85,243)wording are equivalent.
[PS] simple conversion method, you can print directly in the console, for example
console.log(0xF3);
, js default decimal representation of the output string.
Synthetic colors
Color theory to learn about it, and now look at the synthesis, the three primary colors is known, how to synthesize a color with the code?
To say the above #FF55F3example, it is now known that each color value, provided the following two approaches:
1, to obtain rgb(R,G,B)format
Js directly to digital converter when the default string decimal characteristic.
let r = 0xFF;
let g = 0x55;
let b = 0xF3;
let color = `rgb(${r},${g},${b})`;2 to obtain #RRGGBBformat
A 24-bit color value, i.e., binary: RRRRRRRRGGGGGGGGBBBBBBBB
red left 16-bit value, the green left by 8 bits, the three do "or" can be obtained a synthetic 24-bit color value, then into a hexadecimal character string i.e. can.
0xFF << 16 = 111111110000000000000000
0x55 << 08 = 000000000101010100000000
0xF3 = 000000000000000011110011
OR = 111111110101010111110011
//省略跟前面一样的...
let color = `#${(r << 16 | g << 8 | b).toString(16)}`;Color separation
Synthetic finished school, now think about how to break up with a color code, it is to separate a color red, green, and blue. rgb(R,G,B)Said format, the cut string can be obtained.
Focus on the #RRGGBBformat, in fact, the reverse process of synthesis of the second, right after "and" operation is simply the desired color values of the location moved to the end, and then "and" 0xFFreject other colors.
Or in #FF55F3an example, it is known that this string value decomposition requires three primary colors.
- Removal of "#" is a hexadecimal character string obtained;
- Red: right 16, and 0xFF do "and" operation;
- Green: the right eight, and 0xFF do "and" operation;
- Blue: direct and 0xFF do "and" operation.
let color = parseInt('#FF55F3'.slice(1), 16);
let r = color >> 16 & 0xFF
let g = color >> 8 & 0xFF
let b = color & 0xFFGreen extraction process, for example:
0xFF55F3 = 111111110101010111110011
0xFF55F3 >> 8 = 000000001111111101010101
0xFF = 000000000000000011111111
AND = 000000000000000001010101
Tool Package Color
Of course, the above synthesis, decomposition of the basic theory of the code is applied, will be used to actually project into a more robust package reasonable tool, we can refer to tools utils.js in colorToRGB () and parseColor () function of two .
- colorToRGB () is used to
#RRGGBBformat or an arbitrary number, is converted intorgb(R,G,B), orrgba(R,G,B,A); - parseColor () is used to
#RRGGBBturn into a digital format, converted into a digital#RRGGBBformat.