Convertir HEX a HSL
Convierta un código de color HEX en tono, saturación y luminosidad, la notación que facilita crear variantes de un color.
Convertir colores HEX a HSL
Los códigos HEX son compactos pero difíciles de razonar: nadie sabe, con solo mirar #0A84FF, cómo oscurecerlo un 10 por ciento. HSL describe el mismo color tal como lo piensan las personas, así que un estado hover, un estado deshabilitado o una variante para modo oscuro se reducen a cambiar un solo número.
Esta página abre el conversor de colores con la entrada HEX seleccionada y un ejemplo cargado.
Cómo leer un valor HSL
| Componente | Rango | En hsl(210, 100%, 52%) |
|---|---|---|
| Tono | 0–360° | 210°: un azul entre el cian (180°) y el azul puro (240°) |
| Saturación | 0–100% | 100%: tan vivo como es posible, sin gris mezclado |
| Luminosidad | 0–100% | 52%: justo por encima del punto medio entre negro y blanco |
Cómo se pasa de HEX a HSL
El conversor primero pasa el código HEX a RGB y luego escala cada canal a 0–1. La luminosidad es la media del canal mayor y el menor. La saturación depende de lo separados que estén esos dos, en relación con la luminosidad. El tono sale de qué canal es el mayor y de cómo se comparan los otros dos. Para #0A84FF el resultado es 210,1°, 100% y 51,96%, redondeado a hsl(210, 100%, 52%).
Crear variantes con HSL
- Estado hover o pulsado: baje la luminosidad entre 5 y 10 puntos.
- Estado deshabilitado: baje la saturación y suba la luminosidad.
- Tintes para fondos: mantenga el tono y la saturación y fije la luminosidad entre el 90 y el 97%.
- Modo oscuro: suba la luminosidad para que el color siga siendo legible sobre superficies oscuras.
La pestaña Paleta automatiza esto con una escala de once pasos de 50 a 950, y las armonías que hay debajo rotan el tono para encontrar colores complementarios y análogos.
Una salvedad perceptual
La luminosidad HSL no es la luminosidad percibida: un amarillo y un azul al 50% se ven con un brillo muy distinto. Cuando el contraste importa, pruebe la pareja real en el comprobador de contraste de color o use el valor OKLCH que el conversor también muestra. Para los valores de canal sin más, consulte HEX a RGB.