Conversor HSL Gratis: Convertir Colores HSL HEX RGB Online

A Hue (tono, 0-360°), Saturation (saturación, 0-100%), Lightness (luminosidad, 0-100%). Es más intuitivo que RGB para diseñadores.

A RGB define colores por canales rojo/verde/azul. HSL los define por tono/saturación/luminosidad, más fácil para ajustar variaciones de un mismo color.

A Mantén H y S, cambia solo L. L=90% muy claro, L=50% normal, L=10% muy oscuro.

A Llevar el control deslizante de Luminosidad al 100% siempre dará como resultado blanco, independientemente de los valores de Tono o Saturación que hayas seleccionado. Esta es una forma rápida de restablecer un color a su estado más brillante. Verás que el código HEX cambia a #FFFFFF y los valores RGB se convierten en 255, 255, 255.

A Cada monitor reproduce los colores de forma distinta. Un valor HSL vibrante en tu pantalla calibrada puede verse apagado en un portátil sin calibrar. No es un fallo de la herramienta — es una cuestión de hardware. Prueba tu color en al menos dos dispositivos antes de finalizar un diseño. Para la web, incluye valores HEX y RGB de respaldo en tu CSS para minimizar diferencias.

A No directamente — esta herramienta no tiene botón de guardar ni función de exportación. Pero puedes hacerlo tú mismo en dos segundos. Copia el código HEX que se actualiza en vivo mientras mueves los deslizadores y pégalo en tu software de diseño, un archivo CSS o una app de notas. Te recomiendo mantener un documento aparte abierto para ir coleccionando tu paleta mientras trabajas.

A Este conversor HSL no maneja transparencia alfa — solo genera colores sólidos. Si necesitas opacidad, combina los valores HEX o RGB obtenidos con un canal alfa aparte en CSS, por ejemplo rgba(255, 100, 50, 0.7). La herramienta se enfoca en colores opacos, cubriendo el 90% de los escenarios de diseño típicos.

A No directamente en este conversor — no incluye un verificador de contraste. Pero hay un truco: ajusta tu color de fondo con los deslizadores, copia su código HEX, luego haz lo mismo para el color del texto. Introduce ambos valores HEX en una calculadora de contraste WCAG gratuita online. Necesitas al menos una relación de 4.5:1 para texto normal y 3:1 para texto grande. Siempre mantengo una pestaña de verificación de contraste abierta cuando elijo colores de marca.