Harmonia Cromática: uma
metodologia para aplicação de
cores em projetos web
Profa. Valéria Lara
Introdução
É simples colocar a cor em projetos?
Porque? - Complexidade
Teoria da Cor
pedagogia
filosofia
psicanálise
linguística
neuro
oftalmologia
oftalmologia
neurologia
psicologia
C
O
R
sociologia
antropologia
propaganda
design
artesplásticas
ciências
cognitivas
física
química
biologia
cinema
arquitetura
comunicação
fotografia
Análise intuitiva
E se fossemos colocar / trocar a cor?
Introdução
A cor não comunica sozinha, mas “reforça” ou
“destrói” a comunicação

Reforço da comunicação – principalmente no
caráter simbólico (percepção):
 Parte individual - intuição
 Parte coletiva – cultura

A aplicação da cor em projetos deve ser feita
considerando todos os lados da percepção.
Teorias da Percepção
Explicação tradicional da visão:


Perceber coisas depende primeiramente de
se ter SENSAÇÕES
As SENSAÇÕES são resultados de
sintetizações FISIOLÓGICAS a partir dos
ESTÍMULOS.
Teorias da Percepção
ESTÍMULOS

CINCO (?) SENTIDOS (visão, audição, tato,
olfato, paladar ...)
 Luz, texturas, contrastes;
 Ruídos;
 Chuva, sol;
 Perfumes, gazes;
 Gostos.
Teorias da Percepção
SENSAÇÕES
 Cores
 Sons
 Sensações táteis
 Odores
 Gostos.
Teorias da Percepção
PERCEPÇÃO
 Objetos;
 Espaço;
 Significados;
 Cultura.
Teorias da Percepção
ESTÍMULOS
SENSAÇÃO
E
S
5 sentidos
canais possíveis
Fisiologia
PERCEPÇÃO
P
Aspectos
sócio-culturais
A ação da luz dentro dos olhos pode dar-nos
“cores”, mas não “objetos coloridos”, com
significado histórico individual e coletivo ao
mesmo tempo.
Metodologia para aplicação de cores
em projetos web
Para aplicar a cor em projetos, devemos
considerar as três fases da percepção
ao mesmo tempo
ESTÍMULOS
SENSAÇÃO
E
S
5 sentidos
canais possíveis
Fisiologia
PERCEPÇÃO
P
Aspectos
sócio-culturais
Metodologia para aplicação de cores
em projetos web
Proposta:
ESTÍMULO
SENSAÇÃO
PERCEPÇÃO
Aspectos físicos
da cor
Aspectos
fisiológicos da
cor
Teorias da
percepção
Esquemas de
combinações
de cores
Teoria
tricromática da
visão cromática
Significado das
cores no
Ocidente
Cores de
contraste
Relações entre
a cor e a forma
Cor e texto
Aspectos físicos da teoria da cor

cores-pigmento transparentes
Secundárias
Cores-pigmento
transparentes
Primárias
Terciárias
13
Aspectos físicos da teoria da cor

cores-luz
Secundárias
Cores-luz
Primárias
Terciárias
14
Esquemas de combinação de cores
Círculo cromático Cores-Pigmento Transparentes
Ciano
Ciano-Violetado
Ciano-esverdeado
Azul-Violetado
Verde
Magenta-Violetado
Verde-amarelado
Magenta
Amarelo
Vermelho-amagentado
Laranja
Vermelho
Esquemas de combinações de cores
Círculo Cromático
Ci/Vl
Ci
Ci/Vd
B
G
Vd/Am
Mg/Vl
Mg
Amarelo
Vm/Mg
R
Lj
Esquemas de combinações de cores
Esquemas básicos: formados a partir de uma
cor do círculo e cores “fora” do círculo




Acromático
Neutro
Monocromático
Cinzas coloridos
Esquemas de combinações de cores
Esquemas básicos: formados a partir de uma
cor do círculo e cores “fora” do círculo

Acromático: Paleta formada a partir do intervalo
do branco ao preto, incluindo os tons puros (o
branco e o preto)
Esquemas de combinações de cores
Esquemas básicos:

Neutro:
 Paleta formada pela escolha de um tom do círculo e o
intervalo entre este tom e a sua mistura com o castanho
médio
Esquema básico neutro 1 - exemplo
Esquemas de combinações de cores
Esquemas básicos:

Neutro:
 Paleta formada com um tom do círculo “fixo” e a sua
composição com três tons de castanho
Esquemas de combinações de cores
Esquemas básicos:

Monocromático:Paleta formada com apenas um
dos tons do círculo, respeitando o seu índice de
luminosidade (observados na tabela de tons e
valores);
Esquemas de combinações de cores
Esquemas básicos:

