Elegir un color en HSL es cómodo, pero hojas de estilo, handoffs de diseño y documentos de marca siguen usando HEX. Este conversor cierra la brecha y te da el código de seis dígitos para cualquier combinación de tono, saturación y luminosidad.
Cómo funciona la conversión de HSL a HEX
- Convierte saturación y luminosidad en fracciones: 60% se convierte en 0.6.
- Calcula la croma C = (1 − |2L − 1|) × S — eso indica cuánto se aleja el color del gris.
- Usa el matiz para colocar esa croma en los canales rojo, verde y azul, luego desplaza los tres por L − C/2.
- Multiplica cada canal por 255, redondea y escríbelo como dos dígitos hexadecimales.
Ejemplo práctico
El redondeo ocurre una vez, en el último paso, cuando cada canal se ajusta a un valor entero 0–255. El resultado es el código HEX más cercano a tu entrada HSL y normalmente idéntico a lo que muestra una herramienta de diseño.
HSL y HEX explicados
¿Qué es HSL?
HSL divide un color en tono (0–360° en la rueda de color), saturación (qué tan colorido, 0–100%) y luminosidad (qué tan claro, 0–100%). Como cada parte coincide con la forma en que la gente describe el color, HSL es el formato más sencillo para crear tintes, sombras y paletas coherentes — a mano o en código.
- Sintaxis:
- hsl(H, S%, L%)
- Rango:
- 0–360°, 0–100%, 0–100%
- Mejor para:
- paletas, tintes y sombras, theming
¿Qué es HEX?
Un código HEX es un número hexadecimal de seis dígitos que almacena los canales rojo, verde y azul de un color tras un # inicial. Cada par de dígitos representa un canal, de 00 (ninguno) a FF (completo), lo que da los mismos 16,7 millones de colores que RGB en una notación mucho más corta. HEX es el valor por defecto en CSS, herramientas de diseño y guías de marca.
- Sintaxis:
- #RRGGBB
- Rango:
- 00–FF por canal
- Mejor para:
- CSS, entrega de diseño, guías de marca
Tabla de referencia de HSL a HEX
Los colores CSS más comunes, convertidos de HSL a HEX.
| Color | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |