HSL a HEX: Entender Códigos de Color por Matiz, Saturación y Luminosidad

HSL es una de las formas más intuitivas de pensar en el color — pero muchas variables CSS, tokens de diseño y entregas siguen usando HEX.

Si tienes un color HSL como hsl(217, 91%, 60%) y necesitas un valor HEX como #3B82F6, esta guía es para ti. Aprenderás qué significan Matiz, Saturación y Luminosidad y la forma más rápida de convertir HSL → HEX con la herramienta en línea Tooladex.

---

⚡ Convertir HSL a HEX en Segundos

1. Ve al conversor HSL a HEX — Conversor HSL a HEX.
2. Pega tu valor HSL — Por ejemplo hsl(217, 91%, 60%) o 217, 91%, 60%.
3. Copia el resultado HEX — Por ejemplo #3B82F6.

---

✅ Por Qué Convertir HSL → HEX

HSL es ideal para pensar y ajustar; HEX sigue siendo la «moneda» por defecto en muchos flujos:

• Variables CSS / tokens de diseño — a menudo en HEX
• Entregas de diseño — guías de marca suelen usar muestras HEX
• Librerías y configs — muchas herramientas aceptan HEX como entrada principal
• Compartir — HEX es compacto y fácil de pegar en cualquier sitio

---

🧠 Qué Significan H, S y L

Matiz (H)

Posición en el círculo cromático, en grados:

• 0° = rojo
• 120° = verde
• 240° = azul
• 360° = vuelve al rojo

Saturación (S)

Intensidad del color:

• 0% = escala de grises (sin color)
• 100% = totalmente saturado

Luminosidad (L)

Claridad del color:

• 0% = negro
• 50% = brillo «normal»
• 100% = blanco

Por eso HSL es tan útil para temas: puedes mantener el matiz y ajustar S y L para obtener variaciones.

---

🎛️ Consejo: HSL para Variaciones

Si montas un sistema de temas, mantén H igual (color de marca), ajusta L para fondos más claros u oscuros y S para estados más suaves. Luego convierte a HEX para el sistema que lo requiera.

---

🛠 Solución de Problemas

• Signos de porcentaje — En CSS, S y L deben ser porcentajes: ✅ hsl(217, 91%, 60%) — ❌ hsl(217, 91, 60).
• Matiz fuera de rango — H puede dar la vuelta (p. ej. 370° ≈ 10°); mantener 0–360 facilita el razonamiento.
• Transparencia — Usa HSLA o un formato con alpha (RGBA / HEX con alpha). El Conversor de colores trabaja con HSL/HSLA, HEX, RGB/RGBA, HSV y CMYK.

---

📌 Referencia Rápida

Formato	Rango típico	Ejemplo
HSL	H: 0–360°, S/L: 0–100%	hsl(217, 91%, 60%)
HEX	00–FF por canal	#3B82F6

---

🚀 Prueba el Conversor HSL a HEX de Tooladex

• Conversión HSL → HEX al instante
• Copiar/pegar fácil
• Funciona en local en el navegador