MEJOR SITIO PARA DESARROLLADORES WEB
HTML5 Lecciones para principiantes

Ua En De Fr

HTML Colores RGB y RGBA


Un valor de color RGB representa fuentes de luz ROJA, VERDE y AZUL.

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


Valores de color RGB

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

rgb(red, green, blue)

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 en rojo, porque el rojo está configurado en su valor más alto (255) y los otros dos (verde y azul) están configurados en 0.

Otro ejemplo, rgb(0, 255, 0) se muestra en verde, porque el verde está configurado en su valor más alto (255) y los otros dos (rojo y azul) están configurados en 0.

Para mostrar negro, establezca todos los parámetros de color en 0, así: rgb(0, 0, 0).

Para mostrar blanco, configure todos los parámetros de color en 255, así: rgb(255, 255, 255).

Experimenta mezclando los valores RGB siguientes:

 

RED

255

GREEN

0

BLUE

0

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)

Inténtalo tú mismo »

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)

Inténtalo tú mismo »

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.

Un valor de color RGBA se especifica con:

rgba(rojo, verde, azul, alfa)

El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (nada transparente):

Experimente mezclando los valores RGBA siguientes:

 

RED

255

GREEN

0

BLUE

0

ALPHA

0

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)

Inténtalo tú mismo »


Comentarios