Círculo cromático
Hoy hablaremos de los colores en la Web, sus características, combinaciones, construcción de paletas acordes a la temática, etc.
Hace ya un tiempo, habíamos publicado un artículo de color en el cual hacíamos referencia a una serie de temas importantes a la hora de entender como funcionan los colores.

Esta vez vamos a enfocarnos en la Web, y como poder mejorar y darle sentido nuestro diseño con colores.

Cuando hablamos de colores para la Web, nos referimos a los colores que percibimos en una pantalla, distinto a aquellos que obtenemos ojeando un libro o mirando un afiche. Los colores de una pantalla, son una síntesis aditiva, colores de luces determinados por la suma de otros colores; a diferencia de la síntesis sustractiva, la cual consiste en la obtención de un color a traves de la mezcla de pigmentos; por lo tanto, los colores que observamos en los objetos, por ejemplo un libro que estamos hojeando, son obtenidos por la luz reflejada. De todo el espectro, hay colores que son absorvidos por los objetos y otros reflejados, estos últimos, son los colores que percibimos.

Primero veamos una breve descripción de diferentes temas que se mencionan habitualmente acerca de los colores.

Colores Fríos

fríos
Colores fríos son los que están comprendidos dentro del círculo cromático entre el azul y el verde; esto es debido a la percepción térmica que tenemos las personas acerca de los colores y el entorno, agua, mar, naturaleza viva, etc. Esto nos da una pista, cuando quiero comunicar frescura, naturaleza, tranquilidad, paz; los colores fríos serán buenos aliados.

Colores cálidos

cálidos
Los colores cálidos están comprendidos entre el amarillo y el rojo, al igual que los colores fríos se asocian psicológicamente al calor; se relacionan con la fuerza; son colores que expresan aproximación, acogimiento y actividad; son colores que despiertan el apetito y la alegría.

Los colores según su temperatura, actúan directamente sobre el sentimiento. Es bueno considerar que la lejanía contiene colores más fríos que la cercanía.

Contraste

El contraste tiene que ver con la diferencia de intensidad, el contraste intensifica la diferencia entre dos o más colores. Existen distintos tipos de contrastes, por un lado tenemos el contraste de luminosidad, que está dado por el claro-oscuro, o sea cuando tenemos un color claro o saturado de blanco y un color oscuro o saturado de negro. El alto contraste de iluminación es una buena herramienta para el diseño del texto y su alto grado de legibilidad.

Luego tenemos el contraste de valor, esté está dado por el entorno del color, si ubicamos el mismo color en dos entornos diferentes, primero sobre un fondo claro y luego sobre un fondo oscuro, veremos que el mismo color sobre un fondo claro, nos da la percepción de que es más claro.

El contraste de saturación se origina cuando saturo un color puro con negro o blanco; los colores puros pierden luminosidad cuando se les agrega negro y ganan luminosidad cuando se les suministra blanco.

El contraste de temperatura estará dado cuando confronte un color frío con un color cálido.

Luego tenemos el contraste de complementarios, que son los colores que aparecen enfrentados en el círculo cromático, por ejemplo el violeta con el amarillo.

Colores pastel

Los colores pastel, son nada más ni nada menos que todos los colores del círculo cromático con el agregado de blanco, también se los llama colores apagados. Dan la sensación de frescura, suavidad y naturalidad.

Tonos

Un tono representa la cantidad de luz de un color, por lo tanto, a partir de un color dado, un tono es el color alterado por blanco o negro.

Matices

Como la mayoría ya sabe, los colores básicos del círculo cromático, son el rojo, azul y amarillo; un matiz es todo aquel color que resulta de la combinación de cualquiera de estos colores. Veamos cuál es la definición de Wikipedia acerca de matiz: “el grado en el cual un estímulo puede ser descrito como similar o diferente de los estímulos como rojo, amarillo y azul”.

Armonía

La armonía es la perfecta coordinación de los valores que un color adquiere en una composición. El manejo de la intensidad de los colores seleccionados. El color padre en una armonía es el color dominante, el que aparece en mayor proporción y encargado de armonizar; este es un color neutro. El color tónico es el complemento del color dominante, es el más potente en color y valor. El tercero y último es el que oficia de enlace entre el dominante y el tónico, o sea el mediador. Cuando tenemos dos colores que no armonizan, tenemos que separarlos con un color neutro. El blanco es un buen color para armonizar los colores luminosos.

Hay diferentes tipos de armonías. Un esquema análogo se da cuando se utilizan colores relacionados en el círculo cromático, o sea cuando en un color hay presencia del otro. Un esquema análogo es por ejemplo cuando utilizamos rojo y naranja, el naranja está compuesto por rojo y amarillo.
Un esquema terno armónico está compuesto por tres colores ubicados a igual distancia en el círculo cromático, o sea, formando un triángulo equilátero. Un ejemplo de ello son el violeta, verde y naranja.
Esquema complementario es el que está formado por dos colores opuestos en el círculo cromático, estos pares son los que forman el mayor contraste de color, verde y rojo por ejemplo.
El esquema complementario dividido, se obtiene combinando cualquier color con los dos colores ubicados a ambos lados de su color opuesto; como son por ejemplo amarillo con violeta y azul.

En conclusión, la armonía es la combinación de los colores del círculo cromático y con ella obtendremos gran parte de los estímulos visuales con los cuales comunicaremos nuestro mensaje. Ya sea desde una armonía simple que combina tonos de un mismo color o una más compleja que utilice una tríada de colores complementarios. Lo importante es entender el mensaje, seleccionar los colores acordes y luego combinarlos en base al círculo cromático, los esquemas nos ayudan a entender las estructuras básicas para tomar como punto de partida.

¿Cómo puedo mejorar mi Web con el color?

Cómo todo en la vida, existe un camino largo y uno corto; el camino largo es aprender sobre color, leer mucho y practicar coloreando, ya sea manual o digitalmente, mezclar colores, agregar negro y blanco a matices, combinar colores, etc; entender que lograr una armonía con colores no es algo azaroso sino que hay que entender algunos esquemas para poder ponerlos en práctica. Por lo tanto, crear una paleta de colores desde cero y lograr que quede armónica, es algo que requiere algo de conocimiento. De todas formas, primero uno debe tener claro el mensaje, cuál será la temática, el concepto; usare colores fríos, cálidos, pasteles, brillantes, será un diseño dark, profundo o fresco y claro; este tipo de cuestionamientos inevitablemente uno debe hacerlos antes de empezar a seleccionar colores.

El camino corto consiste en conseguir paletas de colores creadas en base a una temática. Para esto existen sitios en los cuales podemos encontrar cientos de paletas de colores que se corresponden con palabras clave; supongamos que buscamos una paleta de colores para un diseño pensado para San Valentin, entonces podemos buscar una paleta a partir de la palabra clave “love”. Hagan click aquí y observen lo que les digo. El mejor sitio relacionado con colores que pude encontrar en la red es Colour Lovers; aquí podrán encontrar paletas, patrones de diseño para aplicar en fondos de página, paletas relacionadas a palabras clave, crear tu propia paleta, ver que colores usan los sitios que marcan tendencia, formar parte de una comunidad de amantes del color, etc.

Obtener colores de la fotografía

Una manera interesante de obtener una paleta de colores es a partir de una fotografía; seleccionamos una foto en la cual nos agrade su gama de colores y a partir de ella creamos una paleta con los principales colores que predominan en dicha foto. Respetar esta paleta de colores tanto en tipos como en cantidades, logrará que el resultado de nuestro diseño adquiera el mismo tenor visual que la fotografía.

Este trabajo lo podemos hacer manualmente utilizando el cuenta gotas de Photoshop, pero también existen aplicaciones que nos permiten obtener una paleta a partir de una fotografía y de forma dinámica; aquí pueden ver un ejemplo.

Color Palette Generator es un sitio en el cual referenciamos una imagen desde red, y nos da como resultado dos paletas, una de tonos pálidos y otra con tonos brillantes. También nos permite copiar y pegar los valores hexadecimales de cada color y así usarlos posteriormente en cualquier programa de diseño.

Aquí pueden ver una foto con una tonalidad vintage y el resultado de las dos paletas de colores:

Hasta aquí hemos llegado hoy, espero les haya resultado productivo y puedan darle rienda suelta al color en vuestros trabajos.

¡Hasta pronto!

Categoría: Web

Publicado por: negro

Artículos Relacionados

5 Respuestas para “Colores para la Web”

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>