Teoria del Color

Guía rápida sobre el uso de colores en el

diseño

Diseño Gráfico Diseño Web

Tiempo de lectura 11 minutos.Publicado el Actualizado el 29 junio, 2021Colores Inspiración

Verónica Valenzuela

Dibujo, pinto y hasta a veces coloreo en SiloCreativo. Además como desde pequeña quise
ser escritora, con este blog cumplo mi sueño y escribo para compartir lo que voy
aprendiendo. ¿Que tienes alguna duda? Pues aqui estoy!

Read this article in English18 comentarios

★★★★★
4.70 / 5 (10 votos)

89€
Todos nuestros Temas WordPress en un pack

Ver Temas

Como no solo de tipografías se puede vivir…. vamos con los colores! Como os decía
cuando hablábamos del gris, este ya era el último de los colores que íbamos a comentar…
se nos han acabado (aunque pronto, muy pronto os presentare al oro y a la plata ) Sin
embargo, que se hayan acabado implica, que ya lo sabemos todo sobre ellos. Sabemos
cuando hemos de usar el rojo y cuando el azul, cual es la mejor combinación de el naranja y
el violeta, y en qué caso debemos usar el blanco y el negro… TODO! No hay gama de
color que se nos resista!

Construcción de un esquema de color

La construcción de un esquema de color, que en algunos casos podemos pensar que es

simple, podemos asemejarla con la construcción de una casa: necesitamos unos
cimientos fuertes donde se sustente la elección de estos colores. Ya lo hemos dicho en
numerosas ocasiones, la elección del color no puede ser porque luzca bien, sino que
debe ser una elección fundamentada.

Ya que cada color tiene la capacidad de transmitir unos sentimientos y sensaciones

distintos, aprovechemos esa capacidad y usémosla en nuestro proyecto. Si queremos
transmitir confianza, es mas fácil incluir el color azul en el logotipo, que tener que poner un
eslogan la palabra tranquilidad. Lo visual siempre es más rápido de entender!

Armonías de colores

Una vez hayamos estudiado o repasado (para los primeros de la clase ) La psicología de los
colores hablaremos de la armonía entre ellos, es decir la combinaciones generales. En
un principio, había pensado incluirlo todo en este artículo, pero dada la extensión del
mismo, este apartado lo ampliaremos el lunes que viene. Así, tenemos el fin de semana para
repasar 😉

¿Qué significa cada uno de los colores?

De esta manera, ahora que conocemos todos los colores a la perfección, puede ser un buen
momento para repasarlos y destacar las características de cada uno de ello. ¿ Os apuntáis?
😉
El color Negro:

Es quizá el color que implica el mayor contraste y sentimientos contrapuesto. Es el

color de la muerte y el fin, pero también de la elegancia por excelencia. Es un buen color
en el diseño, puesto que puede combinarse con casi todos los colores. Recordar también,
que en el caso del diseño de logotipo, una de las máximas que debe cumplir, es que puede
representarse en blanco y negro!

El color Blanco:

Lo primero que hemos de recordar, es que el blanco no es igual a nada a vacio. Si algo es
blanco tiene ese color, no significa que no esté lleno. Es el color de la pureza y la
elegancia. Al igual que el negro es combinable con todos los colores y nos puede dar orden
y calma.
El color Gris:

Aunque es un color que no aporta carácter, a menudo es muy usado en nuestro día a día,
pues al estar entre el blanco y negro, nos parece menos agresivo que el segundo y más
completo que el primero. Aunque normalmente se usa de manera despectiva, es un buen
complemento con el resto de colores, pues quita el peso que el color negro daría.
El color Rojo:

El rojo es fuerza, pasión, convicción… El color que esta presente mas a menudo, el color
de la sangre. Usado con demasiada fuerza o siendo demasiado brillante puede transmitir
agresividad, pero es el color que más llama la atención. El color de Silo Creativo!
El color Naranja:

Es el color de moda por excelencia e íntimamente relacionado con el cambio. Es el

color de lo alegre, no es ni rojo ni amarillo, está en el medio, casi quedándose solo con las
cualidades positivas de cada uno de ellos. Es el paso de uno a otro y por lo tanto el cambio.
Además de ser el color que más llama la atención. En publicidad, es más un sentimiento
que un color.
El color Amarillo:

Al igual que el negro, podemos decir que es un color de contrastes. Es el color de la

alegría por excelencia pero también el de la envidia. Es un color muy ambiguo. Esto puede
venir marcado por que es el color menos estable de todos los que hay. Una pizca de
cualquier otro color lo ensucian. Implica tantos sentimientos contrapuestos que es muy
difícil de usar en diseño.
El color Verde:

