💻

Convertidor de HEX a HSL: tono, saturación y luminosidad para CSS

Convierte un código de color hexadecimal a HSL (tono, saturación y luminosidad) y a RGB, con los valores listos para pegar en tu CSS.

Color hexadecimal

Cargando calculadora…

Cómo funciona

R, G, B ÷ 255 → máx y mín · L = (máx + mín) ÷ 2 · S = (máx − mín) ÷ (1 − |2L − 1|) · H = ángulo del canal dominante × 60°

Un color hexadecimal como #e63946 guarda tres pares de dígitos: rojo, verde y azul, cada uno de 00 a ff (0 a 255). HSL describe el mismo color de una forma más intuitiva: el tono es un ángulo en la rueda de color (0° rojo, 120° verde, 240° azul), la saturación indica qué tan vivo es frente a un gris y la luminosidad qué tan cerca está del negro (0%) o del blanco (100%). La conversión normaliza los canales, toma el mayor y el menor para obtener la luminosidad y la saturación, y calcula el tono según qué canal domina. En CSS, HSL facilita crear variantes: basta con mover la luminosidad para tener un tono más claro u oscuro del mismo color.

Ejemplo resuelto

El rojo coral #e63946 equivale a rgb(230, 57, 70) y a hsl(355, 78%, 56%): tono de 355°, casi en el rojo puro, con 78% de saturación y 56% de luminosidad. Si Daniela quiere una versión más oscura para el estado hover de un botón, le basta con bajar la luminosidad, por ejemplo a hsl(355, 78%, 46%).

Fuentes: <hsl()> — MDN

Preguntas frecuentes

¿Qué ventaja tiene HSL sobre HEX en CSS?

HSL es más fácil de ajustar a mano: para aclarar u oscurecer un color cambias solo la luminosidad, y para hacerlo más apagado bajas la saturación, sin tener que recalcular los tres canales como en HEX.

¿El color se ve igual en HEX y en HSL?

Sí, son dos formas de escribir el mismo color en el espacio sRGB. Puede haber una diferencia mínima por redondeo, porque HSL se expresa con grados y porcentajes enteros.

¿Puedo escribir un HEX de tres dígitos?

Sí. La forma corta #36f se expande duplicando cada dígito, así que es igual a #3366ff.

Calculadoras relacionadas

Convertidor de RGB a HSL

Convierte valores RGB (0–255) a HSL (tono, saturación y luminosidad) y obtén también el código hexadecimal, listos para pegar en tu hoja de estilos CSS.

Convertidor de HEX a RGB

Convierte cualquier código de color hexadecimal, como #aabbcc o el corto #abc, a sus valores de rojo, verde y azul y a una cadena rgb() lista para pegar en tu CSS.

Convertidor de RGB a HEX

Convierte valores de rojo, verde y azul (0 a 255) a un código de color HEX y a la notación rgb() de CSS, con cada canal explicado en base 16.

Calculadora de palabras por minuto

Calcula tu velocidad de escritura en palabras por minuto (PPM) a partir de los caracteres o palabras y el tiempo: PPM brutas y netas, precisión, caracteres por minuto y pulsaciones por hora, con la palabra estándar de 5 caracteres, tasa de errores, nivel de velocidad y el tiempo para escribir un documento.

Esta calculadora tiene fines informativos. Verifica los resultados importantes antes de tomar decisiones.