Convertir HEX a HSL
Escribe un valor HEX y obtén HSL al momento. Todo se calcula en tu navegador: nada se envía a un servidor.
Cómo se calcula
Primero se pasa el HEX a RGB y luego a tono (0–360°), saturación y luminosidad. La diferencia entre el canal mayor y el menor marca la saturación; su media, la luminosidad.
HEX
HEX es exactamente el mismo trío rojo-verde-azul que RGB, escrito en base 16 para que cada canal quepa en dos caracteres. Sobrevive en todas partes — CSS, herramientas de diseño, archivos de configuración — porque es corto e inequívoco. Las mayúsculas dan igual y #abc abrevia #aabbcc. Un HEX de ocho dígitos añade el alfa al final: por eso #FF000080 es rojo semitransparente.
HSL
HSL reorganiza el mismo color en ejes que una persona sí puede manejar: el tono como ángulo de 0 a 360°, la saturación y la luminosidad como porcentajes. ¿Quieres una versión más clara del mismo color? Sube la luminosidad y deja lo demás. El problema es que esa luminosidad es aritmética, no perceptual: un amarillo al 50% se ve mucho más claro que un azul al 50%.
De HEX a HSL, paso a paso
Resuelto con #FF6347. Todos los números salen del mismo motor que usa el conversor de arriba.
-
Separar en pares
#FF6347 → FF · 63 · 47 -
Leer cada par en base 16
R FF = 15×16 + 15 = 255 G 63 = 6×16 + 3 = 99 B 47 = 4×16 + 7 = 71 -
Escalar cada canal a 0–1
R 1 G 0.388 B 0.278 -
Canal mayor y menor
max 1 min 0.278 max−min 0.722 -
Luminosidad
L = (max+min)/2 = 0.639 = 63.9% -
Saturación
S = (max−min)/(1−|2L−1|) = 100% -
Ángulo de tono
H = 9.1° -
Resultado
hsl(9, 100%, 64%)
Ejemplos de HEX a HSL
| Color | HEX | HSL |
|---|---|---|
| Red | #FF0000 |
hsl(0, 100%, 50%) |
| Tomato | #FF6347 |
hsl(9, 100%, 64%) |
| Orange | #FFA500 |
hsl(39, 100%, 50%) |
| Gold | #FFD700 |
hsl(51, 100%, 50%) |
| Limegreen | #32CD32 |
hsl(120, 61%, 50%) |
| Teal | #008080 |
hsl(180, 100%, 25%) |
| Dodgerblue | #1E90FF |
hsl(210, 100%, 56%) |
| Royalblue | #4169E1 |
hsl(225, 73%, 57%) |
| Blueviolet | #8A2BE2 |
hsl(271, 76%, 53%) |
| Hotpink | #FF69B4 |
hsl(330, 100%, 71%) |
Preguntas frecuentes
¿Por qué el tono salta en los grises?
Un gris no tiene canal dominante, así que el ángulo de tono queda indefinido y por convención se anota como 0. Cualquier tono vale porque la saturación es 0: el número rellena el hueco, no significa nada.
¿Puedo redondear los números HSL antes de usarlos?
Redondear el tono a grados enteros es seguro. Redondear saturación y luminosidad a porcentajes enteros puede desplazar el color un paso o dos, algo que se nota si vuelves a HEX y comparas.
¿La luminosidad de HSL es la que usa el verificador de contraste?
No. Las relaciones de contraste usan luminancia relativa, que pondera el verde mucho más que el azul. Un color puede estar al 50% de luminosidad HSL y aun así fallar el contraste sobre blanco.