GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Colores en CSS (Avanzado)

CSS es compatible con más de 140 nombres de colores, los valores HEX, valores RGB , valores
RGBA, valores HSL, valores HSLA y opacidad.

Colores RGBA
Los valores de color RGBA son una extensión de 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 (totalmente opaco).

RGBA (255, 0, 0, 0,2);

RGBA (255, 0, 0, 0,4);

RGBA (255, 0, 0, 0,6);

RGBA (255, 0, 0, 0,8);

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* rojo con opacidad */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* verde con opacidad */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* azul con opacidad */

Ver: Código 248.html

HSL Colores
HSL significa Tono, Saturación y Luminosidad.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Un valor de color HSL se especifica con: hsl (tonalidad, saturación, luminosidad).

1. Hue es una medida de la rueda de color (de 0 a 360):

 0 (o 360) es de color rojo

 120 es verde
 240 es azul

2. La saturación es un valor de porcentaje: 100% es el color.

3. La ligereza es también un porcentaje; 0% es oscuro (negro) y 100% es de color blanco.

hsl (0, 100%, 30%);

hsl (0, 100%, 50%);

hsl (0, 100%, 70%);

hsl (0, 100%, 90%);

El ejemplo siguiente define diferentes colores HSL:

#p1 {background-color: hsl(120, 100%, 50%);} /* verde */

#p2 {background-color: hsl(120, 100%, 75%);} /* verde claro */
#p3 {background-color: hsl(120, 100%, 25%);} /* verde oscuro */
#p4 {background-color: hsl(120, 60%, 70%);} /* verde pastel */

Ver: Código 249.html

HSLA Colores
Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa - que
especifica la opacidad de un color.

Un valor de color HSLA se especifica con: HSLA (tonalidad, saturación, luminosidad, alfa), donde el
parámetro alfa define la opacidad. El parámetro alfa es un número entre 0,0 (completamente
transparente) y 1.0 (totalmente opaco).
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

HSLA (0, 100%, 30%, 0,3);

HSLA (0, 100%, 50%, 0,3);

HSLA (0, 100%, 70%, 0,3);

HSLA (0, 100%, 90%, 0,3);

El ejemplo siguiente define diferentes colores HSLA:

#p1 {background-color: hsl(120, 100%, 50%);} /* verde con opacidad*/

#p2 {background-color: hsl(120, 100%, 75%);} /* verde claro con opacidad */
#p3 {background-color: hsl(120, 100%, 25%);} /* verde oscuro con opacidad */
#p4 {background-color: hsl(120, 60%, 70%);} /* verde pastel con opacidad */

Ver: Código 250.html

Opacidad
La propiedad CSS opacity establece la opacidad del elemento de conjunto (tanto el color de
fondo y el texto va a ser opaco / transparente).

El valor opacity de la propiedad debe ser un número entre 0,0 (completamente transparente) y
1.0 (totalmente opaco).

RGB (255, 0, 0); opacidad 0,2;

RGB (255, 0, 0); opacidad 0,4;

RGB (255, 0, 0); opacidad 0,6;

RGB (255, 0, 0); opacidad 0,8;

Observe que el texto anterior también será transparente / opaco.

El siguiente ejemplo muestra los diferentes elementos con opacidad:

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

Ver: Código 251.html