Paletas de colores con Sass


A la hora de comenzar un proyecto web es fundamental elegir una buena paleta de colores, acorde con la identidad y los objetivos previstos.

En el proceso de búsqueda, aplicaciones como Adobe Kuler (mi favorita), ColorSchemer o la web de COLOURlovers pueden sugerirnos buenos tonos a partir de un color base que proporcionemos. Muchas de estas aplicaciones se basan en la teoría de color y construyen pequeñas paletas de colores que están relacionados a partir de reglas o armonías.

Ya que ultimamente nos pasamos la vida pre-procesando CSS, pensé que sería buena idea incorporar esta selección de colores (vía funciones de Sass) a nuestro arsenal.

Hace poco encontré una librería de mixins de Sass muy interesante, donde se incluía una paleta monocromática que me sirvió de base para construir el resto de armonías.

Monocromática

Tenemos una función llamada shades con dos parámetros uno para pasar el color sobre el que queremos hacer la modificación y otro con un valor dependiendo del tipo de cambio. En este caso, estamos creando una paleta de 4 colores claros (l1,l2,l3,l4) y 4 oscuros (d1,d2,d3,d4). Para generar los colores claros se utiliza la función tint, con porcentajes de 10%, 25%, 50% y 75%. Para los colores oscuros, se actúa de igual manera pero en este caso haciendo uso de la función de color shade para oscurecerlos en la misma proporción.

@function shades($color, $change: n) {
  @if $change == n {
    @return $color;
  }
  @if $change == l1 {
    @return tint($color, 10%);
  }
  @if $change == l2 {
    @return tint($color, 25%);
  }
  @if $change == l3 {
    @return tint($color, 50%);
  }
  @if $change == l4 {
    @return tint($color, 75%);
  }
  @if $change == d1 {
    @return shade($color, 10%);
  }
  @if $change == d2 {
    @return shade($color, 25%);
  }
  @if $change == d3 {
    @return shade($color, 50%);
  }
  @if $change == d4 {
    @return shade($color, 75%);
  }
}

La forma de usarlo para los colores claros sería:

$base-color:#00A4FF; // color base
 
.shadesl div:nth-of-type(1){
  background-color:$base-color;
}
.shadesl div:nth-of-type(2){
  background-color:shades($base-color,l1);
}
.shadesl div:nth-of-type(3){
  background-color:shades($base-color,l2);
}
.shadesl div:nth-of-type(4){
  background-color:shades($base-color,l3);
}
.shadesl div:nth-of-type(5){
  background-color:shades($base-color,l4);
}

 paleta monocromática

Complementario

Esta paleta es más sencilla, puesto que en Sass existe la función de color complement que como se puede intuir, nos devuelve el color complementario que es el que está a 180º de distancia en la rueda de color de aquel que pasemos como base. Nuestra función personalizada complementary quedará así:

@function complementary($color, $change: n) {
  @if $change == c { 
    @return complement($color);
  }
}

Combinando algunas de las funciones de color propias de Sass, podemos obtener una curiosa paleta a partir del color complementario:

paleta complementarios

Análogos

Los colores análogos son aquellos que se encuentran uno justo al lado del otro en la rueda de color. Gracias a la función de color adjust-hue, que nos permite modificar un tono en función del valor de grados que le pasemos, he utilizado los valores 45º y -45º con respecto al color base.

@function analogous($color, $change: n) {
  @if $change == n {
    @return $color;
  }
  @if $change == a1 { 
    @return adjust-hue($color, 45deg);
  }
  @if $change == a2 {  
    @return adjust-hue($color, -45deg);
  }
}

paleta analogos

Triadas

Al conjunto de tres colores que están dispuestos uniformemente, manteniendo un equilibrio alrededor de la rueda de color se les denomina triada de colores. Para esta paleta y siguiendo el ejemplo anterior de utilización de adjust-hue , he seleccionado los colores situados a  120º y 240º.

@function triad($color, $change: n) {
  @if $change == n {
    @return $color;
  }
  @if $change == t1 { 
    @return adjust-hue($color, 120deg);
  }
  @if $change == t2 {  
    @return adjust-hue($color, 240deg);
  }
}

paleta triada

Split de colores complementarios

En esta paleta se utiliza un color base y los dos colores adyacentes a su complementario. Como ya hemos visto, el color complemetario se sitúa a 180º por lo que en este caso vamos a sumar y restar 30º a ese valor obteniendo dos tonos a 150º y 210º con un alto contraste entre ellos.

@function split($color, $change: n) {
  @if $change == n {
    @return $color;
  }
  @if $change == s1 { 
    @return adjust-hue($color, 150deg);
  }
  @if $change == s2 {  
    @return adjust-hue($color, 210deg);
  }
}

paleta split complementarios

He creado una pequeña demostración en CodePen de todas las paletas, así como un repositorio en Github.