Javascript converts the specified RGB color to a hexadecimal color (Converting R, G, B values to HTML hex notation)

Source: Internet
Author: User

Prologue

I saw a good foreign Article, Making annoying rainbows in javascript. in fact, I really wanted to translate it, but it was really difficult for a person who hadn't even passed cet6, some paragraphs seem to understand the meaning, but do not know how to express it in your own words. More and more think that for the IT industry, English should at least be able to read. After all, many of the good things are foreign. I have not read this article yet, but I am still slowly digesting it. However, it really attracts me to see a function that implements Converting R, G, B values to HTML hex (hexadecimal) notation.

Perface

What are you thinking when you see this picture? Young people may wantFly your dreams and fly freelyFor the second-force youthCan a balloon take me to fly? (It seems that the role features are not quite met -_-!). But programmers will thinkWhy are these colors displayed on the computer?Indeed, rich colors enrich our lives. What we want is a colorful world, not only black and white. How do I feel like I'm writing a composition! Leave the question.

Description function RGB color computers can create colors by combining different red, green, and blue colors. Therefore, red, green, and blue are called color components. Each color component is 8bit, value Range: 0-255 hexadecimal RGB color But the HTML colZ color? Http://www.bkjia.com/kf/ware/vc/ "target =" _ blank "class =" keylink "> mixer + NbGo6zL + dLU08PBvc67vs3E3Mq5tcTL/CTL =" 1 ">ComponentValue (in hex)Value (in decimal)RedAA170GreenBB187BlackCC204Content

You can see in Making annoying rainbows in javascript that it writes a function RGB2Color, which converts RGB to hexadecimal.

RGB2Color function RGB2Color (r, g, B) {return '#' + byte2Hex (r) + byte2Hex (g) + byte2Hex (B);} handed over to the byte2Hex function for execution, this function is very interesting function byte2Hex (n) {var nybHexString = "0123456789 ABCDEF"; return String (nybHexString. substr (n> 4) & 0x0F, 1) + nybHexString. substr (n & 0x0F, 1) ;}ask me to write this method. I don't think I can think of a Summary that can be played like this.

Now let's analyze the Code. In fact, I often read the javascript authoritative guide and always ignore bitwise operators. Today, my previous habits are wrong.

(N> 4) & 0x0F. For example, if the sent value is 180, you use (180 ). toString (2) can obtain its binary value as "10110100", and then you use 180> 4 to run the code and then the value is 11. Therefore, we use n> 4 to obtain the leftmost 4 bits of the binary value corresponding to this value, and then convert it to hexadecimal with & 0x0F, the obtained value is the underlying identifier of the nybHexString, that is, the value of 11 corresponds to B and is found. N & 0x0F can obtain the hexadecimal value corresponding to the rightmost value of n, because if 0x0F represents 0000 1111 in 8 bits, the following example is shown: 180, it is expressed as 1011 0100 in binary format, because the two are the same, and the four leftmost bits of 0x0F are all 0, while the four rightmost bits are all 1, therefore, we can ignore the four leftmost bits of the binary corresponding to each value and obtain the four rightmost bits of the binary corresponding to each value (n. PreferencesMaking annoying rainbows in javascript

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.