Acerca de esta herramienta
Este conversor obtiene RGB con las mismas reglas de análisis que HEX a RGB y después calcula tono, saturación y luminosidad. HSL ayuda a estudiar relaciones entre colores y a ajustar los tonos claros y oscuros de una gama.
Cómo usarla
- Introduce un HEX de 3 o 6 dígitos, con o sin #.
- Consulta la salida HSL y los valores H / S / L por separado.
- Comprueba la vista previa y copia el HSL.
- Pulsa «Borrar» para vaciar la entrada o carga un ejemplo.
Ejemplos de uso
- #ff0000 → hsl(0, 100%, 50%).
- #00ff00 → hsl(120, 100%, 50%); #0000ff → hsl(240, 100%, 50%).
- #808080 → hsl(0, 0%, 50.2%); #ffffff → hsl(0, 0%, 100%).
Cómo se calcula
Se divide RGB entre 255 y se obtienen el máximo max, el mínimo min y su diferencia delta. La luminosidad es L = (max + min) / 2. En colores cromáticos, S = delta / (1 − |2L − 1|); el tono depende del canal máximo y su posición en el círculo cromático. En grises, H y S se definen como 0. Los decimales solo se redondean al mostrar el resultado.
Usos habituales
- Comprender el tono y la luminosidad de un diseño.
- Convertir constantes HEX a HSL para ajustar colores con facilidad.
- Verificar valores HSL de colores puros, grises, negro y blanco.
Privacidad
Los datos y los resultados se procesan en tu navegador, sin subirse ni guardarse automáticamente. Copia los resultados que quieras conservar antes de salir de la página.
FAQ
¿Cuáles son los tres componentes de HSL?
H es el ángulo de tono; S, el porcentaje de saturación; L, el porcentaje de luminosidad.
¿Por qué el tono se expresa en grados?
El tono se representa en un círculo de 360°. Los ángulos 0° y 360° corresponden al mismo punto.
¿Por qué los grises muestran H igual a 0?
Cuando los tres canales RGB son iguales no hay un tono definido. La herramienta adopta H = 0 y S = 0%.
¿Puede haber diferencias de precisión?
El resultado se redondea a un número limitado de decimales. Al convertirlo de nuevo, puedes ver pequeñas diferencias debidas al redondeo.