cores prof. roberto cabral de mello borges dez/2001

Cores

Prof. Roberto Cabral de Mello Borges

Dez/2001

Amarelo-Laranja AL

Amarelo

AM Amarelo-VerdeAV

VerdeVD

Azul-VerdeAV

AzulAZ

Azul-VioletaAV

Violeta

VTMagenta

MG

Vermelho

VM

Laranja LJ

Laranja-Vermelho

LV

CORES

Olho Humano

Cones e Bastonetes

Cones e Bastonetes• S - Short Wavelength

• M - Medium

• L - Long

Caminho da Visão

Espectro de Cores Visíveis

400 500 600 700

Luz Visível

Ultra Violeta

Infra Vermelho

Vio

leta

Azu

l

Ve

rde

Am

are

lo

La

ran

ja

Ve

rme

lho

Comprimento de Onda (milimicrons - mµ)

Sensibilidade das Cores

400 700440 500 570 590 610

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)

Sensibilidade do olho para cores

Campo de Visão

30º

1

2 3

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

Adapta¨‹o ao Claro e ao Escuro do Olho Humano

Minutos

Sen

sib

ilid

ade

Rel

ativ

a

0,11

10100

100010000

1000001 11 21 31 41 51 61 71

Adaptação ao EscuroAdaptação ao Claro

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

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)

Contraste de Cores

Contraste de Cores

Cores da tela anterior convertidas para preto e branco

Contraste de Cores

• Qual dos vermelhos é mais brilhante?

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.

WatermarkContraste 16%Contraste 87%

Brilho 23%Brilho 83%Normal

NormalContraste: 50%

Brilho: 50%

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

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?

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.

Efeito de Profundidade

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

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

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

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

– a sensação é o efeito psico-fisiológico sentido pelo ser humano

– cada cor tem uma sensação associada e o uso inadequado da cor pode prejudicar a comunicação visual numa tela

– a sensação também pode variar em função do contraste, isto é, a cor de um texto ou objeto pode ter sensação diferente conforme a cor do fundo da tela

– algumas cores podem ser usadas apenas em alertas ou pequenos espaços; é o caso do vermelho, do preto e do roxo/violeta

– As cores exercem uma potente ação sobre os sentimentos e esta força real pode ser aproveitada com fins de melhorar as funcionalidades e produtividade.

Efeitos Psicológicos das Cores

Sensação de cores

–Cores quentes e frias»cores quentes ou luminosas: amarelo,

laranja, vermelho e violeta

»cores frias ou sombrias: azul, turquesa, verde-mar e verde-alface

Sensação das cores

• Vermelho:–é estimulante mental, aumenta a tensão

muscular, a pressão sangüínea e o ritmo respiratório

–é uma cor quente e que cansa rapidamente

–está associada ao fogo

–Amarelo:» estimulante mental, indicado para situações de calma

e reflexão

» diminui a fadiga visual, tendo ação calmante sobre o sistema nervoso

» é a cor de maior intensidade

» letreiro preto sobre fundo amarelo âmbar é a combinação que dá melhor contraste visual (é uma das poucas cores que tem a mesma visibilidade na inversão do fundo: letreiro amarelo e fundo preto)


–Azul» é calmante do sistema nervosos para pessoas

emotivas

» diminui o ritmo respiratório, por baixar a tensão muscular e a pressão sangüínea

» o excesso de exposição ao azul causa fadiga ou depressão

» inspira paz e a introspecção

» dá a sensação de amplitude, como ocorre com as outras cores frias


–Verde» tem destacado efeito calmante, dilatando os

capilares, abaixando a pressão sangüínea

» é eficaz contra a irritabilidade nervosa, a fadiga e a insônia

» é uma cor fria

» é a mais repousante das cores

» simboliza a segurança, a continuidade e a natureza


–Laranja:» aumenta a emotividade e acelera as pulsações,

ligeiramente

» dá a sensação de bem estar e alegria

