15-Colores HSL y HSLA en html

Jorge Catalao septiembre 17, 2024

HSL es un modelo de color basado en tres componentes:

Hue (Matiz): Representa el color en sí mismo, en un rango de 0 a 360 grados. Cada grado corresponde a un color en el círculo cromático, donde 0° (o 360°) es rojo, 120° es verde, y 240° es azul. Saturation (Saturación): Indica la intensidad o pureza del color. Va del 0% al 100%, donde 0% es un tono gris y 100% es el color puro. Lightness (Luminosidad): Refleja la cantidad de blanco o negro añadido al color. Va del 0% (negro) al 100% (blanco), con 50% representando el color puro.

El formato de color HSL se representa así: hsl(hue, saturation%, lightness%).




Colores HSL y HSLA

Hue (Matiz):
Definición: Representa el color en sí mismo, especificado en grados en el círculo cromático.
Rango: De 0° a 360°.
Ejemplos: 0° (o 360°) es rojo, 120° es verde, 240° es azul.
Saturation (Saturación):
Definición: Mide la intensidad del color. Un valor alto significa un color puro, mientras que un valor bajo produce un color grisáceo.
Rango: De 0% (gris) a 100% (color puro).
Lightness (Luminosidad):
Definición: Indica la cantidad de blanco o negro añadido al color. Un valor del 50% representa el color puro sin adición de blanco o negro.
Rango: De 0% (negro) a 100% (blanco).
Formato HSL:
hsl(hue, saturation%, lightness%)

Ejemplo

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)


Código del ejemplo 

                                               <div class="bg-primary p-3 border rounded mt-3">
           <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
           <div class="bg-white p-3">
               <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
               <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
               <h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
               <h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
               <h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
               <h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
           </div>
       </div>


hsl(0, 100%, 50%)

...

Saturación en colores HSL

Saturation (Saturación):
Definición: Mide la intensidad del color. Un valor alto indica un color puro y vibrante, mientras que un valor bajo produce un color más grisáceo y desaturado.
Rango: De 0% (gris) a 100% (color puro).

Saturación en colores HSL

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)


Código del ejemplo

                                           
     <div class="bg-primary p-3 border rounded mt-3">
     <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
     <h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
     <h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
     <h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
     <h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
     <h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
           </div>
       </div>


Luminosidad en colores HSL

Lightness (Luminosidad):
Definición: Representa la cantidad de blanco o negro añadido al color. Un valor del 50% representa el color puro sin adición de blanco o negro.
Rango: De 0% (negro) a 100% (blanco).

Ejemplo

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)


Código del ejemplo

                                           
                                           <div class="bg-primary p-3 border rounded mt-3">
           <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
           <div class="bg-white p-3">
           <h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
           <h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
           <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
           <h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
           <h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
           <h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>
           </div>
       </div>


Tono gris en colores HSL

Las sombras de gris se definen a menudo fijando el tono y la saturación a 0, y ajustar la ligereza del 0% al 100% para obtener tonos más oscuros/liger:

Ejemplo

hsl(0, 0%, 20%)

hsl(0, 0%, 30%)

hsl(0, 0%, 40%)

hsl(0, 0%, 60%)

hsl(0, 0%, 70%)

hsl(0, 0%, 90%)


Código del ejemplo

                                           
                                           <div class="bg-primary p-3 border rounded mt-3">
           <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
           <div class="bg-white p-3">
               <h1 style="background-color: hsl(0, 0%, 10%); color: white;">HSL(0, 0%, 10%)</h1>
               <h1 style="background-color: hsl(0, 0%, 30%); color: white;">HSL(0, 0%, 30%)</h1>
               <h1 style="background-color: hsl(0, 0%, 50%); color: white;">HSL(0, 0%, 50%)</h1>
               <h1 style="background-color: hsl(0, 0%, 70%); color: white;">HSL(0, 0%, 70%)</h1>
               <h1 style="background-color: hsl(0, 0%, 90%); color: white;">HSL(0, 0%, 90%)</h1>
               <h1 style="background-color: hsl(0, 0%, 100%); color: black;">HSL(0, 0%, 100%)</h1>
           </div>
       </div>


Tono colores HSLA

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

Un valor de color HSLA es se especifica con:

hsla (hue, saturación, ligereza, alfa)

El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1.0 (no transparente en absoluto)

Ejemplo

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)


Código del ejemplo

                                             
                                             <div class="bg-primary p-3 border rounded mt-3">
             <h3 style="font-family:Georgia; font-size:30px">Ejemplo</h3>
             <div class="bg-white p-3">
             <h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
             <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
             <h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
             <h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
             <h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
             <h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>
             </div>
         </div>


hsla(0, 100%, 50%, 1)
Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias