Colores CSS

Tabla de contenido

    Mostrar tabla de contenidos

CSS admite más de 140 nombres de colores, valores HEX, valores RGB, RGBA valores, 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. por 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).

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>

<h1>Define Colors With RGBA Values</h1>

<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>

</body>
</html>

Colores HSL

HSL significa Tono, Saturación y Luminosidad.

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

  1. El tono es un grado en la rueda de colores (de 0 a 360):

    • 0 (o 360) es rojo

    • 120 es verde

    • 240 es azul

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

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

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

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>

<h1>Define Colors With HSL Values</h1>

<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>

</body>
</html>

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 por un color.

Un valor de color HSLA se especifica con: hsla(tono, saturación, luminosidad, alfa), donde el El parámetro alfa define la opacidad. El parámetro alfa 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);

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>

<h1>Define Colors With HSLA Values</h1>

<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>

</body>
</html>

Opacidad

La propiedad CSS opacidad establece la opacidad para todo el elemento (tanto el color de fondo como el texto serán opacos/transparentes).

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

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

Tenga en cuenta que el texto anterior 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 */

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);opacity:0.6;}
#p2 {background-color:rgb(0,255,0);opacity:0.6;}
#p3 {background-color:rgb(0,0,255);opacity:0.6;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}
</style>
</head>
<body>

<h1>Define Colors With Opacity</h1>

<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>

</body>
</html>