Colores HSL

¿Qué son los colores HSL?

El modelo de color HSL (Tono, Saturación, Luminosidad) es una forma de describir los colores que se basa en tres características:

• Tono: Este es el color primario. Determina el tipo de color, su posición en la rueda de colores (de rojo a morado). Se mide en grados (de 0 a 360).
• Saturación: Caracteriza la intensidad de un color, su pureza. Se mide como un porcentaje (de 0% a 100%). Cuanto mayor sea la saturación, más brillante será el color. Si la saturación = 0%, entonces el color se vuelve gris. Si saturación = 100%, el color será lo más brillante (saturado) posible.
• Luminosidad: Determina qué tan claro u oscuro es el color. Se mide como un porcentaje (de 0% a 100%). El 0% es negro, el 100% es blanco y el 50% el color será lo más puro y saturado posible.

¿Dónde se utiliza HSL?

• Diseño web y gráficos: HSL es útil para crear esquemas de color, ajustar el brillo y la saturación del color.
• Edición de imágenes: HSL se utiliza para corregir el color, cambiar el tono, la saturación y el brillo de las imágenes.
• Edición de video: HSL te ayuda a crear efectos de color, cambiar los colores de objetos individuales en el video.

HSL da una sensación de color más natural que otros modelos como RGB.

Ventajas de HSL

• Intuitivo: HSL es más fácil de entender y usar que otros modelos de color como RGB o HEX.
• Fácil de ajustar: Fácil de cambiar los parámetros de color individuales (tono, saturación, luminosidad) sin afectar a los demás.
• Amplia gama de colores: HSL le permite crear muchos tonos y combinaciones de colores diferentes.

Desventajas de HSL

• No siempre es coherente con la percepción: el HSL no siempre refleja con precisión cómo una persona percibe el color.
• Puede diferir en diferentes dispositivos: el color HSL puede verse ligeramente diferente en diferentes pantallas y dispositivos.
• No siempre es compatible con todas las aplicaciones: Aunque HSL es popular en el diseño web, no todas las herramientas de software lo admiten.

Casos de uso de HSL

• Diseño web: En CSS, puedes usar HSL para diseñar elementos individuales:

  Ejemplo

  Uso de colores HSL al diseñar una página web:

  p {
    color: hsl(120, 100%, 50%);
  }

  Será de color verde (120°), con máxima saturación (100%) y luminosidad media (50%).
• Creación de degradados: HSL le permite crear transiciones suaves entre diferentes colores.
• Gráficos: En editores gráficos como Photoshop, puedes ajustar los colores con HSL para crear los tonos que desees.
• Creación de filtros de color: HSL se utiliza para crear varios filtros de color para fotos y videos.

¿Cómo se obtiene el color HSL?

Para obtener un color HSL, puede usar una calculadora HSL.

Colores HSL

Los valores de color HSL son compatibles con IE9+, Firefox, Chrome, Safari y Opera 10+.

HSL significa tono, saturación y luminosidad.

Los valores de color HSL se especifican con: hsl(hue, saturation, lightness).

Hue /

El tono es un grado en la rueda de colores de 0 a 360, 0 es rojo, 120 es verde, 240 es azul.

Saturation / Saturación

La saturación es un valor porcentual; 0% significa un tono de gris y 100% es el color completo.

Lightness / Levedad

La luminosidad también es un porcentaje; 0% es negro, 100% es blanco.

Pruébalo tú mismo

Los valores de color HSL son compatibles con todos los principales navegadores.