Tutorial Less: 13. Funciones para trabajar con colores en Less

Less nos ofrece un buen conjunto de funciones de diferentes tipos que le añaden un plus a la hora de simplificar la forma en la que podemos generar nuestras hojas de estilos y además nos permiten hacer cosas bastante interesantes.

Nos vamos a centrar en las funciones referentes a operaciones con colores porque son las que más juego nos pueden dar y serán de las que más utilicemos, de hecho, en varios de los artículos anteriores ya hemos utilizado varias funciones para trabajar con colores

En la web de Less tenemos un apartado de la documentación completo con todas las funciones que hay, por si quieres consultarlas.

El propósito de este post es ver de qué formas podemos usar las funciones de Less para conseguir esquemas de color fácilmente y sin tener que recurrir a herramientas externas o volvernos locos haciendo pruebas para ver que colores pueden combinar bien y de paso vamos a tener que gestionar un conjunto menor de colores lo que nos facilitará cualquier cambio.

Saturate y desaturate

Estas funciones sirven para saturar o desaturar un color para conseguir colores más vivos o más apagados respectivamente.

Tanto saturate como desaturate además del color sobre el que se realiza la operación tienen otro parámetro para indicar el porcentaje de saturación que se quiere aplicar.

@color: #147;

.clase-a {
  background-color: @color;

  &:hover {
    background-color: saturate(@color, 50%);
  }

  &:active {
    background-color: desaturate(@color, 25%);
  }
}

Lighten y darken

Estas dos funciones sirven para aumentar y disminuir la luminosidad de un color, vamos para aclararlo u oscurecerlo. Los parámetros que reciben estas funciones como en el caso anterior con saturate y desaturate son el color sobre el que se hace la operación y un tanto por ciento.

@color: #147;

.clase-b {
  background-color: @color;

  &:hover {
    background-color: lighten(@color, 15%);
  }

  &:active {
    background-color: darken(@color, 20%);
  }
}

Gracias a lighten y darken es muy sencillo tener por ejemplo los diferentes estilos para cada uno de los estados de los botones.

Fade, fadein y fadeout

Estas 3 funciones nos permiten modificar el nivel de transparencia de un color, fadein aumente la opacidad, fadeout aumente la transparencia y fade aplica el porcentaje de transparencia indicado de forma absoluta, es decir, con fade es irrelevante el nivel de transparencia que tuviese previamente el color porque el porcentaje definitivo va a ser el que se le pase a la función mientras que las otras dos funciones actúan progresivamente sobre el valor original de opacidad del color.

@color: rgba(17, 68, 119, 0.8);

.clase-b {
  background-color: @color;

  &:hover {
    background-color: fadeout(@color, 15%);
  }

  &:active {
    background-color: fade(@color, 50%);
  }
}

Spin

Aplica un giro al color en la rueda cromática para conseguir otro color distinto, por ejemplo haciendo un giro de 180 grados conseguimos el color complementario o haciendo uno de 120 y otro de 240 para conseguir el esquema triádico.

Aunque no hay ninguna limitación en el tamaño del ángulo en la práctica no tiene sentido hacer giros de más de 360 o menos de -360 por que solo sirven para que nos sea más difícil de visualizar el giro pero el resultado no cambia, vamos que es lo mismo girar 0 que 360 o 720 por ejemplo.

@color-triadico-1: #147;
@color-triadico-2: spin(@color-principal, 120);
@color-triadico-3: spin(@color-principal, 240);

.triadico-1 {
  background: @color-triadico-1;
}

.triadico-2 {
  background: @color-triadico-2;
}

.triadico-3 {
  background: @color-triadico-3;
}

Mix, tint y shade

Mix se puede utilizar para mezclar 2 colores y además tiene un parámetro extra para indicar la proporción con la que se debe de hacer la mezcla.

Y tint y shade son versiones simplificadas de mix donde la mezcla se hace con blanco y negro respectivamente usando el porcentaje indicado.

@color-a: #147;
@color-b: #177;

.clase-a {
  background: mix(@color-a, @color-b, 35%);
}

.clase-b {
  background: tint(@color-a, 35%);
}

.clase-c {
  background: shade(@color-b, 35%);
}

Greyscale

Convierte un color a escala de grises, es equivalente a usar desaturate(@color, 100%).

@color: #147;

.clase-c {
  backgoround-color: greyscale(@color);
}

Contrast

La función contrast sirve para escoger entre dos colores cual hace más contraste con un tercer color.

Un ejemplo típico es para elegir el color de la fuente, si el fondo es oscuro usamos una fuente clara y si es claro una oscura, pero si el color de fondo es una variable pues entonces necesitamos otra para la fuente o sino podemos usar esta función y así simplificamos los estilos.

La función puede recibir los siguientes parámetros contrast(color, color oscuro (opcional, predeterminado negro), color claro (opcional, predeterminado blanco), umbral (opcional));

• color: El color con el que se quiere mantener el contraste
• color oscuro:El color que se elegirá para hacer contraste con colores claros, por defecto negro.
• color claro:El color que se elegirá para hacer contraste con colores oscuros, por defecto blanco.
• umbral:Especifica en que porcentaje se hace la transición de oscuro a claro, el valor por defecto es 43%

@color-fondo: #147;
@color-fuente-claro: #abc;
@color-fuente-oscuro: #222;

// ejemplo rellenando todos los posibles valores
.clase-a {
  backgoround-color: @color-fondo;
  color: contrast(@color-fondo, @color-fuente-oscuro, @color-fuente-claro, 50%);
}

// ejemplo con solo el valor obligatorio
.clase-b {
  backgoround-color: @color-fondo;
  contrast(@color-fondo);
}

Y para terminar un ejemplito para ver en funcionamiento las funciones anteriores.

See the Pen Funciones de colores en less by Ivan Salas (@isc7) on CodePen.

Si te has quedado con ganas de más en la documentación hay unas cuantas funciones más para hacer distintos modos de mezcla de colores, para definir colores de distintos modos y para extraer información de los colores.