What is the preferred way to create colors with JavaScript from RGB colors so that they can then be used to style elements as in the form of CSS colors like the following.

document.getElementById("some_id").style.color = "some_value"

Example below:

const colorsCbfRainbowRGB = {
  violet: [120,28,129],
  indigo: [64,67,153],
  blue: [72,139,194],
  green: [107,178,140],
  olive: [159,190,87],
  yellow: [210,179,63],
  orange: [231,126,49],
  red: [217,33,32]
}

What is the preferred way to create colors with JavaScript from RGB colors so that they can then be used to style elements as in the form of CSS colors like the following.

document.getElementById("some_id").style.color = "some_value"

Example below:

const colorsCbfRainbowRGB = {
  violet: [120,28,129],
  indigo: [64,67,153],
  blue: [72,139,194],
  green: [107,178,140],
  olive: [159,190,87],
  yellow: [210,179,63],
  orange: [231,126,49],
  red: [217,33,32]
}

• javascript
• css
• dom
• colors

Share Improve this question Follow edited Dec 28, 2016 at 3:25 Alexander O'Mara 60.6k1919 gold badges172172 silver badges181181 bronze badges asked Dec 24, 2016 at 6:17 user3206440user3206440 5,0691616 gold badges8484 silver badges138138 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You can convert to rgb(r, g, b) CSS colors very easily.

function rgb(values) {
    return 'rgb(' + values.join(', ') + ')';
}
console.log(rgb(colorsCbfRainbowRGB.violet));

This is supported by any browser worth mentioning, and simpiler than converting to hexadecimal.

You could use a string template with rgb() and RGB numbers.

function setColor(color) {
    const colorsCbfRainbowRGB = { violet: [120, 28, 129], indigo: [64, 67, 153], blue: [72, 139, 194], green: [107, 178, 140], olive: [159, 190, 87], yellow: [210, 179, 63], orange: [231, 126, 49], red: [217, 33, 32] };
    document.getElementById("out").style.color = `rgb(${colorsCbfRainbowRGB[color]})`;
}

setColor('orange');

<div id="out">foo bar baz</div>

Create random color(it's not only RGB colors)

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
      for (var i = 0; i < 6; i++ ) {
          color += letters[Math.floor(Math.random() * 16)];
      }
    return color;
}

Hope this Helps!!!

Use the hex rappresentation of a color: #rrggbb

Where rr is the amount of red from 00 to FF, gg the green and bb the blue.