combinando colores desde código

esta nota técnica responde a las necesidades de mis estudiantes de combinar colores desde código. la mayoría de los casos para controlar una composición cromática se usan pocos matices (hasta solo uno) y el resto de la composición se maneja con variaciones de ese matiz y acromáticos. este es el modo más fácil y seguro de manejar una composición.

acerca de este tema desarrollé algunas teorías en el pasado que se pueden profundizar en mi tercer libro “el error de le corbusier” , pero en este caso me voy a referir a recetas rápidas de cómo combinar colores en “real-time”.

composiciones seguras con uno o dos matices, el resto acromáticos

hay casos en que por su naturaleza es necesario tener muchos colores o matices. el caso clásico es un mapa, en el que muchos “países” limitan con otros y queremos que tengan colores distintos para evidenciar claramente sus formas y límites, como en la figura siguiente.

en algunos de estos casos es imprescindible que sea el computador (y no el diseñador) el que defina los colores de una composición cromática, esto debido situaciones como una excesiva (o desconocida)  cantidad de colores que se necesitan, lo que hace imposible decidir la composición cromática con antelación.

lo primero que hay que decir es que en el mundo digital el modelo más usado de manejo del color sería el RGB. combinar colores armónicamente en RGB es mucho más complejo que en otros modelos de color. una vez más en “el error de le corbusier” hay una amplia explicación de este punto específico.

en este caso lo más cómodo es pasarnos al modelo de color HSB, prácticamente en todos los lenguajes de programación tienen la posibilidad de manejar los colores desde este modelo.

el modelo HSB, divide las características del color en “hue” o matiz, saturación y luminosidad. la idea detrás de manejar el color con HSB se basa en que: colores con características similares tendrán más probabilidades de ser armónicos que colores con características distintas. como este modelo nos permite manejar el matiz, la luminosidad y la saturación en forma independiente podemos controlar mejor la selección automatizada.

en general se puede decir que una estrategia eficiente de combinar colores es dejar la saturación y la luminosidad fijas y cambiar solo los matices.

 

caso clásico de un mapa que necesita muchos colores y eso desordena la composición cromática

sí pensamos en los sliders típicos para definir colores en ilustrador o photoshop, en el modelo HSB, se verían así.

podemos usar este tipo de gráfico para especificar como vamos a combinar colores.

usando este concepto como base usaremos un diagrama para identificar los campos que deseamos cambiar para combinar colores.

 

interface clásica de manejo de colores en el modelo HSB

diagrama propuesto para especificar los campos en los que se pueden mover los valores del color

por ejemplo, en el caso simple que acabamos de explicar; en el que se usa un solo matiz y se cambia la saturación y la luminosidad, podríamos especificar esta estrategia c0mo se muestra en el gráfico.

lo que pretende explicar que el matiz (H) es uno solo matiz, mientras que el S y el B se pueden mover a su antojo en todo el rango.

en código (usaré código en processing porque es bastante general) se vería más o menos así:

colors[i] = color(25, random(100), random(100));

en donde el matiz es 25, o sea un número fijo, mientras que la saturación y la luminosidad es variable en un rango de 0 a 100.

estoy usando rangos de 0 a 100 para mayor legibilidad pero obviamente esto se podría aplicar en rangos de 0 a 255 como es usual en colores digitales, además parto de que existe una matriz que se llama colors [n ], en la que se almacenan los n colores que se necesiten.

 

el resultado son composiciones como las de las figuras del lado con H de 23 y 87 respectivamente.

 

diagrama propuesto para especificar los campos en los que se pueden mover los valores del color

con esta metodología ya clara, probemos cómo combinar colores con muchos matices de tal modo que sean en general armoniosos.

recordemos que la idea general es variar los matices (pues los necesitamos para algo como el mapa) pero mantener las otras características del color (como la luminosidad y la saturación) muy similares para obtener colores que armonicen juntos. por ejemplo, con un esquema como el de la figura.

en este caso queremos decir que los matices (H) se moverán en todo su rango pero la saturación de los colores será baja, todos entre 0 y 50, en cambio la luminosidad será alta, siempre entre 50 y 100.

 

en código la idea se vería algo así:

colors[i] = color(random(100), random(50), random(50,100));

lo que daría algo así como colores “pastilla”, como los de la figura.:

composiciones automáticas creadas con cualquier matiz pero con baja saturación y alta luminosidad.

por supuesto es posible reducir también el rango de colores en H y obtener una gama de “similares”, en este caso podríamos probar algo así como se ve en la figura, o sea:

colors[i] = color(random(40,60), random(50), random(50, 100));

lo que resultaría en algo como las composiciones adjuntas.

por supuesto podemos usar la misma idea con un rango distinto:

colors[i] = color(random(30), random(50), random(50,100));

y obtendríamos algo similar en otra temperatura.

 

el siguiente paso es cambiar algo los rangos de saturación y luminosidad tratando de mantener una armonía global, la selección de los mismos dependerá de la semántica asociada a la composición, pero la generación seguirá siendo controlable y producible en tiempo real. veamos por ejemplo la especificación de la derecha.

donde los colores son oscuros pero muy saturados, en este caso se uso una base de 10 a 50 para que no quedaran demasiados negros.

colors[i] = color(random(100),random(50) + 50,random(10,50));

 

en el caso de querer colores pastel, la estrategia podría ser esta la especificación y los resultados se verían así.

colors[i] = color(random(100), random(40), random(90,100));

cómo se ve las saturaciones bajas y las luminosidades altas, condiciones comunes a todos los colores, conservan la armonía general de la composición aun cuando los matices pertenecen a todo el espectro.

con estas técnicas es posible generar composiciones crómaticas autómáticas de muchos colores, necearias en algunos casos, pero con algún nivel de armonía.

 

mismo mapa del inicio pero con un tratamiento cromático como el explicado.

prof. dr. franklin hernández-castro, ph.d.