JavaScript RGB string (`rgb(r, g, b)`) to HEX (`#rrggbb`) conversion

Question

The componentToHex function works well for the first component r, but for the other two components, g and b, it doesn't work as expected:

let componentToHex = (val) => {
  const a = val.toString(16);
  return a.length === 1 ? "0" + a : a;
};

let rgbToHex = (rgb) => {
  const hex = rgb.replace("rgb(", "").replace(")", "").split(",");
  const r = hex[0];
  const g = hex[1];
  const b = hex[2];

  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

console.log(rgbToHex ('rgb(1,255,148)'));

Answer 1

You forgot to convert the components to number, so you are passing them as string to componentToHex, which expects a number.

As String.prototype.split() will give you 3 strings in this case, you can use Array.prototype.map() with Number() to easily parse all 3:

function componentToHex(c) {
  // This expects `c` to be a number:
  const hex = c.toString(16);

  return hex.length === 1 ? `0${ hex }` : hex;
}

function rgbToHex(rgb) {
  // .map(Number) will convert each string to number:
  const [r, g, b] = rgb.replace('rgb(', '').replace(')', '').split(',').map(Number);
  
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}


console.log(rgbToHex('rgb(1,255,148)'));

Answer 2

Try this -

let componentToHex = (val) => {
  a = Number(val).toString(16);
  return a.padStart(2, '0');
};

let rgbtohex = (rgb) => {
  hex = rgb.slice(4, -1).split(',');
  return hex.reduce((a, b) => a + componentToHex(b), '#');
};

rgbtohex('rgb(1,255,148)');

(Modified it to make shorter)

Answer 3

You want the number part (the val) to be a number before you call toString on it. If it's a string when you call toString on it, it'll remain as-is:

let componentToHex = (val) => {
  const a = Number(val).toString(16);
  //        ^^^^^^^^^^^
  return a.length === 1 ? "0" + a : a;
}
let rgbtohex = (rgb) => {
  return '#' + rgb
    .match(/\d+/g)
    .map(componentToHex)
    .join('');
}


console.log(rgbtohex('rgb(1,255,148)'));

Also note that you should always declare variables before using them (else errors will be thrown in strict mode, or they'll be implicitly global, which can cause bugs).

As you can see above, the function that takes and transforms the input numbers can be made more elegant by matching digit characters, mapping to componentToHex, and then joining.