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:
Será de color verde (120°), con máxima saturación (100%) y luminosidad media (50%).p {
color: hsl(120, 100%, 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.
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.
Ejemplo
<style>
div {
background-color: hsl(180, 50%, 50%);
color: hsl(0, 0%, 100%);
}
</style>
Try It Yourself »
