CBSI – Curso de Bacharelado em Sistemas de Informação

Uso de Cores no Design de

Interfaces
Prof. Dr. Sandro Ronaldo Bezerra Oliveira
srbo@ufpa.br
www.ufpa.br/srbo
Interação Homem-Computador

Faculdade de Computação
Instituto de Ciências e Exatas e Naturais
Universidade Federal de Pará

Uso de Cores – Algumas dicas:

Não torne a tela muito brilhante ou escura

Use as cores brilhantes em áreas pequenas e cores
suaves em áreas maiores

Não aposte na boa habilidade visual de todos os
usuários (Um número muito grande de pessoas têm algum tipo
de disfunção visual; isto faz com que algumas pessoas não
consigam distinguir perfeitamente algumas cores e confundir
outras; não só o daltonismo mas também a distorção de algumas
lentes provoca estes efeitos)

Se possível tornar as cores personalizáveis (Permitir que
o usuário defina as copres ao seu gosto)

Não use muitas cores extravagantes

1
 Uso de Cores – Regras Gerais:

Simplicidade: use poucas cores (2 a 7); é mais fácil de dominar e
mais simples de distinguir em dispositivos de menor qualidade ou
preto-e-branco

Se as cores serão usadas para indicar continuidade, como a
passagem de tempo enquanto se espera que uma tarefa termine,
então não use um espectro de cores (do violeta ao vermelho).

Não associar muitas cores para serem lembradas

As cores podem possuir um significado, além daqueles mais
populares (vermelho para Pare e Verde para Seguir).

Lembrem-se ...
Cores mal utilizadas é pior do que não usar cores

Cores – Associações comuns:

Vermelho: pare, perigo, fogo, quente

Amarelo: cuidado, atenção, aviso

Verde: siga, OK

Azul: frio, água

2
 Diferenças Culturais na
Associação de cores

Alguns países têm cores associadas à alguns

objetos e fatos:

no Japão marginais usam chapéu azul

no Egito o amarelo é a cor da alegria e
prosperidade

as caixas de correio são:
- Vermelhas na Inglaterra,
- Azuis nos Estados Unidos,
- Amarelas na Grécia e
- Verdes ou amarelas no Brasil

Cores Opostas

- se vermelho é PARE:
oposto é verde

- se vermelho é CALOR, QUENTE:

oposto é azul

3
 Cores Quentes e Frias

Cores quentes ou luminosas:

Amarelo, laranja, vermelho e violeta

Cores frias ou sombrias:

Azul, Turquesa, Verde-mar, verde-alface

Harmonia das cores

Harmonia das cores opostas ou de contraste: o maior
contraste se obtém justapondo cores complementares; a
maior superfície é colorida com uma cor quente e a
menor com sua cor complementar fria

Harmonia das cores análogas ou vizinhas: é o emprego

de uma cor e uma ou duas vizinhas; por exemplo:
laranja e seus vizinhos, vermelho e amarelo; a cor mais
clara usada na superfície maior

Harmonia monocromática ou de cor dominante: é o uso

de uma única cor, aplicada pura e em vários tons, claros
e escuros

4
 Cores e Tamanhos

Cores são difíceis de distinguir em

pequenas áreas

Cores brilhantes parecem maiores

Cores escuras sobre fundo claro
oferecem maior legibilidade

Sensação das cores

A sensação é o efeito psico-fisiológico sentido pelo ser

humano

Cada cor tem uma sensação associada, e portanto o uso
inadequado de uma cor pode prejudicar a comunicação
visual numa interface

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

5
 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 excitante
- Na tonalidade rosa é a cor preferida das mulheres
- Aumenta a atividade sexual dos homens
- 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)

6
 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
- É a cor predileta dos homens e também das crianças
- 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

7
 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

Sensação das cores

Roxo:
- É uma cor fria, porém em tons avermelhados ou púrpureos é
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