harmonia cromática: uma metodologia para aplicação de cores em projetos web profa. valéria lara

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

design

psicanálise

sociologia

neurologia

neurooftalmologia

oftalmologia

cinema

psicologia

comunicação

fotografiafísica

químicaarquitetura

ciênciascognitivas

biologia

artesplásticas

pedagogia

propaganda

antropologia

linguística

filosofia

C

Teoria da Cor

OR

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

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.

ESTÍM ULO S SENSAÇ ÃO PERC EPÇ ÃO

E S P5 se ntid o sc a na is p o ssíve is

Fisio lo g ia Asp e c to ssó c io -c ultura is

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ÍM ULO S SENSAÇ ÃO PERC EPÇ ÃO

E S P5 se ntid o sc a na is p o ssíve is

Fisio lo g ia Asp e c to ssó c io -c ultura is

Metodologia para aplicação de cores em projetos web

Proposta:ESTÍMULO SENSAÇÃO PERCEPÇÃOAspectos 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

13

Aspectos físicos da teoria da cor

cores-pigmento transparentes

Primárias

Secundárias

Terciárias

Cores-pigmentotransparentes

14

Aspectos físicos da teoria da cor

cores-luz

Primárias

Secundárias

Terciárias

Cores-luz

Esquemas de combinação de cores

Círculo cromático Cores-Pigmento Transparentes

C ian o

Verd e

A m are loM agen ta

Ve rm e lh o

A zu l-Vio le tado

C iano -Vio le tado C iano -esverdeado

Verde -am are lad o

L a ran ja

M agen ta -Vio le tado

Verm e lh o -am agen tado

Esquemas de combinações de cores

Círculo CromáticoC i

C i/V l

B G

C i/V d

A m are lo

L j

M g

V m /M g

M g /V l V d /A m

R

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)

0% 0%

10% 10%

20% 20%

30% 30%

40% 40%

50% 50%

60% 60%

70% 70%

80% 80%

90% 90%

100% 100%

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.

 O U

C i C i C i

M g M g M gAm Am Am

O U O U

…

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

procura-se 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.

OUC i C i

M g M gAm

R R

Am

OU

…

Esquemas de combinações de cores

Dissonantes: Tons-rompidos:

OUC i C i

M g M gAm

R R

Am

OU

…

Esquemas de combinações de cores

Dissonantes: Tons-rompidos:

OU OUC i C i

B B

M g M gAm Am

…

Esquemas de combinações de coresDissonante, 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 OUC i C i C i

M g M g M gAm Am Am

R R R

B B BG G G

…

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 usa-se a próxima e sua oposta.

OU OU OUC i C i C i

M g M g M gAm Am Am

R R R

B B BG G G

…

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 OUC i C i

M g M gA m A m

R R

B BG G

…

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.

OUC i

M g Am

R

B G

C i

M g Am

R

B G

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. 

C i

M g Am

R

B G

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.

C i

M g Am

R

B G

Esquemas de combinações de cores

Assonantes: Terciárias: a paleta é formada pelas cores terciárias da

tríade escolhida.

C i

M g Am

R

B G

C i

M g Am

R

B G

Assonante

Assonante

Assonante

Assonante

Assonante