Cómo combinar colores en diseño Web

Esto que aprenderás en este tutorial lo puedes volver tu profesión con los Cursos de Diseño de Interfaces de Platzi.

A muchos diseñadores que recién se inician, así como a muchos programadores, les resulta un dolor de cabeza el tema de la combinación de colores. La verdad es que si uno no tiene mucha experiencia en el manejo del color, hay algunos datos que pueden ayudar, cuando menos, a no dejar ciega a la población de videntes en el mundo.

Modos de color

Esto es bastante sencillo pero es un dato que tenemos que tener presente al momento de trabajar en cualquier programa de diseño. El modo de color.

Modo de color en CMYK

Estos colores se llaman colores tinta. Son los que utilizan los sistemas tradicionales de impresión en papel, porque cada color corresponde a una tinta específica.

C= cyan
M= magenta
Y= amarillo
K= negro

Cuando nuestro trabajo va a ser impreso debemos trabajar en nuestros programas de diseño en ese modo de color.

Si mezclamos todos estos colores en un 100%, nos queda un valor negro, por eso es que esta mezcla de colores se llama Síntesis Sustractiva de Color (la explicación de esto es más científica pero dejémoslo ahí).

Modo de color en RGB

Estos colores se llaman colores luz. Son los que utilizan todas las pantallas e inclusive el ojo humano.

R = rojo
G = verde
B = azul

Si nuestro trabajo va a ser exclusivo para pantallas, debemos trabajar en RGB para poder visualizar correctamente los colores.

Si mezclamos estos colores al 100% nos queda un valor blanco, por esto es que a esta mezcla se le llama Síntesis Aditiva del Color.

Combinar colores con el círculo cromático

En mi opinión estas fórmulas a veces suelen resultar algo pesadas, pero sirven para darnos un puntapié y partir de una base sólida.

El círculo cromático pretende organizar los colores en busca de combinaciones armoniosas. Si los vemos desde el punto de vista de cómo los percibimos, podemos hablar de colores cálidos y colores fríos.

Colores análogos

Son los que están “pegados” a ambos lados del color elegido.

Si ven el gráfico, la combinación de estos tres colores es armoniosa.

Colores complementarios

Son los colores que están opuestos en el círculo cromático.

wikipedia :

En la teoría del color se dice que dos colores son denominados complementarios si, al ser mezclados en una proporción dada el resultado de la mezcla es un color neutral (gris, blanco, o negro).

Como ven la combinación entre los colores es más fuerte y contrastante pero sigue funcionando.

Tono y luminosidad

Elige un tono cualquiera y si le damos luz nos da una gama de colores dentro de la misma tonalidad. Lo mismo ocurre si le quitamos luz al tono, nos da nuevos colores de la misma tonalidad pero con variantes oscuras.

Ahora que expandimos los colores podemos combinar de nuevo colores complementarios pero no puros, sino que podemos elegir con mayor o menor luminosidad.

Combinación de colores en tríadas

Se logra a partir de un triángulo equilátero, consiguiendo así una combinación de tres colores. Recuerda que una vez establecidos los tonos, podés variarlos en su luminosidad hasta acomodarlos.

Pero, cómo lo aplico en mis diseños?

Cuando estamos en el comienzo de un proyecto de diseño, SIEMPRE hay que investigar el mercado en el que se moverá el diseño que haremos. Hay rubros que tienen convenciones en cuanto al uso del color y la textura. Si vamos a un supermercado, vemos que en las estanterías donde hay productos similares, todos se mueven en las mismas gamas de color, por ejemplo: perfumería en tonos suaves y pasteles, o la sección de juegos infantiles en la que los colores son vivos: generalmente utilizan colores primarios para una edad temprana y colores aún más vivos y arriesgados en edades más avanzadas.

Aquí vemos dos diseños, uno que utiliza los colores complementarios y el otro colores análogos.

Pero ¿el blanco y el negro?

El blanco y el negro no son colores, son valores.