Conversor HSL Gratis: Convertir Colores HSL HEX RGB Online

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.

A Sí, pero la mezcla la haces tú. Elige tu primer color con los deslizadores, copia su código HEX, luego ajusta los controles para el segundo color. Para un degradado CSS suave, mantén los tonos a menos de 30 grados de diferencia y varía la luminosidad al menos un 20%. Truco: fija ambas saturaciones entre 50-70% para transiciones más ricas. Pega ambos códigos HEX en tu propiedad gradiente, como 'background: linear-gradient(#HEX1, #HEX2)'.

A Ese rango no es arbitrario: sigue el concepto original de la rueda de color. El rojo está en 0°, el verde en 120° y el azul en 240°, así que los 360° vuelven al rojo perfectamente. Entiendo que recorrer cada grado parezca excesivo, pero te da precisión quirúrgica. Para la mayoría de los trabajos de diseño, bastan incrementos de 5 o 10°. Prueba mantener presionada la tecla Mayús mientras arrastras el control, y saltará automáticamente en esos pasos más grandes.

A Sí, y es mejor que adivinar. Abre la captura en cualquier editor de imagen con cuentagotas y muestrea el píxel exacto que quieras. Eso te da un valor RGB. Introduce esos tres números en los campos RGB de nuestro conversor y obtendrás al instante el desglose HSL junto con el HEX correspondiente. Esto funciona genial para extraer colores de logotipos, fotos o maquetas de UI. Un consejo: haz la captura al 100% de zoom; si no, capturarás píxeles suavizados que alteran el color.