Conversor de HSL a HEX

El conversor de HSL a HEX transforma valores HSL como hsl(217, 91%, 60%) en códigos hexadecimales como #3B82F6. HSL es el modelo más cómodo para diseñar un color por tono, saturación y luminosidad, pero la mayoría de hojas de estilo, tokens de diseño y HTML siguen esperando un código HEX, así que esta conversión une ambos mundos.

Consejo de flujo: ajusta el color exacto en HSL — fácil de razonar — y luego conviértelo a HEX para el valor que realmente envías al código.

Cuándo lo necesitas

Del diseño al código

Creaste una paleta en HSL y ahora necesitas códigos HEX para un archivo de tema o una guía de marca.

Compartir compacto

Una sola cadena HEX es más fácil de copiar y pegar que tres números HSL con símbolos de porcentaje.

Compatibilidad heredada

Algunas herramientas y rutas de código antiguas siguen esperando HEX en lugar de la función hsl().

Cómo convertir de HSL a HEX

Introduce los valores HSL

Escribe tus valores como 217, 91%, 60% o como hsl(217, 91%, 60%). El símbolo de grados del tono es opcional y los signos % se aceptan pero no son obligatorios.

Lee el resultado HEX

El código HEX se genera al instante, y la muestra en vivo se actualiza para que confirmes que el color es el que querías.

O elige un color

Haz clic en la muestra para abrir el selector de color nativo y elegir visualmente: los campos HSL y HEX se rellenan por ti.

Copia y reutiliza

Copia el código HEX para tu hoja de estilos. El panel inferior también lista RGB, HSL, HSV y CMYK del mismo color.

Características

Conversión instantánea

El HEX aparece en cuanto escribes, totalmente en el cliente y sin enviar nada a un servidor.

Entrada flexible

Funciona con o sin los símbolos %, la marca de grados y el envoltorio hsl().

Vista previa y selector

Una muestra en vivo verifica el color y el selector integrado permite elegir uno visualmente.

Todos los formatos a la vez

Cada resultado también muestra HEX, RGB, HSL, HSV y CMYK.

Respeta los rangos: el tono debe ir de 0 a 360, y tanto la saturación como la luminosidad de 0 a 100. Los valores fuera de estos límites se marcan, ya que no corresponden a un color válido.

Preguntas frecuentes

¿Qué valores HSL son válidos?

El tono va de 0 a 360 (grados), mientras que la saturación y la luminosidad van de 0 a 100 por ciento. Los valores fuera de estos rangos no son colores válidos.

¿Tengo que incluir el símbolo %?

No. El conversor acepta la saturación y la luminosidad con o sin el signo % — 91% y 91 se tratan igual.

¿Qué pasa si los valores están fuera de rango?

El conversor marca un error si algún valor queda fuera de su rango válido, para que corrijas la entrada en lugar de obtener un color engañoso.

¿Puedo pegar una cadena hsl() completa?

Sí. Tanto hsl(217, 91%, 60%) como el simple 217, 91%, 60% funcionan: el envoltorio y el símbolo de grados se interpretan e ignoran según haga falta.

¿La salida HEX es en mayúsculas?

Sí, el HEX se devuelve en mayúsculas (p. ej. #3B82F6), la convención habitual. CSS trata el HEX en mayúsculas y minúsculas de forma idéntica.