Convertir HEX a HSL
Convierte colores HEX a HSL para CSS moderno, al instante, en tu navegador.
Por qué usarlo
HEX a HSL: el puente entre diseño y código CSS moderno
Resultado listo para CSS
Formato hsl() compatible con todos los navegadores modernos y con variables CSS Custom Properties.
Privado
Sin servidores, sin logs. La conversión ocurre completamente en tu navegador.
Precisión estándar
Algoritmo de conversión siguiendo la especificación CSS Color Level 4 del W3C.
Instantáneo
Resultado en tiempo real mientras escribes el código HEX.
Cómo funciona
Tres pasos, sin complicaciones
Introduce el código HEX
Escribe el código hexadecimal del color: #RRGGBB o #RGB. También puedes usar nombres de colores CSS como 'coral', 'teal' o 'goldenrod'. El conversor detecta automáticamente el formato.
Obtén los valores HSL
El conversor calcula el tono (H) en grados (0-360°), la saturación (S) en porcentaje (0-100%) y la luminosidad (L) en porcentaje (0-100%), siguiendo el algoritmo estándar de CSS.
Usa el resultado en CSS
Copia el resultado en formato hsl(11, 100%, 60%) o como variables CSS: --color: hsl(11deg 100% 60%). Listo para pegar directamente en tu hoja de estilos o design token.
Preguntas frecuentes
¿Tienes dudas?
HSL (Hue, Saturation, Lightness — Tono, Saturación, Luminosidad) es un modelo de color que describe los colores en términos más intuitivos para los humanos que RGB. El Tono (H) es el ángulo en la rueda de color (0° = rojo, 60° = amarillo, 120° = verde, 180° = cian, 240° = azul, 300° = magenta, 360° = rojo). La Saturación (S) controla la intensidad del color: 0% es gris puro, 100% es el color más vivo posible. La Luminosidad (L) controla el brillo: 0% es negro, 50% es el color puro, 100% es blanco.
HSL y HSV (también llamado HSB — Hue, Saturation, Brightness) son dos formas distintas de reorganizar el espacio de color RGB en coordenadas cilíndricas. La diferencia clave está en el eje de luminosidad: en HSL, L=50% es el color puro más saturado; en HSV, V=100% es el color puro. Esto significa que en HSV, para obtener blanco necesitas V=100% y S=0%, mientras que en HSL es L=100% independientemente de S. Photoshop y la mayoría de herramientas de diseño usan HSB/HSV; CSS usa HSL. El conversor de colores calcula ambos modelos para facilitar el trabajo entre herramientas.
HSL es preferido en CSS porque permite ajustes de color muy intuitivos con variables CSS. Para oscurecer un color sin cambiar su tono: hsl(var(--hue), var(--sat), calc(var(--light) - 10%)). Para crear un tema claro/oscuro: simplemente cambiar L de 30% a 70%. Para un hover state: aumentar S en 10%. En contraste, hacer lo mismo en RGB requiere calcular nuevos valores R, G, B para cada ajuste. CSS Custom Properties y la función calc() hacen que HSL sea el modelo ideal para sistemas de diseño dinámicos y theming.
En HSL, la luminosidad (L) controla directamente el brillo del color sin afectar al tono ni a la saturación. Para oscurecer: reduce L (ej: de 60% a 40%). Para aclarar: aumenta L (ej: de 40% a 70%). Para crear una sombra de color mantén H y S fijos y solo varía L. Ejemplo práctico con CSS: :root { --btn-hsl: 220, 90%, 50%; } .btn { background: hsl(var(--btn-hsl)); } .btn:hover { background: hsl(220, 90%, 40%); } .btn:active { background: hsl(220, 90%, 30%); }. Esto es imposible de hacer de forma tan limpia con valores RGB o HEX directos.
Los colores complementarios son los que se oponen en la rueda de color, separados por 180°. En HSL es trivial calcularlos: el complementario de hsl(30, 80%, 50%) es hsl(210, 80%, 50%) (simplemente suma 180 al tono, módulo 360). Los esquemas de color armónicos también son simples: triádico (H, H+120°, H+240°), cuadrado (H, H+90°, H+180°, H+270°), análogos (H-30°, H, H+30°). Esta propiedad hace que HSL sea el modelo de elección para generadores de paletas de colores, herramientas de diseño de sistemas de color y cualquier aplicación que necesite armonía cromática automática.
HSL: historia del modelo de color y su adopción en CSS
El modelo de color HSL (Hue, Saturation, Lightness) fue propuesto por Joblove y Greenberg en 1978 en su artículo 'Color spaces for computer graphics' publicado en los proceedings de SIGGRAPH. Su propósito era crear un espacio de color más intuitivo para los humanos que el modelo RGB, que requería pensar en mezclas de luz primaria en lugar de propiedades perceptuales del color. El modelo hermano HSV (Hue, Saturation, Value) fue propuesto simultáneamente por Alvy Ray Smith también en 1978. Ambos modelos representan el espacio de color RGB como un cilindro en coordenadas polares: el eje vertical es la luminosidad o valor, el radio es la saturación, y el ángulo es el tono.
La rueda de color y los ángulos de tono en HSL tienen una historia que se remonta mucho antes de los ordenadores. La rueda de color tradicional de artistas (basada en pigmentos) tiene rojo, azul y amarillo como primarios, con sus complementarios en oposición. La rueda de color de luz (RGB) tiene disposición diferente: rojo a 0°, amarillo a 60°, verde a 120°, cian a 180°, azul a 240°, magenta a 300°. El sistema Munsell (1905), precursor de los sistemas modernos, organizó los colores en un sólido con 10 tonos principales y 10 pasos de valor y croma, y fue adoptado por la USDA para clasificar colores de suelos (Soil Survey Manual, 1975), lo que lo convirtió en el estándar de referencia para la ciencia del suelo.
CSS adoptó HSL en CSS Color Level 3 (recomendación W3C de 2011) con la función hsl(). Antes de CSS3, los desarrolladores web solo podían usar HEX y rgb() para especificar colores, lo que hacía muy difícil crear variaciones de color sistemáticas. CSS Custom Properties (variables CSS, Level 4, soporte universal desde 2017) amplificaron enormemente la utilidad de HSL: definir --primary-hue: 220; --primary-sat: 90%; y construir toda una paleta con hsl(var(--primary-hue), var(--primary-sat), L%) permite cambiar toda la paleta modificando solo dos variables. Frameworks como Tailwind CSS (desde v3) y sistemas de diseño como Material Design 3 (Google, 2021) usan HSL o sus variantes para definir sus sistemas de tokens de color.