How do I write a RGB color value in JavaScript?

JavascriptFunctionCoding StyleColorsRgb

Javascript Problem Overview


I am trying to change the color of the function swapFE() below and I can't figure out how to write it. I was told to change the color of the phrase node to the color value (155, 102, 102). I tried to do that as you can see at the end of the function see- parent.childNodes[1].style.color= (155, 102, 102); but it just comes out a dark navy blue. It's supposed to be a brownish red. I have no idea what I'm doing wrong. How can I fix this to get the correct RGB color? I know I have the rest right it's just figuring out how to write the color and the value that's giving me problems. Thanks!

//this function changes the French phrase to an English phrase. 
    function swapFE(e) { 
           var phrase = e.srcElement;  
           //phrase.innerText = english[phrase.id]; 
           var parent = phrase.parentNode; 
           //childNodes[0] is the number of the phrase +1  
           var idnum = parent.childNodes[0]; 
           //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number. 
 
       var phrasenum = parseInt(idnum.innerHTML)-1; 
       phrase.innerText = english[phrasenum]; 
       parent.childNodes[1].style.fontStyle= "normal"; 
       parent.childNodes[1].style.color= (155, 102, 102); 
  } 
 
 
function swapEF(e) { 
       var phrase = e.srcElement;  
       //phrase.innerText = english[phrase.id]; 
       var parent = phrase.parentNode; 
       var idnum = parent.childNodes[0]; 
       var phrasenum = parseInt(idnum.innerHTML)-1; 
       phrase.innerText = french[phrasenum]; 
       parent.childNodes[1].style.fontStyle= "italic"; 
       parent.childNodes[1].style.color= "black"; 

Javascript Solutions


Solution 1 - Javascript

try:

parent.childNodes[1].style.color = "rgb(155, 102, 102)"; 

Or

parent.childNodes[1].style.color = "#"+(155).toString(16)+(102).toString(16)+(102).toString(16);

Solution 2 - Javascript

Here's a simple function that creates a CSS color string from RGB values ranging from 0 to 255:

function rgb(r, g, b){
  return "rgb("+r+","+g+","+b+")";
}

Alternatively (to create fewer string objects), you could use array join():

function rgb(r, g, b){
  return ["rgb(",r,",",g,",",b,")"].join("");
}

The above functions will only work properly if (r, g, and b) are integers between 0 and 255. If they are not integers, the color system will treat them as in the range from 0 to 1. To account for non-integer numbers, use the following:

function rgb(r, g, b){
  r = Math.floor(r);
  g = Math.floor(g);
  b = Math.floor(b);
  return ["rgb(",r,",",g,",",b,")"].join("");
}

You could also use ES6 language features:

const rgb = (r, g, b) => 
  `rgb(${Math.floor(r)},${Math.floor(g)},${Math.floor(b)})`;

Solution 3 - Javascript

this is better function

function RGB2HTML(red, green, blue)
{
    var decColor =0x1000000+ blue + 0x100 * green + 0x10000 *red ;
    return '#'+decColor.toString(16).substr(1);
}

Solution 4 - Javascript

I am showing with an example of adding random color. You can write this way

var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var col = "rgb(" + r + "," + g + "," + b + ")";
parent.childNodes[1].style.color = col;

The property is expected as a string

Solution 5 - Javascript

ES6 (template literal) helper functions:

function rgba(r, g, b, a=1){
    return `rgba(${r}, ${g}, ${b}, ${a})`
}
function rgb(r, g, b){
    return `rgb(${r}, ${g}, ${b})`
}

Solution 6 - Javascript

Similar to asd's answer but faster and simpler (using bitwise operations):

function rgb(red, green, blue) {
    return (red & 0xF0 ? '#' : '#0') + (red << 16 | green << 8 | blue).toString(16)
}

Solution 7 - Javascript

dec2hex = function (d) {
  if (d > 15)
    { return d.toString(16) } else
    { return "0" + d.toString(16) }
}
rgb = function (r, g, b) { return "#" + dec2hex(r) + dec2hex(g) + dec2hex(b) };

and:

parent.childNodes[1].style.color = rgb(155, 102, 102);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAshleyView Question on Stackoverflow
Solution 1 - JavascriptMariusView Answer on Stackoverflow
Solution 2 - JavascriptcurranView Answer on Stackoverflow
Solution 3 - JavascriptasdView Answer on Stackoverflow
Solution 4 - JavascriptEin2012View Answer on Stackoverflow
Solution 5 - JavascriptScott WeaverView Answer on Stackoverflow
Solution 6 - JavascriptsaeedkazemiView Answer on Stackoverflow
Solution 7 - JavascriptBanditView Answer on Stackoverflow