Colores CSS

Colores 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 (totalmente transparente) y 1,0 (totalmente opaco).

Ejm

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */

Colores HSL

HSL significa Tono, Saturación y Luminosidad. Un valor de color HSL se especifica con: hsl(tono, saturación, luminosidad).

  • Hue (tono): es un grado en la rueda de colores (de 0 a 360):
    • 0 (o 360) es rojo
    • 120 es verde
    • 240 es azul
  • Saturation (saturación). es un valor porcentual: 100% es el color completo.
  • Lightness (luminosidad): también es un porcentaje; 0% es oscuro (negro) y 100% es blanco.

Ejm

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */

Colores HSLA

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(tono, saturación, luminosidad, alfa), donde el parámetro alfa define la opacidad. El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).

Ejm

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */

Opacidad

La propiedad CSS opacity establece la opacidad de todo el elemento (tanto el color de fondo como el texto serán opacos/transparentes). El valor de la propiedad opacity debe ser un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).

Ejm

#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 */