Colores de CSS

Soporte CSS 140 nombres de coloresy también valores en hexadecimal, valores RGB, valores RGBA, valores HSL, valores HSLA y opacidad.

Color RGBA

El valor de color RGBA es una extensión del valor de color RGB, con un canal alpha - este canal especifica la opacidad del color.

El valor de color RGBA se define así: rgba(red, green, blue, alpha) alpha El parámetro es un número entre 0.0 (completamente transparente) y 1.0 (completamente 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);

El siguiente ejemplo define diferentes colores RGBA:

Ejemplo

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Red con transparencia */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Green con transparencia */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Blue con transparencia */

Prueba personalmente

Color HSL

HSL se refiere al tono, saturación y brillo (Hue, Saturation y Lightness).

El valor de color HSL se define así: hsl(hue, saturation, lightness).

El tono es el ángulo en la rueda de colores (desde 0 hasta 360):

  • 0 (o 360) es el color rojo
  • 120 es el color verde
  • 240 es el color azul

La saturación es un valor porcentual: 100% es el color completo.

La brillo también es un valor porcentual: 0% es el color oscuro (negro), mientras que 100% es el blanco.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

A continuación se muestra un ejemplo de diferentes colores HSL:

Ejemplo

#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 pálido */

Prueba personalmente

Color HSLA

El valor del color HSLA es una extensión del valor del color HSL con canal Alpha - especifica la opacidad del color.

El valor del color HSLA se determina por los siguientes parámetros: hsla(hue, saturation, lightness, alpha), donde el parámetro alpha define la opacidad. El parámetro alpha es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

A continuación se muestra un ejemplo de diferentes colores HSLA:

Ejemplo

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Verde con opacidad */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Verde claro con opacidad */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Verde oscuro con opacidad */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Verde pálido con opacidad */

Prueba personalmente

Opacidad

CSS opacity La propiedad establece la opacidad del elemento completo (tanto el color de fondo como el texto estarán opacos/translúcidos).

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

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacidad:0.6;
rgb(255, 0, 0); opacidad:0.8;

¡Atención, el texto anterior también será transparente/opaco!

El siguiente ejemplo muestra diferentes elementos con opacidad:

Ejemplo

#p1 {color de fondo:rgb(255,0,0);opacidad:0.6;}  /* Rojo con opacidad */
#p2 {color de fondo:rgb(0,255,0);opacidad:0.6;}  /* Verde con opacidad */
#p3 {color de fondo:rgb(0,0,255);opacidad:0.6;}  /* Azul con opacidad */

Prueba personalmente