"Original" JavaScript for Web color value conversion

I've been busy with business requirements lately and haven't been blogging for a long time. A little bit of time today, looking at some of the recent project's front-end code, see the Web color conversion function, suddenly think that when we do some color settings/editing requirements, often involves a variety of color value format interchange. So I decided to record how I do this part of the function of the time is how to achieve, write down and share with you, I hope readers can express their views, a lot of communication.

First look at the problem

Problem one, when we are developing the Web front page, we often use it dom.style.backgroundColor = "#f00" to set the background color of a DOM element, and it will also pass similar (why is it similar?). There are more situations where you can freely imagine var bgc = dom.style.backgroundColor your code to get the background color of a DOM element. So here's the question, see:

If the contrast here is not obvious enough, let's continue looking down:

It is clear that the same color value should have been equal, but the result is not. This is not the case, the author in the Chrome development tools and Firefox console, the results are consistent.

Issue two, front-end development work, often starting with a restore UI design. And in the coding process we often find that the design: a box background solid color (assuming: #f00), but with 75% opacity. Obviously, we can't simply set this up because we dom.style.backgroundColor = "#f00" don't have a translucent effect. Changed, we know that there is an RGBA in CSS3, which means that we can dom.style.backgroundColor = "rgba(255, 0, 0, 0.75)" set the background color with translucency. So here's the problem: This conversion is easy to do in Photoshop, but how do we convert ("#f00", 75) to Rgba (255, 0, 0, 0.75) in JavaScript?

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

RGB (a) color value turns to hex color (hex)

is to do the development, I understand! It's better to go straight to the code, but here's the original one:

  <!--lang:js-->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]) * Return {hex: "#" + r + G + B, Alpha:Math.ceil (a)};    } else {return {hex:rgb, alpha:100}; }};

Why is that the most primitive? Because when I review the code today, I find that there is room for evolution, and then compare the code after Evolution (optimization):

<!-- lang: js -->var rgbToHex = function(rgb) {        var rRgba = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/,        r, g, b, a,        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(a)};    } else {        return {hex: rgb, alpha: 100};    }};

And do not say that less an if branch, single from the code to see, it is very obvious! Next, let's see if the results of the transformation are as we wish, and for this I executed the lines of code shown in the console:

Judging from the results of the implementation, our approach seems to have been able to achieve our goal. However, careful friends should notice that there are two red arrows in the picture, is there any pit here? Not bad. We take a closer look at the first arrow in the color parameters passed in rgb(255, 0, 0, 2) , in fact, this is not a valid color value, RGB format color value, there is no fourth (transparency) parameter; Look at the second arrow rgba(255, 0, 0, 1.48) , here the format is no problem, But transparency is 1.48, but it is not a legitimate transparency value. Both cases, our methods are normal execution, and return to the normal, indicating that our approach and further evolution of space, will be handed to everyone to play!

Hex Color (hex) turns into RGBA format

In daily development, the color value we use most often should be the color value in hexadecimal format (#ff0000, #f00等), what should we do if we need to convert to RGBA format when we use color values?

<!-- lang: js -->var hexToRgba = function(hex, al) {    var hexColor = /^#/.test(hex) ? hex.slice(1) : hex,        alp = 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)(\w)(\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: alp,        rgba: ‘rgba(‘ + r + ‘, ‘ + g + ‘, ‘ + b + ‘, ‘ + (alp / 100).toFixed(2) + ‘)‘    };};

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

Judging from the results of the implementation, our approach, no problem, can get the results we want to convert. But here is still left to everyone two red arrows, illegal transparency and illegal color values. This part of the evolutionary function is also left to everyone, haha ...

Finally, the page color values between the conversion, in fact, is a cliché of the problem, I here is just a simple list of one, I believe there are more and better ways to use, welcome everyone to put forward, we exchange, common progress ~ ~

Original JavaScript implements web color value conversion