0

I have this function:

function rgbtohex(val) {
  var clean = val.replace(/[^0-9\.,]/g, "");
  var colors = clean.split(',');
  var r = colors[0];
  var g = colors[1];
  var b = colors[2];

  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

console.log(rgbtohex('rgb(64, 128, 128)')); //should output #408080, instead it outputs #1004288128

it's supposed to convert rgb to hex, something like this:

rgbtohex('rgb(64, 128, 128)') //should output #408080, instead it outputs #1004288128

but it outputs a wrong value. After breaking it down I found out it will work with the given value if var b equals a fixed value (in this case 128) instead of a variable. Like this:

 var r = colors[0];
 var g = colors[1];
 var b = 128;

why is that?

Fiddle here: https://jsfiddle.net/kr2bmaxp/2/

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Cain Nuke
  • 2,843
  • 5
  • 42
  • 65
  • Does this answer your question? [Adding two numbers concatenates them instead of calculating the sum](https://stackoverflow.com/questions/14496531/adding-two-numbers-concatenates-them-instead-of-calculating-the-sum) – Heretic Monkey Jan 26 '22 at 20:29

1 Answers1

1

Your colors array is an array of strings, try converting it to numbers:

function rgbtohex(val) {
 var clean = val.replace(/[^0-9\.,]/g, "");
 var colors = clean.split(',').map(Number);
 var r = colors[0];
 var g = colors[1];
 var b = colors[2];
 
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
} 

console.log(rgbtohex('rgb(64, 128, 128)')) //should output #408080, instead it outputs #1004288128

Note that with destructuring syntax you can reduce the code a bit:

let [r, g, b] = clean.split(',').map(Number);
// delete the individual r, g, b assignments
James
  • 20,957
  • 5
  • 26
  • 41