Web color value conversion using Javascript, javascriptweb

Web color value conversion using Javascript, javascriptweb

I have been busy with business requirements recently and have not written a blog for a long time. Some time today, I looked at some front-end code in my recent project. When I saw the Web color conversion function, I suddenly thought that when we were doing some color settings/editing needs, interchange of different color value formats is often involved. So I decided to record how I implemented this part of the function. I would like to write it down and share it with you. I hope readers can express their opinions and communicate with each other more.

First look at the problem

Problem 1: dom is often used for front-end development of web pages. style. backgroundColor = "# f00" is used to set the background color of a DOM element. The background color is similar (why is it similar? There are many situations, so you can use it as you can imagine.) var bgc = dom. style. backgroundColor code gets the background color of a DOM element. The problem arises. Please refer:

If the comparison here is not obvious enough, let's continue to look at it:

Obviously, the same color value should have been equal, but this is not the case. This is not an example. The results obtained from the Chrome development tool and the Firefox console are the same.

Problem 2: front-end development often begins with restoring the UI design draft. During the coding process, we often find that the background color of a box is solid (assuming: # f00), but with a opacity of 75%. Obviously, we cannot simply set it through dom. style. backgroundColor = "# f00" because it cannot reach the translucent effect. We know that there is an rgba in CSS3, that is, we can use dom. style. backgroundColor = "rgba (255, 0, 0, 0.75)" to set a translucent background color. Then the problem comes again: this conversion is easy to implement in Photoshop, but how can we implement it in Javascript? ("# f00", 75) convert to rgba (255, 0, 0, 0.75?

Next, let's take a look at how I did it.

Rgb (a) color value to hexadecimal color (hex)

It's all about development. You can understand it! It's better to say something about the Code directly, but here is the most primitive:

<! -- Lang: js -->

Copy codeThe Code is as follows:
Var rgbToHex = function (rgb ){
Var rRgb =/rgb \ (\ d {1, 3}), (\ d {1, 3}), (\ d {1, 3 })\)/,
RRgba =/rgba \ (\ d {1, 3}), (\ d {1, 3}), (\ d {1, 3 }),([. \ d] + )\)/,
R, g, B, a, rs = rgb. replace (/\ s +/g, ""). match (rRgb ),
Rsa = rgb. replace (/\ s +/g, ""). match (rRgba );
If (rs ){
R = (+ rs [1]). toString (16 );
R = r. length = 1? "0" + r: r;
G = (+ rs [2]). toString (16 );
G = g. length = 1? "0" + g: g;
B = (+ rs [3]). toString (16 );
B = B. length = 1? "0" + B: B;
Return {hex: "#" + r + g + B, alpha: 100 };
} Else if (rsa ){
R = (+ rsa [1]). toString (16 );
R = r. length = 1? "0" + r: r;
G = (+ rsa [2]). toString (16 );
G = g. length = 1? "0" + g: g;
B = (+ rsa [3]). toString (16 );
B = B. length = 1? "0" + B: B;
A = (+ rsa [4]) * 100
Return {hex: "#" + r + g + B, alpha: Math. ceil ()};
} Else {
Return {hex: rgb, alpha: 100 };
}
};

Why is it the most primitive? When I review the code today, I found that there is still room for evolution. Next I will compare the code after evolution (optimization:

<! -- Lang: js -->

Copy codeThe Code is as follows:
Var rgbToHex = function (rgb ){
Var rRgba =/rgba? \ (\ D {1, 3}), (\ d {1, 3}), (\ d {1, 3}) (, ([. \ d] + ))? \)/,
R, g, B,,
Rsa = rgb. replace (/\ s +/g, ""). match (rRgba );
If (rsa ){
R = (+ rsa [1]). toString (16 );
R = r. length = 1? "0" + r: r;
G = (+ rsa [2]). toString (16 );
G = g. length = 1? "0" + g: g;
B = (+ rsa [3]). toString (16 );
B = B. length = 1? "0" + B: B;
A = (+ (rsa [5]? Rsa [5]: 1) * 100
Return {hex: "#" + r + g + B, alpha: Math. ceil ()};
} Else {
Return {hex: rgb, alpha: 100 };
}
};

Not to mention the loss of an if branch, it is obvious from the perspective of the Code volume alone! Next, let's see if the conversion result is as expected. For this reason, I executed the following lines of code in the console:

From the execution results, our method seems to have achieved our goal. However, careful friends should note that there are two red arrows in the figure. Is there any pitfall? Good. Let's take a closer look at the color parameter rgb (255, 0, 0, 2) introduced in the first arrow. In fact, this is not a valid color value, the color value in rgb format, there is no fourth (transparency) parameter; then look at rgba (255, 0, 0, 1.48) in the second arrow. The format is okay, but the transparency is 1.48, actually it is not a valid transparency value. In both cases, our methods are executed normally and returned normally. It means that our methods still have room for further evolution and we will give them to everyone!

Hex to rgba format

In daily development, the most commonly used color value should be the hexadecimal color value (# ff0000, # f00, etc ), what should we do if we need to convert the color value to the rgba format?

<! -- Lang: js -->

Copy codeThe Code is as follows:
Var hexToRgba = function (hex, al ){
Var hexColor =/^ #/. test (hex )? Hex. slice (1): hex,
PLD = hex = 'transparent '? 0: Math. ceil (al ),
R, g, B;
HexColor =/^ [0-9a-f] {3} | [0-9a-f] {6} $/I. test (hexColor )? HexColor: 'fffff ';
If (hexColor. length = 3 ){
HexColor = hexColor. replace (/(\ w)/gi, '$1 $1 $2 $2 $3 $3 ');
}
R = hexColor. slice (0, 2 );
G = hexColor. slice (2, 4 );
B = hexColor. slice (4, 6 );
R = parseInt (r, 16 );
G = parseInt (g, 16 );
B = parseInt (B, 16 );
Return {
Hex: '#' + hexColor,
Alpha: phosphatase,
Rgba: 'rgba ('+ r +', '+ g +', '+ B +', '+ (KP/100). toFixed (2) + ')'
};
};

Similarly, we also write verification code to test whether our conversion is normal:

From the execution results, we can get the desired conversion results if there is no problem with our method. However, there are still two red arrows, invalid transparency and invalid color values. This part of evolutionary functions is also reserved for everyone, haha...

Finally, the conversion between the color values of web pages is a common issue. I just listed one simple one here. I believe there are more and better ways to use it, you are welcome to discuss and make common progress ~~