RGBA and RGB to Hex

Question

I am trying to find a method which can convert RGB or RGBA string to hex format. i found solution but not in one method like method 1 => rgbToHex and for RGBA rgbaToHex i want to combine them so it can return hex value of both RGB and RGBA

RGB method:

    // convert RGB color data to hex
function rgb2hex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

RGBA method:

function rgba2hex(r, g, b, a) {
    if (r > 255 || g > 255 || b > 255 || a > 255)
        throw "Invalid color component";
    return (256 + r).toString(16).substr(1) +((1 << 24) + (g << 16) | (b << 8) | a).toString(16).substr(1);
}

What i want:

 //takes both RGB and RGBA and convert to HEX like  #000000
   // input will be string like this => rgb(0,0,0) or rgba(255,255,255, 0.5)
    function anyToHex() {
     return; // hex value
    }

i created my solution which can take take any string rgb or rgba and then return a HEX value Here is my soution:

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}
function anytoHEX(string) {

    rgb = string.substring(4, string.length-1).replace(/ /g, '').split(',');
    R = rgb[0].replace("(", "");
    G = rgb[1];
    B = rgb[2];

    return "#" + componentToHex(R) + componentToHex(G) + componentToHex(B);

}

console.log(anytoHEX('rgba(0,0,0,0)'));

Aloha! It's a bit tough to see what the actual problem is. Have you tried combining those methods into one yet? Could you tell us where you got with the `anyToHex` function so we can give specific help? — Jeroen, Jun 16 '18 at 18:45
Do you understand how each of these functions work? You should spend some time to do that, then it should be easy for you to combine both. — Felix Kling, Jun 16 '18 at 18:47
@FelixKling, You're right. Btw, @Sunilmeena want it like `#000000`, therefore **a** doesn't matters! — , Jun 16 '18 at 18:54
You may also want to consider checking if each input is greater than 0, since negative values would also be invalid. — obermillerk, Jun 16 '18 at 18:54
@Rahul: I think it's just an incomplete example. Because `255` certainly doesn't map to `00` ;) — Felix Kling, Jun 16 '18 at 18:55
@FelixKling I think she was just giving an example of the # format that she wants, wouldn't make sense to have these two separate functions if all she wanted was rgb in the answer, why bother including a? — obermillerk, Jun 16 '18 at 18:57
stupid question: the hex-value `0xC0FFEE`, is that `rgb(192, 255, 238)` or `rgba(0, 192, 255, 0.9333);`? — Thomas, Jun 16 '18 at 19:02
@Thomas, The first one, the 0x just defines it as being a hex value — obermillerk, Jun 16 '18 at 19:29

Hiteshdua1 · Accepted Answer · 2018-06-16T18:51:44.193

2

You could make it a wrapper,and call the function based on the arguments passed

 //takes both RGB and RGBA and convert to HEX like  #000000
   // input will be string like this => rgb(0,0,0) or rgba(255,255,255, 0.5)
    function anyToHex(r, g, b, a) {
      if(a === undefined){
         return rgb2hex(r, g, b);
      }
     return rgba2hex(r, g, b, a);
    }

edited Jun 16 '18 at 18:51

answered Jun 16 '18 at 18:48

Hiteshdua1

2,126
18
29

1

That's not quite right. That means if `a` is `0`, it won't be considered. – Felix Kling Jun 16 '18 at 18:50
but i have string values not in array – Sunil meena Jun 16 '18 at 18:50
Yeah, I just wanted to give him an idea of creating a wrapper – Hiteshdua1 Jun 16 '18 at 18:51
@Sunilmeena: *"but i have string values not in array"* What does that mean? – Felix Kling Jun 16 '18 at 18:52
I mean how will i extract R, G,B and Aplha from string – Sunil meena Jun 16 '18 at 18:54
@Sunilmeena: Have you looked at [RGB to Hex and Hex to RGB](https://stackoverflow.com/q/5623838/218196) ? – Felix Kling Jun 16 '18 at 18:56
Yes but there is no solution which i want – Sunil meena Jun 16 '18 at 18:59

score 2 · Answer 2 · answered Jun 16 '18 at 18:50

In javascript, all function parameters are optional, so if one is omitted it will be undefined. So, you can check with something like

if (a === undefined) {
  // return rgb2hex
else {
  // return rgba2hex
}

Note, you don't want to do if (a) here since 0 is a valid value for a, but will result in false and just returning rgb.

RGBA and RGB to Hex

2 Answers2