Couleurs à partir de valeurs RVB dans un tableau JavaScript

Question

Quelle est la meilleure façon de créer des couleurs avec JavaScript à partir de couleurs RVB afin qu'elles puissent ensuite être utilisées pour styliser des éléments sous la forme de couleurs CSS comme celles qui suivent.

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

Exemple ci-dessous :

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]
}

Answer 1

Vous pouvez convertir en rgb(r, g, b) Les couleurs CSS très facilement.

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

Cette méthode est prise en charge par tout navigateur digne de ce nom et est plus simple que la conversion en hexadécimal.

Answer 2

Créez des couleurs aléatoires (il ne s'agit pas seulement de couleurs RVB).

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

J'espère que cela vous aidera !!!

Answer 3

Vous pouvez utiliser un modèle de chaîne de caractères avec rgb() et les nombres RGB.

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>

Answer 4

Utilisez la représentation hexagonale d'une couleur : #rrggbb

Où rr est la quantité de rouge de 00 à FF, gg le vert et bb le bleu.