Cómo usar esta herramienta para desarrolladores
- Pega HSL con tres valores.
- Ejecuta.
- Revisa el RGB intermedio.
- Copia el HEX.
Conversor HSL a HEX
Convierte HSL a un código HEX de seis dígitos. Introduce matiz en grados y saturación y luminosidad en porcentaje; la herramienta normaliza el ángulo, calcula el color RGB equivalente y lo redondea a bytes de 8 bits. Resulta útil al pasar de sistemas de temas basados en HSL a variables HEX o al consolidar tokens de diseño.
Datos de entrada
Color HSLEspacio publicitario
Qué hace esta herramienta para desarrolladores
Transforma la representación cilíndrica HSL a canales RGB y luego codifica cada byte como dos dígitos HEX.
Se calcula c=(1−|2L−1|)S, el componente x según el sector del matiz y un desplazamiento m para obtener RGB final.
El matiz se normaliza a 0–359.999… grados; S y L deben permanecer en 0–100%.
Ejemplo
hsl(210, 50%, 40%) → #336699
Casos de uso
- Migrar tokens HSL a HEX.
- Exportar colores a sistemas legacy.
- Verificar equivalencias CSS.
Consejos para obtener resultados fiables
- Usa grados para H.
- Incluye porcentajes de forma explícita al documentar.
- Ten en cuenta el redondeo a 8 bits.
- Comprueba contraste tras cualquier ajuste.
Detalles del procesamiento
La salida final usa canales enteros de 0 a 255, por lo que valores HSL continuos pueden redondearse.
No procesa alfa ni sintaxis CSS moderna con slash; esta versión se centra en HSL opaco.
Preguntas frecuentes
¿Cómo convertir hsl(210, 50%, 40%) a HEX?
La herramienta calcula primero RGB y devuelve #336699.
¿Qué pasa si el matiz HSL supera 360 grados?
El ángulo se normaliza módulo 360, de modo que 420° equivale a 60°.
¿Saturación y luminosidad pueden ser mayores que 100%?
No. La herramienta valida ambos valores en el intervalo 0–100%.
¿Por qué puede haber una pequeña diferencia al convertir HSL a HEX y de vuelta?
HEX usa canales de 8 bits y requiere redondeo, por lo que puede perderse una pequeña fracción.
¿El resultado HEX incluye transparencia?
No. Esta conversión genera HEX de seis dígitos y trata el color como opaco.
Herramientas relacionadas para desarrolladores
Datos del resultado
| Dato | Descripción |
|---|---|
| HEX | Valor calculado por Conversor HSL a HEX. |
| Rojo | Valor calculado por Conversor HSL a HEX. |
| Verde | Valor calculado por Conversor HSL a HEX. |
| Azul | Valor calculado por Conversor HSL a HEX. |
Centro de categoría
Consulta más utilidades de Color y CSS.