LESS ofrece un puñado de funciones que hacen la definición y la manipulación de colores super fácil. En éste tutorial vamos a recorrer un número de ellas, ayudándote a controlar colores, producir mejores combinaciones de colores y mantenerlos organizados.

Giro del Color

Primero está la función spin() que nos permite alcanzar un color alrededor del círculo cromático. Ésta función resulta útil, por ejemplo, cuando se genera un esquema de color. Puedes haber leído sobre estructuras de color comunes que forman combinaciones de color armónicas tales como complementarias, triádicas y complejas. Hay un número de herramientas, como Adobe Color CC (anteriormente Kuler), donde puedes generar esquemas de color para seguir éstas estructuras de forma instantánea. Pero ¿Qué tal si elaboramos nuestro propio esquema de color usando LESS?

Complementaria

Comenzaremos generando la estructura de color más fácil, complementaria. Éste par se compone de dos colores que se ubican en extremos opuestos del círculo cromático.

Primeramente, definimos la base de color como el punto de referencia hacia el segundo color. Elige un favorito, o cualquier color que se te venga a la mente. Aquí he elegido un color azulado, #3bafdA, como un ejemplo:

Como nos gustaría alcanzar el lado opuesto del círculo al color base, establecemos el valor de grados en 180.

@color-base       : #3bafdA;
@color-complement : spin(@color-base, 180);

Ésto nos da dos colores precisos y atractivos, que se complementan.

Aquí está un ejemplo de éstos colores aplicados a un prototipo de diseño web:

Triádica

Podemos explorar más modelos de color y crear una estructura de color triádica. Triádica, como el nombre lo implica, comprende tres colores. Por lo tanto dividimos nuestro círculo en tres partes y establecemos el grado de rotación dentro de la función spin():

// Triadic structure
@color-base        : #3bafdA;
@triadic-secondary : spin(@color-base, -(360 / 3));
@triadic-tertiary  : spin(@color-base, (360 / 3));

El resultado es igualmente agradable:

Mezcla de Colores

Otra forma de crear esquemas de colores es mezclando dos colores; probablemente algo que aprendiste mucho tiempo atrás en tu clase de educación artística en la primaria. Si mezclamos rojo con amarillo, por ejemplo, obtendremos un tono sólido de naranja. Con LESS, podemos hacer lo mismo usando la función mix():

div {
  color: mix(red, yellow);
}

El resultado de éste ejemplo es #ff8000-el código hexadecimal exacto del color "naranja":

div {
  color: #ff8000;
}

Consejo

Evita mezclar colores del mismo espectro. Dado nuestro color base, #3bafdA, que reside en algún lugar entre los azules en el espectro visible, obtendrás resultados más satisfactorios al mezclarlo con un color opuesto, por ejemplo, mediumvioletred o lightseagreen.

@color-base      : #3bafdA;
@color-primary   : mix(@color-base, mediumvioletred);
@color-secondary : mix(@color-base, lightseagreen);
@color-tertiary  : mix(@color-base, mintcream);

Ésto nos da un bonito esquema de color; todos los colores generados se perciben armónicos pues heredan del mismo tono, #3bafdA.

Si no tienes idea de los colores que debes aplicar, elige tu favorito y trata de mezclarlo con cualquier color usando la función mix(). El resultado-probablemente-te sorprenderá.

Aquí está un ejemplo (familiar) de aplicar tales resultados a un prototipo de diseño móvil.

Tonos y Saturación de Color

Examinemos algunas otras formas de manipular color.

Tono

Tono define la intensidad clara y oscura de un color. En diseño web, tono comúnmente entra en práctica para distinguir estados de elementos. Un botón, por ejemplo, puede tener un color de fondo ligeramente más oscuro o más claro en estados :hover o :focus. Con LESS, podemos usar la función darken() y lighten() para hacer un color más oscuro o más claro, respectivamente.

@color-base  : #3bafdA;
@color-hover : lighten(@color-primary, 10%); //#9c84c1
@color-focus : darken(@color-primary, 10%); //#684b94

Ésto resulta en:

Saturación

Alternativamente, podemos ajustar la saturación del color en lugar de la luminosidad. La saturación define la profunidad de un color; una mayor saturación hará un color más vibrante, mientras el nivel más bajo de saturación lo convertirá a gris.

Dado el ejemplo de arriba podemos remplazar las funciones de tono con saturate() y desaturate(), y adicionalmente definir el color del estado deshabilitado.

@color-base    : #3bafdA;
@color-hover   : saturate(@color-primary, 10%);
@color-focus   : desaturate(@color-primary, 10%);
@color-disable : lightness(desaturate(@color-primary, 100%), 30%);

Aplica mayores ajustes a la luminosidad del color desaturado hasta que se vea bien en el contexto de tu diseño.

Nuestras variables están ahora ligadas estrechamente al color base que nos ahorrará mucho tiempo cuando personalicemos los estilos de botón; cambiarán propiamente cuando ajustes el color base. 

Resultado del Color Inteligente

LESS permite que nuestros estilos sean un poco más inteligentes. Por ejemplo, podemos hacer que nuestros estilos "piensen" y decidan que color aplicar bajo ciertas condiciones. Asumiendo que estamos creando una plantilla para sitio web, éste es el botón de estilo básico, y planeas extenderlo con varios colores y estilos. ¿Pero cómo podemos controlar los resultados del color? Seguramente no queremos el color del texto sea oscuro en un fondo oscuro, o viceversa. Necesitamos asegurarnos que el texto contenga contraste para que sea más fácil de leer, y aquí es donde entran en juego las funciones de contraste contrast() .

@body-bg: #000;

body {
	background-color: @body-bg;
	color: contrast(@body-bg);
}

En el ejemplo de arriba, establecimos el color a través de la función contrast(). Ésto asegura que el color del texto tiene suficiente contraste contra el color de fondo. En éste caso, el texto debe dar como resultado #fff ya que el fondo es #000. Si estableces el fondo a un color claro, tal como white, wihtesmoke, o skyblue, el color debería dar como resultado #000.

body {
  background-color: #000;
  color: #fff;
}

Puedes también personalizar el color para contraste oscuro y claro. En el siguiente ejemplo, el color dará como resultado #999 o #777 en lugar de #fff y #000.

@body-bg     : #f0f0f0;
@color-light : #999;
@color-dark  : #777;

body {
	background-color: @body-bg;
	color: contrast(@body-bg, @color-dark, @color-light);
}

Con frecuencia, también prefiero elaborar una declaración de estilo si el color es transparente, especialmente para el color de fondo. Para hacer eso, incluye la declaración background en estructuras de control  denominadas  LESS Mixin Guards.

@bg: transparent;
.element {
	& when not (@bg = transaprent) {
		background: @bg;
	}
}

Pudieras también hacer lo mismo para declarar las propiedades border y color, y ahorrar un par de líneas en tu hoja de estilos al eliminar reglas innecesarias.

Terminando

Espero que unas de éstas funciones te ayuden a mejorar el arreglo del color en tus diseños. Puedes encontrar la lista completa de funciones de color de LESS aquí, y comenzar a experimentar. Tendría que estar de acuerdo con Kezz Bracey. No hay mejor forma de manejar el color que con la prueba y error:

"Fue sólo después de que comencé a crear esquemas de color sólidos a través de prueba y error que empezó a tener sentido toda la teoría del color que había leído.

Más Recursos

• Una visión más profunda de Mixins de LESS
• Una introducción a la Teoría del Color para Diseñadores Web
• 6 Pautas de Color "Primero Seguridad" para la Web dirigidas a Principiantes
• Principios para un Diseño Exitoso de  Botones.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!