Cómo funciona
El conversor de HEX a HSL traduce los códigos de color hexadecimales de CSS al formato HSL (tono, saturación y luminosidad): para #FF5733 te devuelve hsl(11, 100%, 60%). Una muestra de color te enseña el tono exacto que representan los dos valores.
HSL es el modelo de color más intuitivo para diseñar. El tono es el color puro (de 0 a 360°, donde 0 y 360 son el rojo, 120 el verde y 240 el azul). La saturación indica lo vivo que es el color (0 % es gris y 100 % es saturación total). La luminosidad controla su claridad (0 % es negro, 50 % el color puro y 100 % blanco). Con este modelo es muy fácil crear variaciones: oscurece bajando la luminosidad, apaga el color bajando la saturación o consigue el complementario girando el tono 180°.
Cómo usarlo: escribe un color hexadecimal (con almohadilla o sin ella, en formato de 3 o de 6 dígitos). Los valores HSL aparecen al momento, junto con el RGB de referencia y una muestra visual. El resultado incluye la cadena de la función hsl() lista para usar en CSS.
HSL en la práctica: hsl(220, 80%, 50%) para un azul principal, hsl(220, 80%, 40%) para el estado al pasar el ratón (solo cambia la luminosidad) y hsl(220, 20%, 50%) para una versión apagada. Construir paletas sistemáticas variando un solo parámetro cada vez es mucho más sencillo en HSL que en hexadecimal o en RGB.
Preguntas frecuentes
- El tono (de 0 a 360°) es la posición del color en el círculo cromático: 0 y 360 son rojo, 60 amarillo, 120 verde, 180 cian, 240 azul y 300 magenta. La saturación (de 0 a 100 %) es la intensidad del color (0 % es gris). La luminosidad (de 0 a 100 %) es la claridad (0 % negro, 50 % el color puro y 100 % blanco).
- HSL separa las tres dimensiones independientes del color, así que variar de forma sistemática resulta trivial. Para el estado al pasar el ratón: baja la luminosidad entre 5 y 10 puntos. Para un estado desactivado: baja la saturación al 20 %. Para encontrar un acento complementario: súmale 180° al tono.
- El eje de luminosidad de HSL va del negro (0 %) al color puro (50 %) y de ahí al blanco (100 %). El eje de brillo de HSB/HSV va del negro (0 %) al color puro (100 %). Con la luminosidad al 100 %, HSL siempre da blanco sea cual sea la saturación. Con el brillo al 100 %, HSV da el color puro y saturado.
- Sí. Usa la herramienta complementaria de HSL a HEX para hacer la conversión en el otro sentido.
¿Qué representa exactamente cada número del HSL?
¿Por qué HSL viene tan bien para un sistema de diseño?
¿Qué diferencia hay entre HSL y HSB/HSV?
¿Puedo convertir de HSL a hexadecimal?
Scrollshot — Full Page Screenshot & Annotate
Scrolls the page for you, captures it viewport by viewport and stitches the slices into one seamless image — then opens an editor so you can crop, annotate and blur before saving.