Como decíamos al hablar del verde: es mucho más que un color. Verde es un
sentimiento y una manera de ser. Es el color, que mas variedades distingue el ser
humano, puesto que es el color de la naturaleza. Es verde esperanza, verde tranquilidad.
Es el color también usado para aceptar, un paso que nos lleva al fin. El color más usados en
botones que validan.
El color Azul:

Todas las cualidades de este color son positivas: tranquilidad, paz, sosiego… Es el mar
y el cielo, es infinito que da fe. No levanta pasiones pero tampoco produce odio. Es un
valor seguro en el diseño, pues no despierta cualidades negativas. Aunque, todo no podía
ser positivo, es un mal color para llamar la atención pues puede pasar desapercibido.
El color Violeta:

No es un color aptos para todos, pero que cuando lo asimilas, comienza a ser parte de ti ;).
Une las cualidades opuestas por lo que es un color singular y unido al poder y al lujo.
Arriesgado, pero a veces necesario para ganar 🙂
El color Rosa:

Es un color, que aunque pasa desapercibido para gran parte de la población, no podemos
decir nada malo de él. Incluye una gama tan amplia de colores, que podemos combinarlo
entre sí, incluyendo una gran variedad. es el color de lo dulce y lo infantil, de todo lo que
despierta buenos sentimientos.
El color Marrón:

Aunque es un color muy poco apreciado por la población, representa una de las
sensaciones que más nos gusta por naturaleza: la calidez del hogar. En el diseño es
sobre todo usado para marcas alimentarias relacionadas con ese color, como las que venden
cacao o café.
Espero que os haya servido este repaso, os recuerdo que el lunes seguimos con las armonías
y combinaciones de colores, veremos la mejor manera de combinarlos! Hasta la semana
que viene!
Combinaciones de Colores con ayuda del
Círculo Cromático

Ya que la semana hicimos un buen repaso de los colores, con una guía rápida, en la que
mostrábamos las principales cualidades de cada uno de ellos, ha llegado el momento de dar
un paso más y sumergirnos en la armonías de color o lo que es lo mismo, la combinación
de colores.

Seguro que a muchos no os pilla por sorpresa, ya hemos hablado en numerosas ocasiones
acerca de las gamas de colores y de las combinaciones que podemos hacer con ellas.
Dependiendo de lo que representen cada uno de los colores. Lo principal es elegir el color
desde el que queremos partir, y por supuesto tener clara la elección de ese color.

Como todos sabéis, el color rojo es el color de Silo Creativo, por lo que todos los ejemplos
vamos a hacerlo partiendo de este color.

Armonías de color

Como decimos, es fácil combinar colores a través de lo representan. Sabemos los

sentimientos que representan, no es lo mismo usar el rojo que el azul, y la combinación
entre ellos, es muy distinta que si usamos verde y amarillo… Si queremos hablar de
calidez, pero desde una nueva perfectiva, podemos combinar el naranja con el marrón, pero
si lo que buscamos es llamar la atención, nos vendrá mejor la combinación del naranja con
el violeta. Como hemos repetido en varias ocasiones, hay que conocer cada uno de los
colores para poder combinarlos entre sí (Venga, un último vistazo a la guía rápida antes
de comenzar! 😉 )

Pero hay determinadas ocasiones en las que a veces nos cuesta trabajo jugar con los
colores a través de lo que representan. No tenemos claro de si esa combinación de
colores es buena para lo que buscamos.

Por esto, hay una herramienta que hace la combinación de colores mucho mas fácil: el
circulo cromático. En el podemos ver representado cada uno de los colores por lo que
puede ser una guía útil para trazar las principales combinaciones entre ellos.

Podemos combinar los colores como deseemos, pero las armonías de colores nos
pueden ayudar a que esto sea más fácil. Cuando hablamos de armonías, recordemos que
son combinaciones generales de colores, a través de las cuales podemos ir jugando a su vez
con distintos colores.

Las principales armonías son:

 Monocromática
 Complementaria
 Tríadico
 Tetrádica
 Análoga

Dependiendo del efecto que queramos crear, nos tendremos que decantar por una de
ellas. No es lo mismo, si quiero crear contraste o si lo que busco es suavidad…Veamos
cada una de ellas!

NOTA: Recordemos que vamos a ver cada una de ellas partiendo del color rojo, pero que
todas las combinaciones son válidas para todos los colores del circulo cromático. En cada
una de las combinaciones tomaremos el color rojo y sus combinaciones puras y variaremos
el tono y la intensidad para obtener la gama de colores que más se adecue con lo que
buscamos.

Combinación Monocromática

Como su propio nombre indica, esta gama de color estará basada en un solo color. No
nos equivoquemos, no es para nada una gama aburrida. Tomamos un color, el que más
nos guste y a partir de ahí, podemos ir subiendo y bajando la saturación y obteniendo
tonalidades que partiendo de la primera, sean distintas entre sí.

