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
Todos los datos, cálculos, generación de CSS y vistas previas se procesan en tu navegador. No se sube contenido, no se usan servidores de procesamiento, bases de datos, API en línea ni CDN de terceros, y tus entradas no se guardan automáticamente.
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?
Los cálculos internos usan coma flotante y la salida muestra un número razonable de decimales. El redondeo del texto puede causar pequeñas diferencias al convertir de nuevo.