Modelo de color RGB en JavaScript

Shraddha Paghdar 18 enero 2022
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:

Modelo de color RGB en JS

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

Artículo relacionado - JavaScript Color