Cores Prof Roberto Cabral de Mello Borges Dez2001

Cores Prof. Roberto Cabral de Mello Borges Dez/2001

CORES Amarelo AM Amarelo-Laranja AL Amarelo-Verde AV VD LJ Laranja- LV Vermelho Verde AV VM AZ Vermelho MG Magenta Azul-Verde Azul AV VT Violeta Azul-Violeta

Olho Humano

Cones e Bastonetes

Cones e Bastonetes • S - Short Wavelength • M - Medium • L - Long

Cones

Caminho da Visão

Espectro de Cores Visíveis

Sensibilidade das Cores 400 440 500 570 590 610 700

Ponto de foco das 3 cores básicas Retina Azul Verde Vermelho Azul Verde 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 Área 1 - Cones Área 2 - Cones e Bastonetes Área 3 - Bastonetes

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

Formato da tela TV 3 x 4 (0, 75) HDTV 3 x 5 (0, 6) Slide: 2 x 3 (0, 67) Ideal (Relação de Ouro) 3 x 4, 854 (0, 618)

Contraste de Cores

Contraste de 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.

Normal Contraste 87% Brilho 83% Contraste 16% Brilho 23% Watermark Normal Contraste: 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 cores Princí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 Home. Pages, 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

Efeitos Psicológicos das Cores – 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.

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

Sensação das cores –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)

Sensação das cores –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

Sensação das cores –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

Sensação das cores – 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

Sensação das cores –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

Sensação das 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: Texto Texto

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 RGB (Red Green Blue)

Sistema CYMK (Cyan Yellow Magenta blac. K)

Sistema subtrativo de cores • Modelo CMYK – composto pelas cores Ciano, Magenta, Amarelo e Preto (Cyan, Magenta, Yellow e blac. K) – 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 CMYK (Cyan Magenta Yellow blac. K)

Sistema HTML (#RRGGBB)

Sistema HSV (Hue Saturation Value)

Sistema Crayon

Harmonia das Cores • 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 Amarelo AM VM Vermelho AZ Azul

Harmonia das Cores Complementares: • Vermelho - Ciano (azul piscina) • Verde - Magenta (lilás) • Azul - Amarelo AM Amarelo-Laranja AL Amarelo-Verde AV VD Verde Laranja LJ Laranja- LV Vermelh o VM AV Azul-Verde AZ Vermelho MG Magenta VT Violeta Azul AV Azul-Violeta

Harmonia das Cores • Harmonia das cores análogas ou vizinhas: quando emprega-se uma cor e suas vizinhas ou apenas uma delas. Amarelo-Laranja AL 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 Amarelo AM Amarelo-Verde AV

Harmonia das Cores Amarelo • 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 AM