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

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