Modèle de couleur RGB en JavaScript

L’attribut color de CSS représente la couleur de l’élément, qui peut être définie de différentes manières comme RGB, HSL, LCH, HWB, Color keyword, etc. Vous pouvez en savoir plus sur ce que ces différentes manières de représenter la couleur signifient ici : https://en.wikipedia.org/wiki/Color_theory.

RGB est un modèle de couleur populaire qui est pris en charge par tous les navigateurs. RVB signifie rouge, bleu et vert, également appelés couleurs primaires. Différentes proportions de ces couleurs primaires produiront beaucoup plus de nuances de couleurs.

Le modèle cubique RGB représente la couleur rouge sur l’axe X, la couleur verte sur l’axe Y et la couleur bleue sur l’axe Z. Si les trois coordonnées se rencontrent à 0, cela représente la couleur noire et 255 représente la couleur blanc.

Les couleurs RVB peuvent être définies de deux manières, la manière fonctionnelle et la manière hexadécimale.

La notation fonctionnelle accepte les formats de couleur arithmétique, pourcentage, numérique 8 bits par canal, numérique 12 bits par canal, numérique 16 bits par canal et numérique 24 bits par canal. La notation hexadécimale peut être définie de deux manières, soit en utilisant 6 chiffres ou 3 chiffres.

Syntaxe de rgb() Couleur en JavaScript

rgb($red, $green, $blue);
rgba($red, $green, $blue, $alpha);
#RRGGBB[AA]
#RGB[A]

Paramètre de rgb() Couleur en JavaScript

• $red : C’est un paramètre obligatoire qui définit l’intensité de la chute de rouge dans la couleur finale. Sa plage est 0-255 en notation fonctionnelle et 0-9, A-F en notation hexadécimale.
• $green : C’est un paramètre obligatoire qui définit l’intensité de la chute verte dans la couleur finale. Sa plage est 0-255 en notation fonctionnelle et 0-9, A-F en notation hexadécimale.
• $blue : C’est un paramètre obligatoire qui définit l’intensité de la chute de bleu dans la couleur finale. Sa plage est 0-255 en notation fonctionnelle et 0-9, A-F en notation hexadécimale.
• $alpha : C’est un paramètre optionnel qui définit la transparence de la couleur. Il prend la valeur en pourcentage, valeur flottante.

Exemple de code :

<div id="demo">
  <h1>Hello world!</h1>
  <p>Welcome to RGB tutorial</p>
</div> 

div {
    color: rgb(12, 45, 255, 0.7);
    padding: 20px;
}

<script>
const tag = document.getElementById("demo");
tag.style.color = "rgb(255, 45, 255, 0.7)";
</script>

Production :