Teoria da Cor para WebDesigners

O significado da cor

Rita Paulino
rcpauli@gmail.com

 Cor no design muito subjetivo.

O que evoca uma reao em uma pessoa pode evocar uma reao muito
diferente em outra.
s vezes isso devido preferncia pessoal, e outras vezes devido ao
contexto cultural.
Teoria das cores uma cincia em si.
Estudar como as cores afetam diferentes pessoas, individualmente ou
em grupo.

Algo to simples como mudar a tonalidade exata ou saturao de uma

cor pode evocar um sentimento completamente diferente.

As diferenas culturais significam que algo que est feliz e edificante em

um pas pode ser deprimente em outro.

Teoria de cores bsicas

Teoria da cor abrange uma infinidade de

definies, conceitos e aplicaes de design - o

suficiente para encher vrias enciclopdias. No
entanto, existem trs categorias bsicas de teoria da
cor que so lgicas e til: o crculo das cores, harmnia
de cores, e no contexto de como as cores so usadas.

Teorias da Cor criam estrutura lgica para a

cor. Por exemplo, se temos uma variedade de frutas e

vegetais, podemos organiz-los por cor e coloc-los em
um crculo que mostra as cores em relao ao outro.

Um crculo de cor, com base em vermelho, amarelo e azul, tradicional no campo da

arte. Sir Isaac Newton desenvolveu o primeiro diagrama circular de cores em 1666.
Desde ento, cientistas e artistas tm estudado e projetado inmeras variaes deste
conceito. As diferenas de opinio sobre a validade de um formato sobre o outro
continuar a provocar o debate. Na realidade, qualquer crculo cor ou roda de cores,
que apresenta uma seqncia logicamente organizadas de tons puros tem mrito.

H tambm definies (ou categorias) de

cores com base na roda de cores.
Cores primrias: vermelho, amarelo e azul
Em teoria tradicional cor (utilizado em tintas e pigmentos), cores
primrias so as trs cores de pigmentos que no pode ser misturado
ou formados por qualquer combinao de outras cores. Todas as
outras cores so obtidas a partir destas trs cores.

 Secundrias Cores: Verde, laranja e roxo

Estas so as cores formadas pela mistura de cores primrias.
Tercirias Cores: Amarelo-laranja, vermelho-laranja, vermelhoprpura, azul-violeta, azul-verde e amarelo-verde
Estas so as cores formadas pela mistura de um primrio e uma cor
secundria. por isso que a tonalidade um nome de duas
palavras, como o azul-verde, vermelho-violeta, e amarelo-laranja.

Harmonia
Harmonia pode ser definido como um arranjo agradvel de peas, seja na
msica, poesia, cor, ou at mesmo um sorvete.
Em experincias visuais, a harmonia algo que agradvel aos olhos. Ele
envolve o espectador e cria uma sensao interna de ordem, um equilbrio
na experincia visual. Quando algo no harmoniosa, ou chato ou
catico. Em um extremo uma experincia visual que to branda que o
espectador no est envolvida.
1. Um esquema de cores com base em cores anlogas

2. Um esquema de cores com base em cores complementares

O crebro humano rejeitar sob estimulante informaes. No outro

extremo, uma experincia visual que to exagerado , to catica que o
espectador no pode estar a olhar para ele. O crebro humano rejeita o
que no pode organizar, o que no consigo entender. A tarefa visual exige
que ns apresentamos uma estrutura lgica . Harmonia de cores
proporciona um visual interessante e um senso de ordem.
Em resumo , a unidade extrema leva a sub- estimulao , a extrema
complexidade leva a estimulao excessiva . Harmony um equilbrio
dinmico.

 A natureza fornece um ponto de partida perfeito para a harmonia

