Convertir HSL a HEX
Escribe un valor HSL y obtén HEX al momento. Todo se calcula en tu navegador: nada se envía a un servidor.
Cómo se calcula
El tono, la saturación y la luminosidad se convierten de nuevo a RGB, y cada canal se escribe con dos dígitos hexadecimales. La saturación se aprecia mejor con un 50% de luminosidad.
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%.
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.
De HSL a HEX, paso a paso
Resuelto con #FF6347. Todos los números salen del mismo motor que usa el conversor de arriba.
-
De HSL a RGB
hsl(9.1 100% 63.9%) → rgb(255, 99, 71) -
Escribir cada canal en base 16
R 255 = 15×16 + 15 → FF G 99 = 6×16 + 3 → 63 B 71 = 4×16 + 7 → 47 -
Unirlos
# + FF + 63 + 47 = #FF6347
Ejemplos de HSL a HEX
| Color | HSL | HEX |
|---|---|---|
| Red | hsl(0, 100%, 50%) |
#FF0000 |
| Tomato | hsl(9, 100%, 64%) |
#FF6347 |
| Orange | hsl(39, 100%, 50%) |
#FFA500 |
| Gold | hsl(51, 100%, 50%) |
#FFD700 |
| Limegreen | hsl(120, 61%, 50%) |
#32CD32 |
| Teal | hsl(180, 100%, 25%) |
#008080 |
| Dodgerblue | hsl(210, 100%, 56%) |
#1E90FF |
| Royalblue | hsl(225, 73%, 57%) |
#4169E1 |
| Blueviolet | hsl(271, 76%, 53%) |
#8A2BE2 |
| Hotpink | hsl(330, 100%, 71%) |
#FF69B4 |
Preguntas frecuentes
¿Por qué mi HEX no vuelve exactamente al mismo HSL?
HEX guarda 256 pasos por canal, así que el resultado se ajusta al más cercano. El tono y la saturación fraccionarios caen entre pasos y regresan algo desplazados.
¿Y si introduzco un tono mayor que 360?
Da la vuelta, porque el tono es un ángulo: 400° es 40° y −20° es 340°. Resulta cómodo cuando generas paletas sumando un paso fijo al tono en un bucle.
Con luminosidad 100% o 0% se ignora mi tono, ¿es un fallo?
No. Al 100% todos los canales llegan al máximo (blanco) y al 0% son cero, así que tono y saturación no tienen nada sobre lo que actuar. Mantente entre el 10% y el 90% si quieres que el tono se vea.