» combina a intensidade e vitalidade do vermelho, com a alta visibilidade do amarelo

» é uma cor quente, muito luminosa e pouco fatigante

» é a representação direta do sol


–violeta:»é uma cor fria, porém em tons avermelhados

ou púrpura é quente

»apesar de ser deprimente quando empregada só, torna-se calmante quando em conjunto com outras cores


–Branco:» é símbolo de pureza e de paz

» em monitores é a cor que mais produz luz na tela

–Preto:» é deprimente quando usada só

» serve para marcar contrastes, especialmente com o amarelo e o branco


Usando cores• Lembrar sempre que cores mal

utilizadas são piores que não usar nenhuma!

• Alguns exemplos:

TextoTextoTexto

TextoTextoTexto

Padrões de cores usados em computadores:

• sistemas de representação de cores:–dependem do tipo de dispositivo a ser

utilizado

–aditivos (dispositivos que emitem luz)

–subtrativos (dispositivos de impressão)

–os mais utilizados são: RGB, HSV e HLS (aditivos) e CYMK (subtrativo)

Sistemas Aditivo e Subtrativo

Sistema RGB (Red Green Blue)

Sistema CYMK (Cyan Yellow Magenta blacK)

• Modelo CMYK–composto pelas cores Ciano, Magenta,

Amarelo e Preto (Cyan, Magenta, Yellow e blacK)

–modelo subtrativo porque suas cores subtraem da luz branca sua cor

–o subconjunto do sistema de coordenadas cartesianas é o mesmo que o RGB, exceto pelo branco (luz total) que está na origem do sistema

Sistema subtrativo de cores

• Utilizado em dispositivos de impressão, depositando pigmentos coloridos sobre o papel

• a cor ciano subtrai vermelho da luz branca refletida (ciano é branco menos o vermelho)

• o magenta absorve o verde (ele é vermelho mais azul)

• o amarelo absorve o azul (ele é vermelho mais verde)

• uma superfície coberta com ciano e amarelo absorve vermelho e azul refletindo apenas verde

Sistema subtrativo de cores

Sistema CMYK (Cyan Magenta Yellow blacK)

Sistema HTML (#RRGGBB)

Sistema HSV (Hue Saturation Value)

Sistema Crayon

• Cores complementares

– A cor complementar de uma cor quente é uma cor fria e vice-versa

– colocar uma cor junto com a sua complementar ocasionará a harmonia.

– Exemplo: uma rosa em um roseiral destaca-se mais entre as folhas verdes do que isolada

Harmonia das CoresAmarelo

AM

AzulAZ

Vermelho

VM

Cores Complementares:• Vermelho - Ciano (azul

piscina)

• Verde - Magenta (lilás)

• Azul - Amarelo

Harmonia das Cores

Amarelo-LaranjaAL

Amarelo

AM Amarelo-VerdeAV

VerdeVD

Azul-VerdeAV

AzulAZ

Azul-VioletaAV

Violeta

VTMagenta

MGVermelho

VM

Laranja LJ

Laranja-Vermelho

LV

• Harmonia das cores análogas ou vizinhas: quando emprega-se uma cor e suas vizinhas ou apenas uma delas. Ex.: laranja com o vermelho e amarelo ou só com o vermelho ou só com o amarelo. É recomendável colorir a superfície maior com a cor mais clara

Harmonia das Cores

Amarelo-LaranjaAL

AmareloAM Amarelo-Verde

AV

• Harmonia monocromática ou de cor dominante: consiste em usar somente uma cor e aplicá-la pura e em vários tons, claros e escuros ou empregados em conjunto

• Em qualquer harmonia pode-se usar pura, uma cor neutra, obtendo-se realce no emprego do preto e branco

• O preto e o branco puros permitem a realização de harmonia de contraste

Amarelo

AM

Harmonia das Cores

cores prof. roberto cabral de mello borges dez/2001

Documents