70

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";
Improve this question

8 Answers 8

Reset to default
99

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);
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

parent.childNodes[1].style.color = "rgb(155, 102, 102)"; ....worked! Thank you so much!
Warning! The second solution does not work if one of the color is < 16. Example for pure red: "#"+(255).toString(16)+(0).toString(16)+(0).toString(16) gives #FF00 which is not a correct color code.
Use padStart(2,'0'). I've changed the G and B values to check against <16. "#"+(155).toString(16).padStart(2,'0')+(2).toString(16).padStart(2,'0')+(3).toString(16).padStart(2,'0'); results now in "#9b0203"which is the expected. Reference: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Why I get this as result: colorLcl= #5c.db7bc07a5dc86d.eb59d144e6f79.cdf6b22b95 . Something wrong with your second suggestion
As an occasional JS user, "rgb(x, y, z)" seems absolutely mad to me. How can it be better to have the client code construct a string from numbers and then have the browser parse that string back into numbers to construct a colour? Why not have a browser-supplied function that returns a colour object that you can assign directly to the CSS properties?
25

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)})`;
Improve this answer

Comments

13

this is better function

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

Edit: Fixed typo in the decColor calculation

Improve this answer

1 Comment

You could use left-shift << instead of multiplication to make it less typo prone with the zeros etc.
5

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

Improve this answer

Comments

2

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})` }
Improve this answer

Comments

1

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) }
Improve this answer

Comments

1

Try creating a new variable that stores the RGB values as a string like this

let newColor = `rgb(${red},${green},${blue})`;

and then use the variable to pass values to the background of the DOM

document.body.style.backgroundColor = newColor;

idk why, but JS doesn't seem to accept direct rgb values. :/

Improve this answer

Comments

-1 
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);
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.