Monocromático: TABELA DE TONS E VALORES (índice de
luminosidade aproximados)
100%
100%
90%
90%
80%
80%
70%
70%
60%
60%
50%
50%
40%
40%
30%
30%
20%
20%
10%
10%
0%
0%
Monocromático (Vm-Pr)
Esquemas de combinações de cores
Esquemas básicos:

Cinzas coloridos:Paleta formada com apenas um dos tons
do círculo, misturando-o com um cinza médio (50% preto, 50%
branco). Cria-se assim intervalos infinitos de cinzas coloridos
(pode-se usar as duas “pontas” da paleta, ou seja, o tom e o cinza
médio ao mesmo tempo).
Cinzas coloridos
Cinzas coloridos
Cinzas coloridos
Cinzas Coloridos
Esquemas de combinações de cores
Consonantes:Paletas formadas a partir de
tons vizinhos (cores análogas) no círculo
cromático. Condição: utilizar de dois a sete tons.
OU
OU
Ci
Mg
OU
Ci
Am
Mg
Ci
Am
Mg
Am
…
Consonante – B - Am
Consonante B- G/amarelado
Esquemas de combinações de cores
Dissonantes:Paletas formadas a partir de tons
localizados de forma contrária no círculo cromático.





Tons-rompidos
Complementares
Duplas complementares
Complementares divididas
Esquemas de choque
Esquemas de combinações de cores
Dissonantes:

Tons-rompidos: escolhe-se uma cor do círculo e procurase sua complementar. A paleta é formada então pelo
caminho desta cor escolhida em direção à sua
complementar, passando pelo centro do círculo, ou seja,
pelo “100% tom-rompido” ou o chamado “cinza-neutro”.
Condição: se mostramos a cor, não tocamos na sua
complementar.
OU
OU
Ci
Ci
Am
Mg
R
Mg
Am
R
…
Esquemas de combinações de cores
Dissonantes:

OU
OU
Ci
Ci
Tons-rompidos:
Am
Mg
R
Mg
Am
R
…
Esquemas de combinações de cores
OU
OU
Ci
Ci
Dissonantes:

B
B
Mg
Tons-rompidos:
Am
Mg
Am
…
Esquemas de combinações de cores
Dissonante, Tons-rompidos, Am-B
Esquemas de combinações de cores
Dissonantes:

Complementares:trabalha-se com apenas as duas cores
complementares, localizadas no próprio círculo.
OU
OU
Ci
OU
Ci
Ci
B
G
B
G
B
G
Mg
Am
Mg
Am
Mg
Am
R
R
R
…
Complementares B-Am
Complementares B-Am
Esquemas de combinações de cores
Dissonantes:

Duplas Complementares:reúne-se quatro cores escolhendo
uma delas no círculo, localizando sua oposta e, em seguida,
pula-se, no sentido horário, a cor seguinte à escolhida e usase a próxima e sua oposta.
OU
OU
Ci
OU
Ci
Ci
B
G
B
G
B
G
Mg
Am
Mg
Am
Mg
Am
R
R
R
…
Duplas complementares R-Ci / Mg-G
Esquemas de combinações de cores
Dissonantes:

Complementares divididas: a paleta é formada a partir de
uma combinação de três cores. Uma delas é escolhida e, em
seguida encontra-se as duas laterais à cor oposta.
OU
OU
Ci
Ci
B
G
B
G
Mg
Am
Mg
Am
R
R
…
Complementares divididas Lj-B-Ci
Esquemas de combinações de cores
Dissonantes:
Esquemas de Choque: a paleta é formada com uma cor
escolhida do círculo e o intervalo entre a sua complementar e
a primária que aumenta a luminosidade ou a outra primária
que diminui a luminosidade.

Ci
B
G
Mg
Am
R
OU
Ci
B
G
Mg
Am
R
Esquemas de choque Ci-R (para o am)
Esquemas de combinações de cores
Assonantes: paletas formadas a partir de
“triangulações” dentro do círculo .



Primárias
Secundárias
Terciárias
Esquemas de combinações de cores
Assonantes:

Primárias: a paleta é formada pelas cores primárias da tríade
escolhida em igual quantidade e/ou qualidade. No caso das
cores-pigmento transparentes, as primárias são: ciano,
magenta e amarelo.
Ci
B
G
Mg
Am
R
Esquemas de combinações de cores
Assonantes:

Secundárias: a paleta é formada pelas cores secundárias da
tríade escolhida em igual quantidade e/ou qualidade. No caso
das cores-pigmento transparentes, as secundárias são:
vermelho, verde e azul-violetado.
Ci
B
G
Mg
Am
R
Esquemas de combinações de cores
Assonantes:

Terciárias: a paleta é formada pelas cores terciárias da tríade
escolhida.
Ci
B
G
Mg
Am
R
Ci
B
G
Mg
Am
R
Assonante
Assonante
Assonante
Assonante
Assonante