de cores . Na ilustrao acima , amarelo vermelho e verde criaam
um design harmonioso, independentemente de essa combinao se
encaixa em uma frmula tcnica para cores harmony.
Complementar so duas cores que esto em frente um do outro ,
como vermelho e verde e vermelho-prpura e verde-amarelo. Na
ilustrao acima , existem diversas variaes de verde-amarelo nas
folhas e diversas variaes de vermelho-prpura na orqudea. Essas
cores opostas criar o mximo de contraste e estabilidade mxima

 Como a cor se comporta em relao a outras

cores e formas uma rea complexa da teoria
da cor . Compare os efeitos de contraste de
diferentes origens de cor para o mesmo
quadrado vermelho.

http://www.skittles.com/

O lado cultural das cores...

Povo russo pode ter uma associao negativa
com a cor vermelha, como um smbolo do
comunismo; branco retrata a pureza na
cultura ocidental, mas um smbolo da morte
em algumas culturas orientais; amarelo
significa tristeza na Grcia, o cime na Frana
mas sagrado para os chineses.

Cores Quentes
As cores quentes incluem o vermelho, laranja e amarelo, e as variaes destes
trs cores.
Estas so as cores do fogo, das folhas de outono, e do pr do sol e geralmente
so energizantes, apaixonado, e estilo positivo.

Vermelho e amarelo so as cores primrias, com a laranja

caindo no meio, o que significa que as cores quentes so realmente quentes e

no so criados pela combinao de uma cor quente com uma cor fria.
Use cores quentes em seus projetos de modo a refletir a paixo, alegria,
entusiasmo e energia.

O vermelho uma cor muito quente.

associada ao fogo, violncia e guerra. Tambm associada ao amor e paixo.

Na histria, ele j foi associado tanto com o Diabo e Cupido.

Vermelho pode realmente ter um efeito fsico sobre as pessoas, elevando a presso
sangnea e respirao. Tem sido mostrado para aumentar o metabolismo humano,
tambm.
O vermelho pode ser associado com raiva, mas tambm est associado com a
importncia (pense no tapete vermelho em premiao shows e eventos de
celebridades).O vermelho tambm indica perigo (as luzes razo parar e sinais so
vermelhos, e que a maioria dos rtulos de advertncia so vermelhas).

McDonalds amplamente reconhecido pelas cores vermelho e amarelo em seu logotipo. O site
tambm mantm essas cores, a cor predominante no design do site MC vermelho, uma cor que
sugere emoo e comumente usado na indstria de fast food, pois faz as pessoas comem mais
rpido. Para constrastar, encontramos tambm no esquema de cores um pouco de preto, cinza
claro e branco.

http://www.coca-cola.com/en/index.htm

Fora do mundo ocidental, o vermelho tem associaes

diferentes. Por exemplo, na China, o vermelho a cor da
prosperidade e da felicidade.
Tambm pode ser usado para atrair boa sorte. Em outras culturas
orientais, o vermelho usado por noivas no dia de seu
casamento.
Na frica do Sul, no entanto, o vermelho a cor do luto. O
vermelho associado tambm com o comunismo. Vermelho
tornou-se a cor associada a conscientizao sobre a Aids na
frica devido popularidade da campanha [RED].
uma cor tima para usar quando o poder ou a paixo quer ser
retratada no desenho. O vermelho pode ser muito verstil,
embora, com as verses mais brilhante a ser mais enrgico e
tons mais escuros de ser mais poderoso e elegante.

Os tons escuros de vermelho neste projeto do ao site uma sensao de

elegncia.

Os destaques em vermelho destacam-se contra o fundo escuro e preto, e do

um sentimento de poder e high-end para o site.

Os destaques muito brilhante em vermelho neste site d uma sensao de

energia e movimento.

O vermelha escuro sobre este site, combinado com elementos do estilo

grunge, mais parece a cor do sangue.

Vermelho escuro, quando combinado com branco e cinza, d uma impresso

muito elegante e profissional.

A laranja uma cor muito vibrante e energtico.

Em suas formas suaves, que podem ser associados com a terra e com o
outono. Devido sua associao com a mudana das estaes, a cor laranja
pode representar a mudana e o movimento em geral.
Porque a cor laranja associada com a fruta de mesmo nome, pode ser
associado com a sade e vitalidade. Nos projetos, laranja chama a ateno
sem ser to avassalador quanto o vermelho. frequentemente considerado
mais simptico e acolhedor.

O esquema de cores no site da Laranja inclui laranja (obviamente), cinza e branco. A presena
de laranja no logotipo da empresa tambm est presente em alguns elementos da pgina,
dando-lhe uma sensao criativo e energia, enquanto o cinza d uma nota mais sria e
profissional.

O retangulo laranja brilhante chama a ateno para seu contedo, mesmo com os
outros elementos vermelhos brilhantes na pgina.

Laranja usado aqui em sua simbologia mais bvia, para representar o fogo.

O laranja escuro, quando comparado com a verde-limo, quase age como uma
cor neutra.

A laranja usada aqui para dar uma impresso simptica e

convidativa.

A cor laranja em destaque acrescenta aqui uma srie de interesse visual e

chama a ateno para o apelo ao.

 Rosa geralmente associada com ternura,

romance, amor, juventude, inocncia,
suavidade e conhecido por ter um efeito
calmante. Os efeitos desta cor pode variar de
acordo com a intensidade da cor (forte, leve,
profunda, etc)

Amarelo muitas vezes considerado o mais brilhante e energizante das cores quentes.
Associado a felicidade e ao sol. Amarelo tambm pode estar associada com o engano
e covardia. O amarelo associado tambm com esperana, como pode ser visto em
alguns pases, quando fitas amarelas so indicadas por famlias que tm entes queridos
na guerra.
O amarelo associado tambm com o perigo, embora no to forte como vermelho.
Em alguns pases, o amarelo tem conotaes muito diferentes. No Egito, por exemplo,
o amarelo est de luto. No Japo, o que representa coragem, e na ndia uma cor
para os comerciantes.

Em seus projetos, o amarelo brilhante pode dar uma sensao de felicidade e

alegria.
Amarelos so comumente usados como cor de gnero neutro para bebs (ao
invs de azul ou rosa) e crianas jovens.
Luz amarela tambm do uma sensao de felicidade mais calmo do que
amarelos brilhantes.
Amarelo escuro e amarelo-ouro em tons s vezes pode parecer antigo e ser
usados em projetos onde um sentido de permanncia desejado.

O cabealho amarelo brilhante e grficos utilizados neste site d uma

sensao de energia e positividade.

O amarelo usado quase como um elemento neutro no cabealho aqui,

e combinado com ilustraes desenhadas d uma sensao muito
alegre.

Os destaques amarelos chamam a ateno para as partes mais importantes

deste site.

O girassol amarelo recorda aos visitantes o vero neste site, e combinado

com o fundo antigo amarelo, d um sentimento acolhedor.

As cores frias incluem verde, azul e roxo, muitas vezes so mais moderadas do
que as cores quentes. So as cores da noite, da

gua, da natureza, e
geralmente so calmante, relaxante e um pouco reservado.
Azul a nica cor primria dentro do espectro legal, o que significa que as
outras cores so criadas atravs da combinao de azul com cores quentes
(amarelo para o verde e vermelho para o roxo).

Verdes assumiu alguns dos atributos de amarelo, roxo e assume alguns dos
atributos de cor vermelha. Use cores frias em seus projetos para dar uma
sensao de calma e profissionalismo.

O verde uma cor que representa a terra.

Pode representar um novo comeo e crescimento. Isso tambm significa
renovao e abundncia. Alternativamente, o verde tambm pode

representar a inveja ou cime e uma falta de experincia.

Verde tem muitos dos mesmos atributos que o azul calmante, mas tambm
incorpora um pouco da energia do amarelo. No projeto, o verde pode ter um
efeito de equilbrio e harmonizao, e muito estvel. apropriado para
projetos relacionados riqueza, a estabilidade, a renovao e a

