Conversor HEX a HSL
Qué es Conversor HEX a HSL
Esta herramienta convierte códigos de color HEX (como #3B82F6) a valores HSL (como hsl(217, 91%, 60%)). HSL significa Tono, Saturación y Luminosidad — un modelo de color más intuitivo para diseñadores. Ajustar la luminosidad en HSL es mucho más fácil que en HEX o RGB, ideal para crear paletas de color y propiedades CSS personalizadas.
Cómo usar
- Escribe o pega un código HEX en el campo HEX (con o sin #).
- Los valores HSL y RGB aparecen al instante.
- Haz clic en el botón de copiar junto a HSL para copiar en formato hsl(h, s%, l%).
- Cambia entre los 6 conversores usando los enlaces de modo arriba.
Cuándo usarla
¿Construyes un sistema de colores a partir de un color de marca? Pega el HEX de la marca (#E63946) y obtén hsl(356, 75%, 56%). Desde ahí creas tonos más claros subiendo la luminosidad y más oscuros bajándola, manteniendo siempre el mismo matiz.
Preguntas frecuentes
¿Qué es HSL y por qué usarlo en lugar de HEX?
HSL (Tono, Saturación, Luminosidad) describe los colores en términos intuitivos. El Tono es la posición en la rueda de colores (0–360°), la Saturación es la intensidad (0–100%) y la Luminosidad es el brillo (0–100%). Es mucho más fácil crear variaciones de color en HSL que en HEX.
¿Qué es #FF0000 en HSL?
Rojo puro #FF0000 es hsl(0, 100%, 50%). El tono 0° es rojo en la rueda de colores, 100% de saturación significa completamente saturado y 50% de luminosidad es el color puro.
¿CSS soporta colores HSL?
Sí. CSS moderno admite completamente la notación `hsl()` y `hsla()`. Por ejemplo: `color: hsl(217, 91%, 60%);` y `background: hsla(217, 91%, 60%, 0.5);`
¿Qué es #000000 en HSL?
Negro (#000000) es hsl(0, 0%, 0%). Luminosidad en 0% significa negro puro sin importar el tono o la saturación.
¿Puedo compartir esta herramienta con mis datos precargados?
Sí. La URL se actualiza automáticamente mientras escribes. Copia el enlace desde la barra de direcciones o usa el botón Compartir — quien lo abra verá tus datos ya cargados.
Herramientas relacionadas
Conversor HSL a HEX
Convierte valores de color HSL a códigos HEX al instante. Conversor HSL a HEX con vista previa en vivo. Convierte hsl() a HEX para CSS y diseño.
Calculadora de Relación de Aspecto
Calcula la relación de aspecto, encuentra el ancho o alto que falta y redimensiona imágenes y vídeos manteniendo las proporciones. Gratis.
Decodificador Base64
Decodifica cadenas Base64 a texto plano al instante. Soporta salida Unicode completa con emojis. Decodificador Base64 gratuito.