Skip to main content
FreeToolkit .ai

Convertidor de HEX a HSL Convierta códigos de color HEX en valores HSL (Matiz, Saturación, Luminosidad).

Convertidor de HEX a HSL illustration
🎨

Convertidor de HEX a HSL

Convierta códigos de color HEX en valores HSL (Matiz, Saturación, Luminosidad).

1

Introduzca el código de color HEX

Escriba un código de color HEX o utilice el selector de colores para seleccionar su color.

2

Lea los valores HSL

Vea los valores de Matiz (0-360°), Saturación (0-100%) y Luminosidad (0-100%) instantáneamente.

3

Copie la salida HSL

Copie el valor de la función CSS hsl() para utilizarlo directamente en sus hojas de estilo.

Loading tool...

What Is Convertidor de HEX a HSL?

Un convertidor de HEX a HSL transforma códigos de colores hexadecimales en el modelo de color HSL (Matiz, Saturación, Luminosidad). A diferencia del RGB que describe los colores mezclando luz roja, verde y azul, HSL describe los colores de una manera más intuitiva para los humanos. El matiz es el color en sí (medido en grados alrededor de una rueda de colores: 0° es rojo, 120° es verde, 240° es azul). La saturación describe la intensidad o pureza del color (0% es gris, 100% es completamente vívido). La luminosidad describe cuán claro u oscuro es el color (0% es negro, 50% es color puro, 100% es blanco). Esto hace que HSL sea invaluable para crear paletas de colores, ajustar el brillo sin cambiar el matiz y generar esquemas de colores armónicos. Los diseñadores y desarrolladores frecuentemente necesitan convertir desde HEX (el formato estándar web) a HSL para hacer ajustes significativos. Por ejemplo, crear una sombra más oscura es trivial en HSL - solo reducir la luminosidad - mientras que en HEX o RGB, tendrías que ajustar los tres canales proporcionalmente.

Why Use Convertidor de HEX a HSL?

  • Vea el color desglosado en componentes intuitivos de matiz, saturación y luminosidad
  • La vista previa del color se actualiza en vivo a medida que escribe el código HEX
  • Salida lista para CSS con la función hsl() para su uso directo en las hojas de estilo
  • Admite códigos de entrada HEX de 3 y 6 dígitos
  • Útil para comprender y manipular relaciones de color

Common Use Cases

Diseño de paleta de colores

Convierta los colores HEX de la marca a HSL para crear fácilmente variaciones ajustando la saturación y la luminosidad.

Generación de temas

Cree variantes de tema claro y oscuro modificando el valor de luminosidad mientras mantiene constante el matiz.

Propiedades personalizadas de CSS

Almacene los valores HSL como variables CSS para un diseño de color flexible: --primary-h, --primary-s, --primary-l.

Ajustes de accesibilidad

Ajuste los valores de luminosidad para garantizar una relación de contraste suficiente entre el texto y los fondos.

Technical Guide

La conversión de HEX a HSL primero decodifica la cadena hexadecimal en valores RGB (0-255), luego se transforma en HSL. El algoritmo normaliza RGB a un rango de 0-1, encuentra los valores máximo y mínimo del canal, y calcula: Luminosidad = (max + min) / 2. Si max es igual a min, el color es acromático (gris) con matiz = 0 y saturación = 0. De lo contrario, Saturación = delta / (1 - |2L - 1|) donde delta = max - min. El matiz depende de cuál sea el canal máximo: si rojo es el máximo, H = (G-B)/delta; si verde, H = (B-R)/delta + 2; si azul, H = (R-G)/delta + 4. El resultado se multiplica por 60 para convertir a grados (0-360). HSL es una representación cilíndrica del cubo RGB, lo que la hace más intuitiva para la manipulación de colores. Una distinción importante: la luminosidad HSL del 50% representa la forma más vívida de cualquier matiz, mientras que el 0% siempre es negro y el 100% siempre es blanco. Esto difiere de HSV/HSB donde el valor del 100% (brillo) representa el color más vívido.

Tips & Best Practices

  • 1
    La luminosidad HSL del 50% da la versión más pura de cualquier matiz - útil para colores base de paleta
  • 2
    Desaturar (reducir S) crea tonos profesionales y apagados
  • 3
    HSL es ideal para el diseño temático CSS porque el matiz, la saturación y la luminosidad se pueden ajustar de forma independiente
  • 4
    Los valores R, G, B iguales en HEX siempre producen H=0, S=0 en HSL (gris puro)
  • 5
    El CSS moderno admite hsl() de forma nativa en todos los navegadores - no es necesario realizar conversiones en tiempo de ejecución

Related Tools

Convertidor de HEX a RGB - free online tool

Convertidor de HEX a RGB

Convierta códigos de color HEX a valores RGB al instante con una vista previa en vivo.

🎨 Color Tools
Convertidor de HSL a HEX - free online tool

Convertidor de HSL a HEX

Convierta valores de color HSL a códigos HEX con controles deslizantes interactivos.

🎨 Color Tools
Conversor de RGB a HSL - free online tool

Conversor de RGB a HSL

Convierta valores de RGB al formato de color HSL con controles deslizantes interactivos.

🎨 Color Tools
Selector de colores - free online tool

Selector de colores

Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.

🎨 Color Tools
Generador de tonos de color - free online tool

Generador de tonos de color

Genera tonos más oscuros de cualquier color con un recuento de pasos ajustable.

🎨 Color Tools

Frequently Asked Questions

Q ¿Qué es el modelo de color HSL?
HSL significa Matiz (ángulo de color 0-360°), Saturación (intensidad 0-100%) y Luminosidad (brillo 0-100%). Es una representación cilíndrica que es más intuitiva para los humanos que RGB.
Q ¿Por qué convertir HEX a HSL?
HSL facilita la creación de variaciones de color. Puede aclarar, oscurecer o desaturar un color cambiando un solo valor, mientras que en HEX necesitaría modificar los seis caracteres.
Q ¿Está soportado hsl() en CSS?
Sí, hsl() está soportado en todos los navegadores modernos y lo ha estado desde IE9. El CSS moderno también admite la sintaxis separada por espacios más reciente: hsl(217 91% 60%).
Q ¿Cómo oscurezco un color HEX utilizando HSL?
Convierta HEX a HSL, luego reduzca el valor de Luminosidad. Por ejemplo, hsl(217, 91%, 60%) oscurecido a hsl(217, 91%, 40%) crea una sombra más oscura del mismo azul.
Q ¿Cuál es la diferencia entre HSL y HSV?
HSL y HSV utilizan ambos matiz y saturación, pero difieren en el tercer componente. HSL utiliza luminosidad (50% es color puro), mientras que HSV utiliza valor/brillo (100% es color puro). HSL es más común en CSS.

About This Tool

Convertidor de HEX a HSL is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.