natureza. Verdes brilhantes so mais enrgico e vibrante,

enquanto os verdes oliva so mais representativos do mundo natural. Verdes
escuros so as mais estveis e representante da riqueza.

Este um site destinado a adultos, o esquema de cores inclui preto - uma cor forte, mas
elegante, verde - usado para alvio do estresse, sugerindo tambm a natureza, frescor e amor
pela vida e branco, para criar um contraste bonito com as cores escuras.

Verde mais frequentemente associada com a natureza, vida, sade, harmonia,

tranquilidade, boa sorte, dinheiro, o otimismo, a durabilidade, o frescor. tambm um
smbolo de fertilidade cime, e isso tem um efeito calmante e alivia o estresse.

O esquema de cores no site da Nike inclui verde, branco e laranja. Verde uma cor excelente,
altamente associado com a sade natureza, (incluindo esportes) e vida. Laranja uma cor
associada com a energia, diverso, entusiasmo - tudo em um timo relacionamento com o
esporte e, implicitamente, os produtos do site est apresentando.

Os verdes extremamente suaves deste site dar-lhe uma sensao muito cor de
terra e natural.

O verde mais verde-oliva em tons deste site d-lhe um sentimento natural, que
muito apropriado para o contedo.

O mais brilhante, mais verdes com aspecto retr deste site dar-lhe uma
sensao muito frescao energizado.

Outro site verde-oliva com um sentimento muito natural.

Azul tambm amplamente utilizado para representar a

calma e

responsabilidade. blues Light pode ser refrescante e agradvel. azuis escuros so

mais fortes e confiveis.

paz

O azul tambm associado com a

, e tem uma conotao espiritual e religiosa em
muitas culturas e tradies (por exemplo, a Virgem Maria descrito geralmente trajando
vestes azuis).
Light blues so freqentemente relaxada e calma. Azuis brilhantes podem ser
energizante e refrescante. Azuis escuros so excelentes para sites corporativos ou
projetos onde a fora e a confiana so muito importantes.

http://www.pepsi.com/
O site da Pepsi esmagadoramente azul. O logotipo da Pepsi contm as cores vermelho,
branco e azul, que podemos encontrar no cabealho, a barra lateral e os outros elementos do
site. O pano de fundo do site outra variao de cor azul, com bolhas que vm de baixo,
fazendo com que parea gua com gs. A marca est tentando se posicionar como uma bebida
refrescante, tentando associar isso com as cores usadas no design do site. Alm disso, o azul
a cor declarao, conhecida mundialmente e associado com a Pepsi, por isso parece natural
que esta seria a cor principal do site

O site da IBM tem um esquema de cores muito profissional, que inclui cores como azul, cinza e
branco. As cores frescas dar o site um aspecto um negcio srio, criando uma impresso de
seriedade e profissionalismo.

O cu azul brilhante deste site d uma sensao de jovens, que enfatizada pela
destaques avermelhadas.

A luz azul, deste site d uma impresso muito relaxado e calmo.

Purple (roxo) foi muito associado com a realeza.

uma combinao de vermelho e azul, e leva em alguns atributos de ambos.
associada criatividade e imaginao tambm.
Na Tailndia, o roxo a cor do luto pelas vivas. Roxos escuros so
tradicionalmente associadas com a riqueza e de royalties, enquanto roxos mais
leves (como lavanda) so considerados mais romnticos.
No projeto, roxos escuros podem dar uma sensao de riqueza e luxo. Roxos
claros so mais suaves e esto associados com a primavera e ao romance.

A roxo escuro usado aqui evoca a herana real de prpura, que muito
apropriado para a marca Asprey bens de luxo.

A luz e roxos claro aqui funcionam bem para transmitir um senso de criatividade.

O mais brilhante, mais roxo avermelhado deste site d-lhe tanto olhar rico e
energtico.

O fundo roxo escuro aqui aumenta a sensao criativa do site global.

Os destaques roxo escuro sobre este site d uma sensao de luxo e requinte.

Black o mais forte das cores neutras.

No lado positivo, ele comumente associado a poder, elegncia e formalidade.
Do lado negativo, pode estar associada com o mal, da morte e mistrio.
O preto a cor tradicional do luto em muitos pases ocidentais.Tambm associada
com a rebelio em algumas culturas, e est associado com o Halloween e o oculto.
Black comumente usada em projetos mais ousado, bem como em projetos muito
elegante. Ele pode ser conservador ou moderno, tradicional ou no-convencionais,
dependendo das cores que combinado. No projeto, o preto comumente usado
para a tipografia e outras peas funcionais, porque ele de neutralidade. Preto pode
torn-lo mais fcil de transmitir uma sensao de sofisticao e mistrio em um
projeto.

Os detalhes em preto, misturado com as cores mais brilhantes e muito

escuro fundo marrom adicionam um visual mais ntido para a concepo
global.

Preto, quando misturado com tristeza, parece mais fria.

O preto aqui, misturado com cinza escuro e verde limo, e um tema global,
aumenta o nervosismo do projeto.

Os detalhes em preto aqui adicionar uma camada extra de sofisticao e

modernidade ao local.

Branco no extremo oposto do espectro de preto, mas como o preto, ele pode
trabalhar bem com praticamente qualquer outra cor.
Branco muitas vezes associada pureza, limpeza e virtude. No Ocidente, o branco
comumente usado por noivas no dia do casamento. Tambm associada com a
indstria de cuidados de sade, principalmente mdicos, enfermeiros e dentistas.
O branco associado com a bondade, e os anjos so descritos freqentemente em
branco.
No projeto, o branco considerado geralmente um fundo neutro que permite que
outras cores em um projeto de ter mais destaque. Pode ajudar a transmitir a limpeza e
simplicidade, porm, e popular em design minimalista. Branco em projetos tambm
podem retratar frieza ou temperatura quente, dependendo do design motivos outras
cores que o cercam.

Fundos brancos so muito populares em sites de minimalista, e fornecer grande

contraste com tipografia preta.

White combinado com o cinza d uma sensao suave e limpa para este projeto.

Novamente, branco usado como um fundo ilumina todo o projeto

O cinza uma cor neutra, geralmente considerado na extremidade fria do espectro de

cores.
s vezes, pode ser considerada mal-humorado ou depressivo. Cinzas leves pode ser
usado no lugar do branco, em alguns modelos, e cinza escuro pode ser usado no lugar
do preto.
Gray geralmente conservadora e formal, mas tambm pode ser moderno. s vezes,
considerado uma cor de luto. comumente utilizada em projetos corporativos, onde a
formalidade e profissionalismo so fundamentais. Pode ser uma cor muito sofisticado.
Cinzas puras so tons de preto, embora cinzas podem ter tons de azul ou marrom
misturado no projeto, os fundos de cinza so muito comuns, como a tipografia cinza.

O site da Apple tem design clean. Observe o fundo todo branco, sugerindo simplicidade e
novidade e o cabealho cinza brilhante que nos faz associar o site com algo elegante, mas ao
mesmo tempo srio. A combinao de cinza, branco e preto aqui feito de uma forma
eficiente.

O backround cinza escuro e cinza da tipografia mais leve proporcionam um olhar

decididamente moderno para este projeto.

O amplo espectro de tons de cinza utilizada neste projeto se combinam para dar
uma aparncia sofisticada e profissional para o site.

Brown est associado com a terra, madeira e pedra.

uma cor totalmente natural e um neutro quente. Brown pode ser associada
com segurana e confiabilidade, com firmeza. Ele tambm pode ser considerado
maante.
No projeto, o marrom comumente usada como uma cor de fundo. Tambm
visto em texturas de madeira e, s vezes, com uma textura de pedra. Ela ajuda a
trazer uma sensao de calor e salubridade aos desenhos. s vezes, utilizado
em sua forma mais escura como um substituto para o preto, ou em fundos ou
tipografia.

O alaranjado-marrom aqui d uma sensao muito terreno e confivel.

O marrom escuro usado no letter d um olhar de terra e firmes para o layout

geral, e deixa as cores no projeto com destaque.

Woodgrain um uso popular de marrom, e neste caso, o marrom quente acrescenta

alguma simpatia para um site de outra forma minimalista.

O fundo cinzento-marrom aqui d uma sensao de estabilidade e baixo

a qualidade terra.

Bege algo nico no espectro de cores, como pode assumir tons frios ou
quentes, dependendo das cores que a rodeiam.
Ele tem o calor do marrom e o frescor do branco e, como marrom, s vezes
visto como maante. uma cor conservador na maioria dos casos, e
geralmente reservado para os fundos. Ela tambm pode simbolizar a piedade.
Bege em design usado geralmente em fundos, e comumente visto em
pano de fundo com uma textura de papel. Ele vai assumir as caractersticas de
cores ao seu redor, o que significa que tem pouco efeito em si, na impresso
final de um projeto d quando usado com outras cores.

O pano de fundo castanho claro aqui se sente jovem e fresco por causa
das cores brilhantes em torno dele.

O pano de fundo castanho claro aqui d uma sensao mais conservadora e

elegante para a concepo global.

O fundo castanho amarelado se torna ainda mais quentes, o laranja e o marrom

acentuam a tonalidade bege.

Popularmente usado como uma textura saco de papel, e em sua forma mais
acinzentada, como concreto ou a textura de pedra.

O pano de fundo do cabealho bege e outros acentos no site emprestar um

sentimento refinado e tradicional para a concepo global.

Creme e marfim
Marfim e creme so cores sofisticadas, com um pouco do calor de marrom e um
monte de frescor do branco.
Eles so geralmente calmo, e muitas vezes pode evocar um sentido da histria.
Marfim uma cor calma, com alguns dos associados com a pureza branca, embora
seja um pouco mais quente.
No projeto, marfim pode dar uma sensao de elegncia e calma para um
site. Quando combinados com as cores terrosas, como pssego ou marrom, que
pode assumir uma qualidade de terra. Tambm pode ser usado para clarear cores
mais escuras, sem o contraste de usar branco.

O fundo marfim aqui tem uma qualidade que quente temperado por
algumas das cores mais frias no local.

O pano de fundo creme-acinzentada aqui quente feito pelos destaques

alaranjado-marrom.

O pano de fundo creme acrescenta uma sensao de elegncia deste site.

O pano de fundo creme aqui refora o tema antigo que percorre os grficos do
desenho.

O marfim combinado com outras cores claras e tons creme torna este site em
uma aparncia muito elegante em geral.

A teoria da cor to grande quanto o sentimento que evoca no uso

de determinado tom. Abaixo um guia de referncia rpida para os
significados comuns das cores discutidos nestes slides.
Vermelho: , amor, paixo, raiva
Laranja: , Alegria de Energia, Vitalidade
Amarelo: , Esperana Felicidade, Engano
Verde: Novos Comeos, Abundncia, Natureza
Azul: Calma, Tristeza, Responsvel
Roxo: , Banco de Criatividade, riqueza
Preto: Mistrio, Elegncia, Evil
Cinza: Moody, conservador, Formalidade
Branco: , pureza, limpeza Virtude
Brown: , salubridade Natureza, Confiabilidade
ou bege Tan: Conservador, Piedade, Dull
Creme ou do Marfim: Calm, Pureza, elegante
http://www.pixel77.com/color-psychology-web-design-color-schemes-big-websites/
http://abduzeedo.com/psychological-study-web-designs