Conversor de HEX a HSL
Convierta los códigos HEX en HSL, el formato que hace que las variantes más claras y oscuras sean fáciles.
- Tus datos nunca salen de tu dispositivo
- 100 % gratis
- Sin registro
- Funciona sin conexión después de la primera carga
Cómo convertir de HEX a HSL
- Pegar un color en cualquier formato — o recogerlo en el cuadrado de color o de la pantalla.
- Lea el resultado y cualquier otro formato; ajuste con los controles deslizantes de canal.
- Copie el valor o el código, o convierta una lista completa.
Acerca de Conversor de HEX a HSL
Convertir colores HEX a HSL (tono, saturación, luminosidad).
Todo funciona en su navegador, por lo que es instantáneo y privado. Sus colores y configuraciones recientes se recuerdan en este dispositivo, y la barra de direcciones mantiene su color para que pueda compartirlo o marcarlo.
Ideal para
- Diseño web y app
- Combinación de colores de marca en todas las herramientas
- Tokens de diseño y desarrollo front-end
Consejo: Presione las teclas de flecha en el cuadrado de color o deslizadores para obtener pasos finos; mantenga pulsado Mayús para los más grandes.
Preguntas frecuentes
¿Qué significa HSL?
Tono (el ángulo de color en una rueda, 0–360°), saturación (0% gris a 100% a todo color) y luminosidad (0% negro, 50 % color puro, 100 % blanco). Es más fácil de ajustar a mano que RGB.
¿Qué formatos de color puedo pegar?
Cualquier formato CSS: HEX (rgb, rrggbb, con alfa), rgb() / rgba(), hsl() / hsla(), hwb(), lab(), lch(), oklab(), color(display-p3 …), HSV/HSB, CMYK, los 148 nombres de colores CSS y números simples como “79, 110, 247”.
¿Puedo elegir un color de mi pantalla?
Sí — en Chrome y Edge, haga clic en el cuentagotas junto al cuadrado de color y haga clic en cualquier parte de la pantalla, incluso fuera del navegador.
¿Puedo convertir muchos colores a la vez?
Sí — Abra “Convertir una lista de colores”, pegue un color por línea en cualquier formato y copie o descargue los resultados como CSV.
¿Qué son OKLCH y OKLab?
Espacios de color perceptuales modernos: pasos iguales se ven igualmente diferentes a la vista, lo que los hace ideales para paletas y tokens de diseño. Todos los navegadores actuales admiten oklch() en CSS.