Además de ser muy fáciles de hacer (recuerda siempre hacerlas partiendo de un color y no
tomando dos o tres similares) nos pueden resultar muy útiles para representar un estado de
ánimo concreto, o para un proyecto en el que destaque un solo color.
Lo único a tener en cuenta, es que no es una gama en la que exista el contraste, por lo
que si estas buscando contraste esta no es tu gama. De cualquier manera, una buena
opción, puede ser usar una gama monocromática e introducirle un color que haga
contraste, como veremos a continuación, un color de su armonía análoga.

Combinación Complementaria

Es la gama de colores perfecta si lo que buscas es contraste. Los colores

complementarios son los que en el círculo cromático se sitúan en lugares opuestos. Por
ejemplo el complementario del azul es el amarillo, el del verde el magenta y el del rojo el
cian. El uso de estas gamas de colores puede ser un buen elemento si estamos buscando
llamar la atención, no son buenos colores para pasar desapercibidos

Los colores complementarios son muy usados en publicidad, por el alto contraste que
producen que tienen como resultado una llamada a la acción.
Combinación de colores triádicos

Se construyen con tres familias de colores que estan espaciados uniformemente en el

circulo cromático (ver en el dibujo). Estas combinaciones mantienen el contraste de las
combinaciones de colores complementarios, a la vez que imprimen la armonía de la que
estos colores carecen.

Lo mejor en el uso de esta combinación es tomar un color dominante que se use en mayor
medida que los otros colores. Estos colores imprimen fuerza y contaste vibrante.
Combinación colores tetradas

Es conocido como esquema de color complementario doble porque utiliza 4 familias de

colores, dos pares de colores complementarios. Esto da lugar a combinaciones muy
vibrantes y con mucho contraste e intensidad.

Es una composición armónica, pero la única pega es que al poseer más variedad de
colores, su uso es también más complicado que el resto. De esta manera un buen hacer
puede ser tomando uno como predominante.
Combinación colores análogos

Este esquema de color usa tres o más familias que están colocadas unas al lado de
otras en el circulo cromático. Es un esquema de color que encontramos en la naturaleza lo
que lo hace cómodo y calmado.

Crea más contraste que el esquema monocromático, pero no tanto como la de colores
complementarios. Cuando se usa esta gama, lo mejor es tomar un colore predominante, un
color de apoyo de la gama del primero y un tercer color para complementarlo y crear
contraste.
Con estas directrices no habrá gama de color que se te resista! Recuerda que lo
importante es experimentar y sobre todo saber de dónde queremos partir y que es lo que
con nuestros colores queremos conseguir.

Una vez tengamos los colores desde los que queremos comenzar, los colores puros,
podemos ir cambiándoles contraste, intensidad… hasta llegar al tono de color que más se
adecue a lo que estamos buscando.

Si tenemos claro que queremos hacer una triada de colores análogos y que estos serán,
verde, amarillo verdoso y azul, sabemos que hay muchas combinaciones posibles con estos
tonos, y que no es lo mismo azul porcelana que azul cobalto, ni verde esmeralda y verde
botella.

Por lo que con la elección de una triada se nos abre una abanico de posibilidades. Y ahí
es donde debemos escoger el que mejor se adecua a nuestro proyecto!
Ejemplos de buen/mal uso de los colores en
la web

Como ya hemos hablado en otros artículos del blog, los colores tienen una importancia
fundamental y extrema en el desarrollo de cualquier proyecto ( y de la vida) y por lo tanto
también en la creación de una web. Ya que sabemos que representa cada uno de los colores
principales, que es lo que significan y cuáles son las sensaciones y sentimientos a las que
hacen referencia, por lo que ahora, debemos saber cómo usarlos a la hora del diseño web.

Es cierto, que no siempre es el diseñador el encargado de la elección de los colores, puesto

que ya pueden venir determinados por el cliente, bien sea, por el gusto del mismo, o por la
existencia de un logo o similar. Nosotros, y aunque parece obvio siempre recomendamos,
que si ya tenemos un logo en el que basarnos, la web siempre vaya en consonancia con el
mismo. Si entre ellos difieren, al final habremos perdido la imagen de marca que tan
importante es a la hora de hablar de una empresa.

De esta manera veremos algunas web, para analizar si su imagen de marca se

corresponde con los colores establecidos por las mismas, usando aquello de lo que
hemos hablado en los artículos anteriores del color.

Hay empresas en todos los campos imaginables que han invertido muchos años y un
montón de dinero para crear una imagen específica para el reconocimiento de marca con los
clientes. En estos casos, sus sitios web corporativos, obviamente, deben beneficiarse de
esta identidad. Muchas de estas empresas hacen un trabajo en modernizar su marca sin
perder la identidad y la imagen que tantos años les ha costado conseguir y otras que por el
contrario, aunque poseen una gran fuerza en su imagen corporativa no la usan todo lo que
podrían.

