Color - Convert rgb to byte array

Question

I want to convert a color code from rgb (Sample input is 255,255,255 ) to a byte array like [ 0xFF, 0xFF, 0xFF ] .

how can I do it correctly?

My first try was, to split the RGB-Sections and parse it to the HEX Color and convert it to integer:

this.addColor = function addColor(buffer, color) {
    var parts = color.split(',');
    var red = parts[0].toString(16);
    var green = parts[1].toString(16);
    var blue = parts[2].toString(16);

    buffer.writeByte(parseInt("0x" + (red.length == 1 ? "0" + red : red, 16)));
    buffer.writeByte(parseInt("0x" + (green.length == 1 ? "0" + green : green, 16)));
    buffer.writeByte(parseInt("0x" + (blue.length == 1 ? "0" + blue : blue, 16)));
};

The Original is as followed, but i want to make it dynamically:

buffer.writeByte('f'); // These Char says "its a foreground color"
buffer.writeByte(0xFF); // Red
buffer.writeByte(0xFF); // Green
buffer.writeByte(0xFF); // Black

The result will be output as fÿÿÿ !

Answer 1

Since buffer.writeByte() expects the byte value as an integer value, you just need to parse the value in the string to an integer assuming decimal format. Hexadecimal doesn't come into play here until you want to represent the byte value as a string using hexadecimal formatting later on.

this.addColor = function addColor(buffer, color) 
{
    var parts = color.split(',');

    for (var i=0; i<parts.length; i++) 
    {
      var itemAsString = parts[i];
      buffer.writeByte(parseInt(itemAsString, 10));
    }
};

---

To give a more detailed explanation. Your original code

buffer.writeByte('f'); // These Char says "its a foreground color"
buffer.writeByte(0xFF); // Red
buffer.writeByte(0xFF); // Green
buffer.writeByte(0xFF); // Black

could also be written as

buffer.writeByte('f'); // These Char says "its a foreground color"
buffer.writeByte(255); // Red
buffer.writeByte(255); // Green
buffer.writeByte(255); // Black

This is semantically identical. So, you don't need hexadecimal anywhere, it is just enough to parse the string as an integer.

---

More robust version that deals with more or less than three parameters being passed.

this.addColor = function addColor(buffer, color) 
{
    var parts = color.split(',');

    var maxBytes = Math.min(parts.length, 3);    
    for (var i=0; i < maxBytes; i++) 
    {
      var itemAsString = parts[i];
      buffer.writeByte(parseInt(itemAsString, 10));
    }

    // Write 0 bytes for missing parts
    for (var i=parts.length; i < 3; i++) 
    {
      buffer.writeByte(0);
    }

};

Answer 2

Not sure about what you are trying with writing in buffer but if you want to simply convert an decimal array to hex string array ,

You can try:

arr.map(n=>'0x' + n.toString(16))

Now tour array can come from a String "255,255,255" by splitting it by , or however you need. If you are splitting from a string then you need to parse first. ( parseInt(n).toString(16) ) rest you need to implement as per your need.

Sample Code:

 var arr = [255, 230, 255]; var hexArr = arr.map(n=>'0x' + n.toString(16)); console.log(hexArr);

Answer 3

The question is very confusing. You need to be more specific in the steps you want to cover to solve the problem. In the first paragraph you say you want as final solution a byte array but in the 2nd paragraph you say you want the RGB to HEX but then to Integer?.

You posted the output is: fÿÿÿ. Hmmm to get this output then you do not want to convert from RGB to HEX to Integer instead you want RGB to HEX to ASCII (FF=ÿ).

You can do it this way (it works, i already tested on jsfiddle):

var parts = color.split(',');
var red = parts[0];
var green = parts[1];
var blue = parts[2];

// converts from integer to hex

var red = "0x"+ tohex(red);
var green = "0x" + tohex(green);
var blue = "0x" + tohex(blue);

// converts form hex to ascii

red = String.fromCharCode(red);
green = String.fromCharCode(green);
blue = String.fromCharCode(blue);                                   
var output= red+green+blue;

// if the input (in this case you name it color) is: 255,255,255 you will get as output: ÿÿÿ

function tohex(rgb) {               
  if (rgb == 0) return "00"; // if the input is "0"
    rgb = rgb.length < 2 ? "0" + rgb : rgb // RGB format validation
    return rgb.toString(16);
} 

More simplified this way:

var parts = color.split(',');
var red = parts[0];
var green = parts[1];
var blue = parts[2];

var red = String.fromCharCode("0x"+ tohex(red));
var green = String.fromCharCode("0x" + tohex(green));
var blue = String.fromCharCode ("0x" + tohex(blue));
var output= red+green+blue;

// if the input (in this case you name it color) is: 255,255,255 you will get as output: ÿÿÿ

function tohex(rgb) {               
  if (rgb == 0) return "00"; // if the input is "0"
    rgb = rgb.length < 2 ? "0" + rgb : rgb // RGB format validation
    return rgb.toString(16);
} 

Hope it helps!