1

Cores

Prof. Roberto Cabral de Mello Borges

2006

2

Amarelo-Laranja AL

Amarelo

AM Amarelo-VerdeAV

VerdeVD

Azul-VerdeAV

AzulAZ

Azul-VioletaAV

Violeta

VTMagenta

MG

Vermelho

VM

Laranja LJ

Laranja-Vermelho

LV

CORES

3

Olho HumanoPercepção em Preto-e-branco

4

Cones e Bastonetes

5

Cones e Bastonetes• S - Short Wavelength

• M - Medium

• L - Long

6

Cones

7

Caminho da Visão

8

9

Espectro de Cores Visíveis

400 500 600 700

Luz Visível

Ultra

Violeta

Infra

Vermelho

Comprimento de Onda (milimicrons - mµ)

10

Sensibilidade das Cores

400 700440 500 570 590 610

11

Ponto de foco das 3 cores básicas

AzulVerde

Vermelho

AzulVerde

Vermelho

Retina

Azul (é focado na frente da retina)Vermelho (é focado atrás da retina)

Verde (é focado sobre a retina)

12

Sensibilidade do olho para cores

13

Campo de visão

30º

1

2 3

Área 1 - ConesÁrea 2 - Cones e BastonetesÁrea 3 - Bastonetes

14

Adaptação ao Claro e ao Escuro do Olho Humano

Minutos

Sensibilidade Relativa

0,11

10100

100010000

100000

1 11 21 31 41 51 61 71

Adaptação ao EscuroAdaptação ao Claro

Adaptação ao Escuro e ao Claro do Olho Humano

15

Formato da tela

TV 3 x 4(0,75)

Slide: 2 x 3 (0,67)

HDTV 3 x 5(0,6)

Ideal (Relação de Ouro)

3 x 4,854(0,618)

16

Contraste de Cores

17

Contraste de Cores

Cores da tela anterior convertidas para preto e branco

18

Contraste de Cores

• Qual dos vermelhos é mais brilhante?

19

Uso de cores• Cores: adicionam impacto, interesse e

informação a documentos e gráficos;• as cores nem sempre são mostradas da mesma

maneira como foram projetadas, diferindo de um dispositivo para outro;

• vários fatores envolvidos na geração das cores: iluminação, contraste, forças magnéticas, brilho, entre outros;

• a cor é parte importante na interface gráfica;• é a primeira coisa que os usuários observam no

aplicativo, mesmo antes de utilizá-lo.

20

WatermarkContraste 16%Contraste 87%

Brilho 23%Brilho 83%Normal

NormalContraste: 50%

Brilho: 50%

21

Uso de cores• A cor é um importante auxiliar no processo de

comunicação:– enfatiza informações importantes– identifica estruturas e subdivisões– retrata objetos naturais de forma realista– visualiza o tempo e o progresso de uma operação – reduz erros de interpretação– aumenta a compreensão– aumenta a credibilidade e a aparência– visando o processo de aprendizado, a cor é mais

eficiente do que o preto/branco– propicia melhor captação de memória

22

Ilusão de Óptica

• O que você vê nesta imagem?

• Um careca com a mão no peito?

• Ou um casal de camponeses na rua e um cachorro deitado na rua?

23

Usando cores• Dificuldades podem ser apontadas:

– algumas cores podem causar desconforto visual e produzir o efeito de persistência (afterimage)

– a cor pode contribuir para confusão visual ou criar associações negativas

– diminuição da acuidade visual (miopia temporária), mecanismos de acomodação, alterações na adaptação da seleção de cores

– Estes fatores contribuem ao aparente efeito de profundidade das cores:

–Cromostereopsia é o fenômeno onde os tons azuis parecem estar um pouco mais longe enquanto que os vermelhos parecem avançar.

24

Efeito de Profundidade

• Qual a cor que parece estar no primeiro plano e qual a do segundo plano?

25

Uso de coresPrincípios gerais

– Simplicidade» Usar poucas cores (2 a 7); é mais fácil de dominar e mais simples de

distinguir em monitores de menor qualidade ou preto e branco

– Não associar muitas cores para serem lembradas» Não usar mais de cinco cores quando estas possuírem significado

» Significados mais populares: • vermelho para Pare e verde para Seguir• Cinza para HomePages, branco para Texto, verde para Apresentações e amarelo para

Planilhas

– Cores para primeiro e segundo planos» Usar sempre pares complementares para garantir legibilidade. Por

exemplo, cores que forneçam o branco, como amarelo e azul

» Contraste: não usar cores que sejam ambas claras ou escuras

26

Uso de cores• Princípios gerais

– Manter as associações comuns» Vermelho: significa perigo, erro, pare, fogo ou altas temperaturas

» Amarelo: significa cuidado, aviso, atenção

» Azul: significa frio, água

– Cores opostas» Se vermelho é Pare, o oposto é verde

» Se vermelho é Quente, o oposto é azul

– Diferenças culturais na associação de cores» Alguns países tem cores associadas a alguns objetos e fatos:

• Egito: amarelo é a cor da alegria e prosperidade

• Inglaterra: caixas de correio são vermelhas, nos EUA são azuis, na Grécia são verdes e no Brasil são amarelas

27

Uso de cores

• Cores e tamanho–Cores são difíceis de distinguir em

pequenas áreas. Por exemplo letras pequenas em azul próximas a letras pequenas em preto

–Cores brilhantes parecem maiores

–Cores escuras sobre fundo claro oferecem maior legibilidade