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 en una caja

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>


...

Valores de colores HSL

Hue (Matiz):
Definición: Representa el color en sí mismo, especificado en grados en el círculo cromático.
Rango: De 0° a 360°.
Saturation (Saturación):
Definición: Mide la intensidad del color. Un valor alto indica 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(0, 50%, 50%)

hsl(0, 100%, 30%)

hsl(120, 100%, 50%)

hsl(120, 50%, 50%)

hsl(120, 100%, 30%)

hsl(240, 100%, 50%)

hsl(240, 50%, 50%)

hsl(240, 100%, 30%)


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(0, 50%, 50%);">hsl(0, 50%, 50%)</h1>
        <h1 style="background-color:hsl(0, 100%, 30%);">hsl(0, 100%, 30%)</h1>
        <h1 style="background-color:hsl(120, 100%, 50%);">hsl(120, 100%, 50%)</h1>
        <h1 style="background-color:hsl(120, 50%, 50%);">hsl(120, 50%, 50%)</h1>
        <h1 style="background-color:hsl(120, 100%, 30%);">hsl(120, 100%, 30%)</h1>
        <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
        <h1 style="background-color:hsl(240, 50%, 50%);">hsl(240, 50%, 50%)</h1>
        <h1 style="background-color:hsl(240, 100%, 30%);">hsl(240, 100%, 30%)</h1>
    </div>
</div>


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).

Tema 3: Valores RGB

rgb(255, 0, 0)

rgb(0, 255, 0)

rgb(0, 0, 255)

rgb(255, 255, 0)

rgb(255, 0, 255)

rgb(0, 255, 255)


Código del ejemplo

                                    
                                    <div class="bg-primary p-3 border rounded mt-3">
    <h3 style="font-family:Georgia; font-size:30px">Tema 3: Valores RGB</h3>
    <div class="bg-white p-3">
        <h1 style="background-color:rgb(255, 0, 0); color:white;">rgb(255, 0, 0)</h1>
        <h1 style="background-color:rgb(0, 255, 0); color:black;">rgb(0, 255, 0)</h1>
        <h1 style="background-color:rgb(0, 0, 255); color:white;">rgb(0, 0, 255)</h1>
        <h1 style="background-color:rgb(255, 255, 0); color:black;">rgb(255, 255, 0)</h1>
        <h1 style="background-color:rgb(255, 0, 255); color:white;">rgb(255, 0, 255)</h1>
        <h1 style="background-color:rgb(0, 255, 255); color:black;">rgb(0, 255, 255)</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%, 10%)

HSL(0, 100%, 30%)

HSL(0, 100%, 50%)

HSL(0, 100%, 70%)

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%, 10%); color: white;">HSL(0, 100%, 10%)</h1>
        <h1 style="background-color: hsl(0, 100%, 30%); color: white;">HSL(0, 100%, 30%)</h1>
        <h1 style="background-color: hsl(0, 100%, 50%); color: white;">HSL(0, 100%, 50%)</h1>
        <h1 style="background-color: hsl(0, 100%, 70%); color: white;">HSL(0, 100%, 70%)</h1>
        <h1 style="background-color: hsl(0, 100%, 90%); color: white;">HSL(0, 100%, 90%)</h1>
        <h1 style="background-color: hsl(0, 100%, 100%); color: black;">HSL(0, 100%, 100%)</h1>
    </div>
</div>


Tono gris en colores HSL

Hue (Matiz):
Definición: Representa el color en sí mismo, especificado en grados en el círculo cromático.
Rango: De 0° a 360°.
Saturation (Saturación):
Definición: Mide la intensidad del color. Un valor alto indica 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).

Ejemplo

HSL(0, 0%, 10%)

HSL(0, 0%, 30%)

HSL(0, 0%, 50%)

HSL(0, 0%, 70%)

HSL(0, 0%, 90%)

HSL(0, 0%, 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, 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>


Valores en colores HSL

Hue (Matiz):
Definición: Representa el color en sí mismo, especificado en grados en el círculo cromático.
Rango: De 0° a 360°.
Saturation (Saturación):
Definición: Mide la intensidad del color. Un valor alto indica 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).

Ejemplo

HSL(0, 100%, 50%)

HSL(120, 100%, 50%)

HSL(240, 100%, 50%)

HSL(0, 0%, 50%)

HSL(0, 50%, 50%)

HSL(0, 100%, 50%)

HSL(0, 100%, 10%)

HSL(0, 100%, 50%)

HSL(0, 100%, 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, 100%, 50%); color: white;">HSL(0, 100%, 50%)</h1>
        <h1 style="background-color: hsl(120, 100%, 50%); color: white;">HSL(120, 100%, 50%)</h1>
        <h1 style="background-color: hsl(240, 100%, 50%); color: white;">HSL(240, 100%, 50%)</h1>
        <h1 style="background-color: hsl(0, 0%, 50%); color: white;">HSL(0, 0%, 50%)</h1>
        <h1 style="background-color: hsl(0, 50%, 50%); color: white;">HSL(0, 50%, 50%)</h1>
        <h1 style="background-color: hsl(0, 100%, 50%); color: white;">HSL(0, 100%, 50%)</h1>
        <h1 style="background-color: hsl(0, 100%, 10%); color: white;">HSL(0, 100%, 10%)</h1>
        <h1 style="background-color: hsl(0, 100%, 50%); color: white;">HSL(0, 100%, 50%)</h1>
        <h1 style="background-color: hsl(0, 100%, 90%); color: black;">HSL(0, 100%, 90%)</h1>
    </div>
</div>



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