Colores CSS
CSS admite más de 140 nombres de colores, valores HEX, valores RGB , valores RGBA, valores HSL, valores HSLA y opacidad.
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).
El siguiente ejemplo define diferentes colores RGBA:
Ejemplo
#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 es un grado en la rueda de colores (de 0 a 360):
- 0 (o 360) es rojo
- 120 es verde
- 240 es azul
- La saturación es un valor porcentual: 100% es el color completo.
- La ligereza también es un porcentaje; 0% es oscuro (negro) y 100% es blanco.
El siguiente ejemplo define diferentes colores HSL:
Ejemplo
#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).
El siguiente ejemplo define diferentes colores HSLA:
Ejemplo
#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 opacity
valor de la propiedad debe ser un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).
¡Observe que el texto de arriba también será transparente/opaco!
El siguiente ejemplo muestra diferentes elementos con opacidad:
Ejemplo
#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 */