domingo, 1 de mayo de 2022

Colores HTML RGB y RGBA


Un valor de color RGB representa las fuentes de luz RED, GREEN y BLUE.

Un valor de color RGBA es una extensión de RGB con un canal Alfa (opacidad).

Valores de color RGB

En HTML, se puede especificar un color como un valor RGB, utilizando esta fórmula:

rgb (rojo, verde, azul)

Cada parámetro (rojo, verde y azul) define la intensidad del color con un valor entre 0 y 255.

Esto significa que hay 256 x 256 x 256 = 16777216 colores posibles!

Por ejemplo, rgb(255, 0, 0) se muestra como rojo, porque el rojo se establece en su valor más alto (255) y los otros dos (verde y azul) se establecen en 0.

Otro ejemplo, rgb(0, 255, 0) se muestra como verde, porque el verde se establece en su valor más alto (255) y los otros dos (rojo y azul) se establecen en 0.

Para mostrar el negro, establezca todos los parámetros de color en 0, de la siguiente manera: rgb(0, 0, 0).

Para mostrar blanco, establezca todos los parámetros de color en 255, de la siguiente manera: rgb(255, 255, 255).

Experimente mezclando los siguientes valores RGB:

Ejemplo

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)











❮ Anterior


Tonos de gris

Los tonos de gris a menudo se definen utilizando valores iguales para los tres parámetros:

Ejemplo

rgb(60, 60, 60)
rgb(100, 100, 100)
rgb(140, 140, 140)
rgb(180, 180, 180)
rgb(200, 200, 200)
rgb(240, 240, 240)











❮ Anterior

Valores de color RGBA

Los valores de color RGBA son una extensión de los valores de color RGB con un canal Alfa, que especifica la opacidad de un color.

Se especifica un valor de color RGBA con:

rgba (rojo, verde, azul, alfa)

El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0 (no transparente en absoluto):

Experimente mezclando los valores RGBA a continuación:

Ejemplo

rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)











❮ Anterior

No hay comentarios:

Publicar un comentario

Imágenes HTML

Las imágenes pueden mejorar el diseño y la apariencia de una página web. Ejemplo < img  src ="pic_trulli.jpg"  alt ="Itali...

Política de Privacidad
Este sitio utiliza cookies de Google para analizar el tráfico a este sitio. La información sobre su uso de nuestro sitio se comparte con Google para ese propósito. Acepto Más información