Modelo de color RGB en JavaScript

El atributo de color de CSS representa el color del elemento, que se puede definir utilizando varias formas como RGB, HSL, LCH, HWB, Palabra clave de color, etc. Puede leer más sobre estos Varias formas de representar el color significan aquí: https://en.wikipedia.org/wiki/Color_theory.

RGB es un modelo de color popular que es compatible con todos los navegadores. RGB significa rojo, azul y verde, también conocidos como colores primarios. Varias proporciones de estos colores primarios producirán muchos más tonos de color.

El modelo cúbico RGB representa el color rojo en el eje X, el color verde en el eje Y y el color azul en el eje Z. Si las tres coordenadas se encuentran en 0, eso representa el color negro y 255 representa el color blanco.

Los colores RGB se pueden definir de dos formas, la forma funcional y la forma hexadecimal.

La notación funcional acepta los formatos de color Aritmética, Porcentaje, Digital de 8 bits por canal, Digital de 12 bits por canal, Digital de 16 bits por canal y Digital de 24 bits por canal. La notación hexadecimal se puede definir de dos formas, utilizando 6 dígitos o 3 dígitos.

Sintaxis del color rgb() en JavaScript

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

Parámetro de color rgb() en JavaScript

• $red: Es un parámetro obligatorio que define la intensidad de la caída del rojo en el color final. Su rango es 0-255 en notación funcional y 0-9, A-F en notación hexadecimal.
• $green: Es un parámetro obligatorio que define la intensidad de la caída del verde en el color final. Su rango es 0-255 en notación funcional y 0-9, A-F en notación hexadecimal.
• $blue: Es un parámetro obligatorio que define la intensidad de la caída de azul en el color final. Su rango es 0-255 en notación funcional y 0-9, A-F en notación hexadecimal.
• $alpha: Es un parámetro opcional que define la transparencia del color. Toma valor en porcentaje, valor flotante.

Código de ejemplo:

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

Producción: