Una de los puntos fuertes de CSS3 es el uso del color para nuestros desarrollos. Al tratamiento habitual con RGB, podemos sumarle otro método llamado HSL: Hue (matiz), Saturation (saturación) y Lightness (luminosidad).
Con este método tenemos un color base, que tiene un rango de 0 a 360, y un porcentaje de saturación y otro de luminosidad. A partir de este color base o matiz, podemos modificar los porcentajes de saturación (reduciéndolo nos acercamos a tonos grises y aumentándolo subimos su intensidad) y de luminosidad (aumentándolo nos acercamos al blanco y reduciéndolo al negro) y encontrar variaciones del mismo color que nos pueden ser muy útiles para crear una paleta adecuada en nuestro desarrollo.
Su representación es muy sencilla. Para poner el color #E100FF de fondo en un div tendríamos que indicar lo siguiente en nuestra hoja de estilos:
#contenedor { background-color: hsl(293, 100%, 50%); }
Si queremos obtener además una transparencia del 75% en nuestro div, solo tendremos que cambiar el selector y usar hsla:
#contenedor { background-color: hsla(293, 100%, 50%, 0.75); }
Como herramienta útil os dejo HSL Color Picker de Brandon Mathis, que a partir de un color en RGB podemos obtener su equivalente en HSL y «jugar» con su matiz, saturación y luminosidad para obtener el color que deseemos.
http://hslpicker.com
Os dejo también enlace a la recomendación del W3C:
http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color