El Color

Sistema de color hsl

A diferencia de los colores rgb-hex o rgb-dec, los colores hsl son mucho más intuitivos y mas fácil de utilizar. HSL es el acrónimo de hue (matiz), saturation (saturación), lightness (luminosidad).

Hue (Matiz)

Hue toma valores del rango 0..359 que representan un ángulo. Este ángulo, trasladado a la rueda de color, corresponde a un matiz de color. A lo largo de los 360° el color cambia de rojo ( 0° ) a verde (120°) a azul ( 240°) y de nuevo a rojo ( 360° ).


Rojo
hsl(0, 100%, 50%)
Verde
hsl(120, 100%, 50%)
Azul
hsl(240, 100%, 50%)

Color complementario

Conociendo el valor "hue" de un color podemos calcular fácilmente el color complementario de este.

Por ejemplo:
El código hsl para rojo es hsl(0,100%, 50%), donde H = 0;
El parámetro H del color complementario ( diametralmente opuesto ) será de 180, o sea hsl(180,100%,50%), un color a medio camino entre verde y azul.

Cian
hsl(180, 100%, 50%)
Magenta
hsl(300, 100%, 50%)
amarillo
hsl(60, 100%, 50%)

Saturation (saturación)

La saturación de un color se representa en tanto por ciento.

Rojo | s: 100%
hsl(0, 100%, 50%)
Rojo | s: 80%
hsl(0, 80%, 50%)
Rojo | s: 60%
hsl(0, 60%, 50%)
Rojo | s: 40%
hsl(0, 40%, 50%)
Rojo | s: 20%
hsl(0, 20%, 50%)
Rojo | s: 0%
hsl(0, 0%, 50%)

Una vez que el valor de la saturación alcanza el 0%, el color que se obtiene es un gris.

Lightness (Luminosidad)

La luminosidad de un color se representa en tanto por ciento. Puede tomar valores entre 100% (blanco) y 0% (falta de color o negro).

Verde | l: 100%
hsl(120, 100%, 100%)
Verde | l: 80%
hsl(120, 100%, 80%)
Verde | l: 60%
hsl(120, 100%, 60%)
Verde | l: 40%
hsl(120, 100%, 40%)
Verde | l: 20%
hsl(120, 100%, 20%)
Verde | l: 0%
hsl(120, 100%, 0%)