Los sitios web de ejemplo, pertenecen a empresas que han construido su marca con colores
específicos. Son tan representativas, que cuando cualquiera de nosotros pensamos en esas
marcas, las asociamos rápidamente con un color específico, y posiblemente con un logotipo
que contiene esos colores. Aunque no seamos conscientes, la percepción de esas marcas va
unida muy de cerca a los colores que representan. Esto es por todo lo que hemos hablado en
cada uno de los artículos de los colores. Cada uno de los colores transmiten intrínsecamente
unos sentimientos y sensaciones, que de esta manera, nosotros extrapolamos a cada una de
las marcas que vemos. Por ejemplo, al igual que cuando vemos a alguien vestido de negro,
podemos pensar que esa persona está de luto, cuando vemos una marca en tonalidades
oscuras o negras, la asimilamos con la exclusividad o con el lujo.

Algunas veces, cuando la empresa ha hecho un branding muy efectivo y a lo largo de

mucho tiempo, incluso podemos hacerlo al revés, asemejar el color a la marca. Por ejemplo,
cuando vemos algo amarillo, podemos decir: “es el color de correos”.

De cualquier manera, lo que sí es seguro, es que el mejor branding de marca, es aquel que
se asemeja tanto en la imagen online como en la offline de la misma.

A continuación, veremos algunos ejemplos de marcas muy conocidas para ver como se han
adaptado al mundo 2.0. No todas lo han hecho de la misma manera, pero no podemos
olvidar que al ser grandes empresas parten del conocimiento mundial de las mismas, lo que
en algunos casos, ha llevado a perder su imagen corporativa y representativa en su espacio
web.

Burguer King vs McDonald

Son dos empresas de comida conocidas mundialmente. Su producto es muy similar, por lo
que además, en los espacios publicitarios, tienden a vendernos además de su producto una
experiencia. Sin embargo si analizamos sus sitios web encontramos grandes diferencias
entre ambas.
Lo primero que podemos observar es que, mientras la imagen de marca es totalmente
reconocible en el caso de BK (Burguer King), con la introducción de sus colores
corporativos en cada uno de los objetos de la página principal, McD (Mc Donald), ha
perdido sus colores corporativos y estos casi han sido suplantados por el color negro. Es
cierto que en el en menú podemos encontrar el color rojo, pero quizá identificaríamos
mejor la marca si apareciera algo en todos dorados o amarillos, puesto que junto con el
rojo, es el color que lo representa.

En un primer vistazo, casi no podemos reconocer que sea la página web de McD, lo único
que nos acerca a esta marca es la introducción del logotipo, pero después ni las imágenes ni
las tipografías son representativas de la misma. Además, hace poco introdujeron el color
verde en la publicidad, acompañándolo del logotipo, color que no aparece en ninguna parte
de la web.

En el caso de BK, la web es más representativa de la imagen de marca. Con la introducción

del color en la tipografías, en el menú, y las imágenes van más acorde con el producto que
venden.

Ciertamente estas marcas, encontramos el hecho de que casi asemejamos el color a su

marca y no al contrario, pues su trabajo de marca y branding lo realizaron hace mucho
tiempo, pero en el caso de una web, para una pequeña empresa, puede ser determinante
para el futuro de la misma.

Coca cola vs Pepsi

En este caso, y aunque sus páginas web son más o menos correctas en ambos casos, existe
una diferencia fundamental. En la página web de CC (Cocacola) no encontramos el
logotipo de la misma. La experiencia del usuario con el color rojo, hace que casi
inmediatamente identifiquemos que estamos ante la página web de CC, pero lo único que
nos da ese dato es el color rojo y el icono de un “botellín”. Repetimos como en el caso
anterior; la experiencia del usuario hace posible, que no sea necesario introducir siquiera el
logotipo de la misma, para que sepamos claramente ante la web en la que nos encontramos.
Pero esto es gracias a una campaña de publicidad y branding acaecida en años anteriores,
sino no habría manera de identificarla con la marca CC. Hemos llegado al mundo del que
hablamos con anterioridad, cuando pensamos en el color rojo, somos incapaces no pensar
en la marca CC.

En el caso de P (Pepsi) la página Web es mucho más representativa de la marca. La

introducción de los colores corporativos y del logotipo en varios espacios de la web, nos
hacen imposible olvidar la marca que estamos visitando.

En cada uno de los casos anteriores comprobamos la importancia del color y de la imagen
de marca. En el caso de CC y McD, el branding efectuado a lo largo de los años, han hecho
posible que solo con pequeñas pinceladas de color, seamos capaces de identificar la web,
mientras que en el caso de BK y P, han optado por la opción de llevar su imagen física
también a su espacio 2.0.