div class change color from color name to color #code

Question

I want to use color code. For example #e06666 instead of red.

content.push('<p><div class="color red"></div>Whole Foods Market</p>');

How should I do it?

red is a class name, so you could change the appropriate css to use that color. — James, May 26 '17 at 16:35

score 3 · Accepted Answer · answered May 26 '17 at 16:37

In this concrete example you should use:

content.push('<p><div class="color" style="color:#e06666"></div>Whole Foods Market</p>');

However, it's much better to define CSS style:

.custom-color {
    color: #e06666;
}

and set a class for the div tag:

content.push('<p><div class="color custom-color"></div>Whole Foods Market</p>');

score 0 · Answer 2 · answered May 26 '17 at 16:35

0

content.push('<p><div style="color = #e06666"></div>Whole Foods Market</p>');

answered May 26 '17 at 16:35

Patrick Sampaio

390
2
13

It would be `color: #e06666` as appose to `color = #e06666`. I couldn't edit your answer as my edit was too short. – Dan May 26 '17 at 16:37

score 0 · Answer 3 · answered May 26 '17 at 16:44

Since this is a class and not a color reference, you have to find your css file which would be defined on your page with a tag or you may have a block on your page that includes the .red class.

In either location you should see something like this.

.red{
    color:red;
}

replace the color:red; line with color:#e06666;

score 0 · Answer 4 · answered May 26 '17 at 16:50

You can get rgb() value of "red" keyword using window.getComputedStyle(), convert rgb() to hexadecimal see RGB to Hex and Hex to RGB.

//https://stackoverflow.com/a/5624139/
function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

var content = [];

var div = document.createElement("div");
document.body.appendChild(div);
div.style.color = "red";

content.push(`<p><div class="color ${rgbToHex.apply(null, window.getComputedStyle(div).color.match(/\d+/g).map(Number))}"></div>Whole Foods Market</p>`);

console.log(content);

div class change color from color name to color #code

4 Answers4