Colores en CSS3

El objetivo de este post es ver algunas características de la recomendación del módulo de color en CSS3 especificada en http://www.w3.org/TR/css3-color/.

La principal novedad en el uso del color en CSS3 es la posibilidad de usar modelos de color rgb, rgba, hsl y hsla. Una de las principales ventajas de estos modelos de color es que hacen más fácil la gestión de las diferentes propiedades de los colores además de aplicar un nivel de opacidad al color. El modelo hsl, que es el que quiero destacar, es un modelo más intuitivo ya que indica los valores de matiz, saturación y luminosidad y nos permite crear paletas de colores de forma más sencilla realizando variaciones en alguno de los valores del modelo hsl. El valor de saturación se representa por un ángulo del círculo de color, que se mide en grados, aunque sólo el número es especificado de 0 a 360, donde el rojo=0=360. La saturación y la iluminación son especificadas en porcentajes.

div { color: hsl(120, 100%, 75%) }

1	div { color: hsl(120, 100%, 75%) }

Ahora voy a realizar un ejemplo para mostrar lo sencillo que puede ser realizar un selector de color en base al modelo hsl. Para ello, utilizo la etiqueta ‘input’ de tipo ‘range’ para hacer más cómoda la selección de los diferentes valores. Este tipo sólo funcionará en algunas de las últimas versiones de los diferentes navegadores ya que se trata de una novedad de forms de html5 http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#range-state-(type=range). Los atributos ‘min’ y ‘max’ del ‘input’ de tipo ‘range’ si no se especifican serán 0 y 100, respectivamente, y podemos asignarle un factor de escala de pasos, ‘step’, que por defecto es 1. A continuación creamos una función JavaScript que recoge y actualiza cada uno de los valores de los ‘input’.

function update(){
	var hinput = document.getElementById("hinput")
	var htxt = document.getElementById("htxt")
	var h = hinput.value;
	htxt.innerHTML = h;

	var sinput = document.getElementById("sinput")
	var stxt = document.getElementById("stxt")
	var s = sinput.value;
	stxt.innerHTML = s;

	var linput = document.getElementById("linput")
	var ltxt = document.getElementById("ltxt")
	var l = linput.value;
	ltxt.innerHTML = l;

	var col = document.getElementById("col")
	col.setAttribute("style", "background-color: hsl("+h+", "+s+"%, "+l+"%)");
}

document.addEventListener("change", update, false);
window.addEventListener("load", update, false);

function update(){

var hinput = document.getElementById("hinput")

var htxt = document.getElementById("htxt")

var h = hinput.value;

htxt.innerHTML = h;

var sinput = document.getElementById("sinput")

var stxt = document.getElementById("stxt")

var s = sinput.value;

stxt.innerHTML = s;

var linput = document.getElementById("linput")

var ltxt = document.getElementById("ltxt")

var l = linput.value;

ltxt.innerHTML = l;

var col = document.getElementById("col")

col.setAttribute("style", "background-color: hsl("+h+", "+s+"%, "+l+"%)");

}

document.addEventListener("change", update, false);

window.addEventListener("load", update, false);

Además del modelo hsl podemos usar el modelo hsla, donde ‘a’ especifica el valor alpha del color. Este valor alpha será un número entre 0.0 y 1.0 que se usará de la siguiente forma.

div { color: hsla(120, 100%, 75%, 0.5) }

1	div { color: hsla(120, 100%, 75%, 0.5) }

Añadiré al anterior ejemplo el uso del valor alpha. Para simular la transparencia de la forma que lo hacen programas de edición de imagen como Photoshop o Fireworks, en lugar de usar una imagen de fondo, he usado un patrón realizado íntegramente con CSS3. Muchos conocemos esta técnica por la galería de patrones de Lea Verou.

	background-image: -webkit-linear-gradient(45deg, #DFDFDF 25%, transparent 25%, transparent 75%, #DFDFDF 75%, #DFDFDF), -webkit-linear-gradient(45deg, #DFDFDF 25%, transparent 25%, transparent 75%, #DFDFDF 75%, #DFDFDF);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;

background-image: -webkit-linear-gradient(45deg, #DFDFDF 25%, transparent 25%, transparent 75%, #DFDFDF 75%, #DFDFDF), -webkit-linear-gradient(45deg, #DFDFDF 25%, transparent 25%, transparent 75%, #DFDFDF 75%, #DFDFDF);

background-size: 16px 16px;

background-position: 0 0, 8px 8px;

Finalmente, mediante JavaScript convertimos los diferentes valores a modelos rgb y hexadecimal.