09-Colores HSL en CSS: Control Total del Color 🎨

---

Elementos Semánticos en HTML

• HSL Colors
• Valor HSL
• Saturación
• Ligereza
• Escalas de Gray
• Valor HSLA

---

HSL Colors

El modelo de color HSL (Hue, Saturation, Lightness) es una forma alternativa de representar colores en CSS. El matiz (Hue) es el ángulo en el círculo de color, mientras que la saturación (Saturation) indica la intensidad del color, y la ligereza (Lightness) controla el brillo. Es una opción popular para ajustarse a cómo percibimos visualmente los colores.

---

Valor HSL

En CSS, un color se puede especificar usando matiz (hue), saturación y ligereza en el formato hsl(matriz, porcentaje de saturación, porcentaje de ligereza).

El matiz es un grado en la rueda de color que va de 0 a 360: 0 representa el rojo, 120 es verde, y 240 es azul.

La saturación es un valor porcentual: 0% crea un tono de gris, mientras que 100% da el color más vibrante.

La ligereza se expresa en porcentaje: 0% es negro, 50% no es ni claro ni oscuro, y 100% es blanco.

Ejemplos Visuales

Matiz (Hue): 0
Saturación: 100%
Ligereza: 50%

---

Código del ejemplo visual

<div style="width: 100%; height: 200px; background-color: hsl(0, 100%, 50%);"></div>
<label>Matiz (Hue):</label>
<input type="range" min="0" max="360" value="0" />
<label>Saturación:</label>
<input type="range" min="0" max="100" value="100" />
<label>Ligereza:</label>
<input type="range" min="0" max="100" value="50" />
            

---

Saturación

La saturación puede describirse como la intensidad de un color. En el modelo HSL, la saturación se expresa como un porcentaje:

• 100%: El color es puro, sin tonos de gris.
• 50%: El color está a mitad de camino, tiene un 50% de gris, pero aún se puede distinguir el color.
• 0%: El color es completamente gris, no se distingue del color original.

Ajustando la saturación, puedes hacer que los colores sean más vibrantes o apagados sin cambiar su matiz o ligereza.

Ejemplos Visuales

hsl(120, 0%, 50%) - Gris

hsl(120, 50%, 50%) - Verde moderado

hsl(120, 100%, 50%) - Verde saturado

hsl(120, 0%, 30%) - Gris oscuro

hsl(120, 100%, 30%) - Verde oscuro saturado

Código del ejemplo visual

<div style="width: 100%; height: 50px; background-color: hsl(120, 0%, 50%);"> </div>
<div style="width: 100%; height: 50px; background-color: hsl(120, 50%, 50%);"> </div>
<div style="width: 100%; height: 50px; background-color: hsl(120, 100%, 50%);"> </div>
<div style="width: 100%; height: 50px; background-color: hsl(120, 0%, 30%);"> </div>
<div style="width: 100%; height: 50px; background-color: hsl(120, 100%, 30%);"> </div>
            

---

Ligereza

La ligereza de un color en el modelo HSL describe la cantidad de luz que tiene el color. En este sistema, la ligereza se expresa como un porcentaje:

• 0%: representa la ausencia de luz, lo cual resulta en un color negro.
• 50%: indica una ligereza media, donde el color no es ni oscuro ni claro.
• 100%: máxima ligereza, que produce el color blanco.

Ajustando la ligereza, puedes generar tonos del mismo color en una escala de claro a oscuro, sin cambiar su matiz o saturación.

Ejemplos Visuales

Ligereza: 50%

Código del ejemplo visual

<div style="width: 100%; height: 200px; background-color: hsl(120, 100%, 50%);"
     id="colorDisplayLigereza"></div>
<label for="ligerezaRange">Ligereza: <span id="ligerezaValue">50%</span></label>
<input type="range" id="ligerezaRange" min="0" max="100" value="50" onchange="actualizarLigereza()" />
            

---

Escalas de Gray

Las escalas de gray son tonos que van del blanco al negro. En el modelo HSL, se puede crear una escala de grises ajustando la ligereza y dejando el matiz y la saturación en 0. Esto resulta en una variación de grises sin tonalidad de color.

Ejemplos Visuales

hsl(0, 0%, 0%) - Negro

hsl(0, 0%, 20%) - Gris oscuro

hsl(0, 0%, 40%) - Gris medio oscuro

hsl(0, 0%, 60%) - Gris medio

hsl(0, 0%, 80%) - Gris claro

hsl(0, 0%, 100%) - Blanco

Código del ejemplo visual

<div style="width: 100%; height: 50px; background-color: hsl(0, 0%, 0%); color: #fff;"> </div>
<div style="width: 100%; height: 50px; background-color: hsl(0, 0%, 20%); color: #fff;"> </div>
<div style="width: 100%; height: 50px; background-color: hsl(0, 0%, 40%); color: #fff;"> </div>
<div style="width: 100%; height: 50px; background-color: hsl(0, 0%, 60%); color: #fff;"> </div>
<div style="width: 100%; height: 50px; background-color: hsl(0, 0%, 80%); color: #000;"> </div>
<div style="width: 100%; height: 50px; background-color: hsl(0, 0%, 100%); color: #000;"> </div>
            

---

Valor HSLA

HSLA es una extensión del modelo HSL que incluye un canal de opacidad (Alpha), permitiendo controlar la transparencia del color en el formato hsla(matriz, porcentaje de saturación, porcentaje de ligereza, alpha).

El valor alpha va de 0 (totalmente transparente) a 1 (completamente opaco). Por ejemplo, hsla(120, 100%, 50%, 0.5) representa un verde medio con un 50% de transparencia.

Ejemplos Visuales

Matiz (Hue): 0
Saturación: 100%
Ligereza: 50%
Alpha (Transparencia): 1.0

Código del ejemplo visual

<div style="width: 100%; height: 200px; background-color: hsla(0, 100%, 50%, 1);"></div>
<label>Matiz (Hue):</label>
<input type="range" min="0" max="360" value="0" />
<label>Saturación:</label>
<input type="range" min="0" max="100" value="100" />
<label>Ligereza:</label>
<input type="range" min="0" max="100" value="50" />
<label>Alpha (Transparencia):</label>
<input type="range" min="0" max="1" step="0.1" value="1" />
            

---

Ir al índice

---