Comunicação Visual para Web I AULA 6

Prévia do material em texto

Aula
06Comunicação Visual para Web - UNIGRAN
AS CORES NA WEB
Caros(as) alunos(as) nessa aula veremos qual a importância do 
emprego das cores na composição de layouts para sites e softwares. Se 
ao final desta aula tiverem dúvidas, vocês poderão saná-las através das 
ferramentas “fórum” ou “quadro de avisos” e “chat”.
Comecemos, então, analisando os objetivos e verificando as 
seções que serão desenvolvidas ao longo desta aula.
Bom trabalho!
Objetivos de aprendizagem
Ao final desta aula, vocês serão capazes de:
• entender a definição de cor;
• conhecer os sistemas de cores voltados para web e como utilizá-los;
• ver aplicações práticas de como o emprego das cores pode 
influenciar na estética e funcionalidade dos sites;
• utilizar corretamente as cores na composição de layouts, de 
acordo com proposta conceitual do projeto;
• entender que os recursos cromáticos podem ser uma poderosa 
ferramenta para navegação e usabilidade do site;
• conhecer quais as principais limitações e patologias devem ser 
consideradas no emprego de cores;
• entender a semântica das cores, ou seja, o significado que cada 
uma dela nos remete na cultura ocidental;
97
Comunicação Visual para Web - UNIGRAN
Seções de estudo
• Seção 1 - As Cores na WEB
• Seção 2 - Sistemas de Cores
• Seção 3 - Paleta Cromática: Trabalhando Equilíbrio e Funcionalidade
• Seção 4 - Limitações e Patologias 
• Seção 5 - Estudo das Cores 
• Seção 6 - Psicologia das Cores na Cultura Ocidental
Seção 1 - As cores na web
Caros(as) aluno(as), antes de discorrer sobre o assunto As Cores na 
WEB, proponho um simples teste. Vá até a janela e observe qual a cor do céu 
nesse instante. As características e cores observadas provavelmente lhe darão um 
prognostico de como o tempo irá se comportar nas horas seguintes. 
Esta abordagem não possui caráter científico, mas apenas reflete a 
influência que as cores exercem na percepção do ambiente real, e essa característica 
se estende ao ambiente virtual. Tal constatação denota a importância das cores 
como objeto de estudo para composição de layouts de softwares e sites. 
Viu como o estudo das cores é importante para projetarmos interfaces de sites e 
softwares. Mas você sabe o que é cor???
A cor de um material é determinada pelas médias de frequência dos 
pacotes de onda que as suas moléculas constituintes refletem. Um objeto terá 
determinada cor se não absorver justamente os raios correspondentes à frequência 
daquela cor. Assim, um objeto é vermelho se absorver preferencialmente as 
frequências fora do vermelho. (Wikipédia)
A cor é uma percepção visual provocada pela ação de um feixe de fotons sobre células 
especializadas da reƟ na, que transmitem através de informação pré-processada no 
nervo ópƟ co, impressões para o sistema nervoso. (Wikipédia)
CONCEITO
98
Comunicação Visual para Web - UNIGRAN
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Seção 2 - Sistemas de cores
2.1 RGB X CMYK
Transformar uma cor obtida aditivamente ou cor luz (RGB) em cor obtida 
subtractivamente ou cor pigmento (CMYK) era um desafio para a definição da 
paleta de cores na época renascentista como nos dias atuais.
Vamos ver como funciona cada um desses sistemas de cores?!
99
Comunicação Visual para Web - UNIGRAN
CMYK: acrônimo do sistema de cores formado cores secundárias 
(também chamadas de primárias em artes plásticas); é composto por Ciano 
(Cyan), Magenta (Magenta), Amarelo (Yellow) e Preto (black). O Sistema CMYK 
é utilizado para meios impressos e não emite luz.
Vamos ver como as cores são compostas no sistema CMYK: 
A escala de cada cor no sistema CYMY varia de 0% a 100%.
RGB: acrônimo do sistema de cores aditivas formado por Vermelho 
(Red), Verde (Green) e Azul (Blue). O sistema RGB reproduz as cores em 
dispositivos eletrônicos como monitores de TV e computador e emite luz.
Vamos ver como as cores são compostas no sistema RGB:
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
A escala de cada cor no sistema RGB varia de 0 a 255.
Como vimos o sistema utilizado pelos monitores para composição de 
cores baseia-se em três cores básicas: Vermelho, verde e azul. O monitor colorido 
cria cores emitindo três feixes de luz que reveste a parte interna da tela. Quando 
vemos a cor verde no monitor, significa que este ativou o feixe verde, que excita 
os fósforos verdes, acendendo um pixel verde na tela. 
?
VOCÊ SABIA
As pessoas não enxergam as cores exatamente da mesma 
maneira, pois cada cor é uma interpretação que o cérebro faz 
dos sinais luminosos. 
100
Comunicação Visual para Web - UNIGRAN
2.2 BIT
Bit ou dígito binário é a menor unidade de informação que pode ser 
armazenada ou transmitida. Um bit pode assumir somente 2 valores, por 
exemplo: 0 ou 1, verdadeiro ou falso. Ou seja, é basicamente um interruptor de 
ligar e desligar. O número de níveis de RGB acessíveis é chamado de bit depth 
(profundidade de bit). 
Dessa forma uma exibição de computador com profundidade de 1 bit é 
capaz de mostrar duas cores, uma na posição ligada e a outra na posição desligada. 
Quanto maior a profundidade maior será o número de cores.
A profundidade de bit esta diretamente relacionada com à memória do 
computador, dessa forma quanto maior a faixa de cor, mais memória será utilizada.
2.3 Cores Hexadecimais
Há duas principais formas aceitas na web para definir as cores: Hexadecimal 
e RGB, sendo que o hexadecimal é outra forma de definir uma cor em RGB. O 
sistema hexadecimal também é muito utilizado em computação (não apenas nas 
cores) por representar uma economia considerável de memória e de processamento.
Quando vamos definir a cor de um determinado elemento gráfico ou 
texto na web, o HTML, linguagem de programação utilizada para criar páginas 
na web, converte os valores de cor RGB em dados hexadecimais. O sistema 
hexadecimal é um sistema de numeração posicional que representa os números 
Profundidade de cor, ou color depth, é um termo da computação gráfi ca que 
descreve a quanƟ dade de bits usados para representar a cor de um único pixel 
numa imagem bitmap. Este conceito é conhecido também como bits por pixel (bpp), 
parƟ cularmente quando especifi cado junto com o número de bits usados. Quanto 
maior a quanƟ dade da profundidade da cor presente na imagem, maior é a escala 
de cores disponível. (Wikipédia).
CONCEITO
Profundidade da Cor (bits) QuanƟ dade de Cores
1 bit por pixel 2
2 bits por pixel 4
4 bits por pixel 16
8 bits por pixel 256
16 bits por pixel 65.536
24 bits por pixel 16.777.216
32 bits por pixel 4.294.967.296
101
Comunicação Visual para Web - UNIGRAN
em base 16. Os valores hexadecimais são 16: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E e F. 
As letras foram usadas para representar números de dois dígitos com apenas um 
caractere (A = 10, B = 11, C = 12 , D = 13, E = 14, F = 15), dessa forma o sistema 
hexadecimal representa valores RGB através de um conjunto de três números, 
de dois dígitos, com cada um dos três valores correspondendo a 256 níveis de 
vermelho, verde e azul. 
 Complicado??? Vejamos um exemplo: 
A cor Amarela é representada em valores RGB por: 255, 242, 0, sendo, 
255 de vermelho, 242 de verde e 0 de azul. O equivalente em hexadecimal é FF, 
F2, 00, que em HTML é escrito tudo junto, assim: #FFF200.
Quando os canais são compostos por dois dígitos iguais, por exemplo: 
"#55FF00" e "#FFFFFF", podemos expressa-los de forma reduzida, assim: "#5F0" 
e "#FFF".
Seção 3 - Paleta cromática: trabalhando equilíbrio
 e funcionalidade
Ao definirmos uma paleta de cores devemos levar em consideração 
conceitos concretos (saturação, contraste,luminosidade, gama etc.) e abstratos 
(significado da cor isolada ou associada a outras).
A escolha cromática irá influenciar como o usuário interpretará 
visualmente os elementos dispostos em um layout de um projeto, por isso questões 
físicas, ergonômicas, de legibilidade, luminosidade e de Gestalt, devem anteceder 
qualquer pesquisa ou estatística. Uma cor errada pode levar o usuário a clicar em 
um link que não seria o principal. É necessário definir critérios de prioridades 
de navegação, e criar uma escala cromática com base nesses critérios. As cores 
devem fazer sentido, caso contrário o usuário que estiver navegando no site vai 
acessar locais que não queira. Observem a caixa de diálogo abaixo:
O site Psyclops disponibiliza um sistema para conversão de 
cores em RGB para Hexadecimal. Vale à pena conferir!
<hƩ p://www.psyclops.com/tools/rgb/>. 
O site Universo da Cor oferece uma excelente ferramenta 
para misturar cores RGB. <hƩ p://universodacor.com.br/
index.php?scr=misturador_cor>.
102
Comunicação Visual para Web - UNIGRAN
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Na caixa de diálogo, é exibida a seguinte mensagem: “Dados cadastrados 
com sucesso”, e disponibiliza dois botões ao usuário, para que este prossiga a 
ação ou volte à ação anterior. Mas a cor vermelha do botão é contraditória a 
mensagem, isso porque o vermelho esta associando a idéias como “proibido”, 
“pare”, “erro”, enquanto a cor verde esta associado a conceitos como “prosseguir” 
e “permitido”. Por isso, nesta situação a cor do botão é contraditória a mensagem. 
A escolha cromática de um projeto de web site ou software deve condizer ao 
modelo mental dos usuários, portanto, o uso da cor vermelha para mensagens e 
verde para mensagens de erro podem atrapalhar o entendimento da mensagem 
pelo usuário. 
As cores exercem um papel fundamental na organização da interface, 
pois a composição cromática atua como um facilitador para que diferentes áreas e 
funcionalidades de uma tela sejam percebidas da forma como foram projetadas. A 
má composição cromática pode comprometer toda a funcionalidade, organização 
e hierarquização dos elementos, comprometendo a arquitetura do site. 
Além das questões físicas apontadas, é importante observar as questões 
de caráter simbólico e emocional. 
Segundo o InsƟ tuto de Pesquisa da Cor, há estudos que revelam 
que nós julgamos subconscientemente as pessoas ou os 
ambientes nos primeiros 90 segundos, e o prognósƟ co é de que 
de 62% a 90% baseiam-se na cor.?
VOCÊ SABIA
103
Comunicação Visual para Web - UNIGRAN
Conhecer os fundamentos das cores para definir a paleta de cores que 
será utilizada no projeto é imprescindível. O uso de cores adequadamente é fator 
determinante para uma boa usabilidade. As cores são sensoriais, ou seja, transmitem 
sensações ao usuário e orientam durante a navegação, porque ajudam a compreender 
os elementos e a funcionalidade da interface. Conceitos sinestésicos como ácido, 
quente, frio e sentimentos como alegria e tristeza podem ser expressados através da 
correta utilização e combinação das cores.
O emprego de cores na interface deve ser harmonioso em relação às 
cores da logomarca do cliente e as demais cores utilizadas, além de condizer 
com a imagem institucional que o site representa e manter uma unidade visual e 
funcional entre as páginas do site. A unidade funcional refere-se à associação que 
os usuários fazem entre os elementos que possuem a mesma cor ou tonalidade 
com a função que desempenham.
Vamos ver como as cores auxiliam na funcionalidade do site!
Utilizarei como exemplo o site Discovery Home & Health Brasil que 
categoriza as sessões principais por cores, como vocês podem ver na imagem abaixo:
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
A página inicial esta representada por este ícone , percebam que a 
cor predominante da tela é amarela, a mesma cor do ícone.
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Segundo Lucas Hirata, designer da globo.com, uma cor pode ser interpretada de 
maneiras diferentes e sua semânƟ ca sempre dependerá dos valores culturais, políƟ cos 
e religiosos do observador.
104
Comunicação Visual para Web - UNIGRAN
Se o usuário quiser navegar na sessão saúde ele terá que clicar neste 
ícone , percebam que agora a cor predominante da página é azul. A cor 
exerce a função de manter uma unidade visual, dessa forma, toda vez que o 
usuário estiver em uma página com a cor predominante Azul ele saberá que está 
na sessão de saúde.
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
 Nos exemplos citados, percebemos a clara associação das cores 
empregadas nos ícones que representam as sessões principais com as cores 
utilizadas nos menus e fundo da página. O emprego das cores esplanadas 
nesse exemplo demonstra como estas podem nos auxiliar na navegação e 
funcionalidade do site. 
Vamos ver mais um exemplo!
Vamos analisar o site do Mercado Livre, perceba que na lateral esquerda 
da imagem estão as sessões principais do site: Classificados e Categorias.
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Ao clicar na sessão: Classificados > Carros, Motos e Outros, a cor do 
tópico que está em azul mudará para roxo.
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
105
Comunicação Visual para Web - UNIGRAN
Seção 4 - Limitações e patologias
A escolha cromática para ambientes digitais deve considerar as 
seguintes limitações:
Reflexo do monitor: A luminosidade do monitor causa cansaço e fadiga 
visual, por isso a composição cromática de um site é um desafio aos projetistas, que 
devem estar atentos às combinações para não causar mais desconforto na leitura, 
pois as cores não devem ser um obstáculo para o usuário durante a navegação.
A mudança de cor do tópico de azul para roxo informa intuitivamente ao 
usuário que ele já visitou essa sessão. Esse recurso há muito tempo vem sendo 
utilizado na web e é bastante útil para auxiliar os usuários durante a navegação, 
pois a cor diferenciada indica quais sessões e links já foram visitados, dessa forma 
o usuário saberá exatamente quais caminhos ele já percorreu na navegação. 
Patologias: Algumas pessoas com problemas visuais não conseguem 
distinguir corretamente as cores, gerando um problema de acessibilidade.
O daltonismo é uma das doenças que impedem as pessoas de 
diferenciar certas core. A cegueira às cores verde e vermelha é a mais comum. 
Aproximadamente 8% da população masculina, e 0,5% da população feminina 
Dica!
Quando vocês uƟ lizarem a cor branca para fundos de páginas 
que contém textos, acrescente uma pequena porcentagem de 
cor para reduzir a luminosidade emiƟ da pelo monitor e assim 
amenizar a fadiga visual, tornando a leitura de telas mais 
confortável. A composição da cor branca é R:255, G:255, B:255, 
altere os valores para R:250, G:250, B:250, dessa forma, será 
acrescentada à cor branca uma pequena porcentagem de cinza 
quase impercepơ vel sem comprometer sua composição cromáƟ ca. 
?
VOCÊ SABIA
Estaơ sƟ cas apontam que de 8% a 20% da população sofre 
algum Ɵ po de defi ciência na percepção das cores. Fonte: 
ww.ibrau.com.br/arƟ gouƟ lizacaodecor.htm
106
Comunicação Visual para Web - UNIGRAN
possuem alguma forma de daltonismo. Combinações erradas como texto vermelho 
sobre fundo verde podem tonar o ato de leitura impossível para algumas pessoas, 
pois as cores vermelho e verde são percebidas como a mesma cor. 
O ideal é permitir que o usuário faça suas próprias configurações e 
escolha às cores quelhe são visualmente mais confortáveis.
Observem o site do Yahoo. Perceba que este utiliza um código de cores 
para que os usuários percebam rapidamente se as bolsas estão em alta (destacadas 
em verde) ou em baixa (destacadas em vermelho). Se o usuário que acessar o site 
do Yahoo for daltônico e não conseguir discernir as cores verde e vermelha este 
ainda poderá interpretar as informações através das dicas secundárias: as setas 
que apontam para baixo e para cima que sinalizam a situação da bolsa.
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Fundo de tela: O uso de texturas e backgrouds no fundo das páginas 
pode dificultar a legibilidade dos textos, porque o emprego excessivo de imagens 
polui o visual da página e confunde o usuário durante a leitura. Sendo assim 
recomenda-se o uso criterioso de planos de fundo.
Dica!
• UƟ lizem combinações de cores contrastantes ou que variam 
muito de intensidade. Para testar o contraste dos elementos 
visualize a tela em escalas de cinza. Os elementos importantes da 
página devem ser discerníveis em escala de cinza.
• Ao empregarem cores para destacar informações importantes, 
uƟ lizem pistas secundárias, principalmente se as cores 
empregadas forem vermelha e verde. 
107
Comunicação Visual para Web - UNIGRAN
Tempo de navegação: O emprego de cores deve considerar o tempo 
mínimo e máximo que o projetista deseja reter o olhar do usuário. É válido 
trabalhar com combinações mais agressivas para telas de passagem ou hotsites, a 
fim de causar um determinado efeito informacional.
Semântica das cores: O significado das cores varia de acordo com a 
cultura de cada país. 
Um torcedor do Internacional pode ser mais receptivo à cor vermelha, 
mesmo em excesso, porque se encontra dentro de suas expectativas e preferências; 
já um torcedor do Grêmio não teria a mesma aceitação. Por isso, é fundamental 
conhecer o público-alvo antes de escolher as cores que irão compor a interface 
do site.
Seção 5 - Estudo das cores 
5.1 Círculos Cromáticos
O texto que se segue foi baseado na apostila do curso Web para 
Designers, módulo1.
Fonte: www.ensinarevt.com/conteudos/teoria_cor/imagens/ccromatico.pps
Em nossa cultura, por exemplo, a cor verde signifi ca “seguro” 
ou “prossiga”, já na França, signifi ca “criminalidade”.
CURIOSIDADE
108
Comunicação Visual para Web - UNIGRAN
 (Fonte: http://pt.wikipedia.org/wiki/Cor)
O círculo cromático foi desenhado por Johannes, em 1928. No centro 
desse círculo estão às cores primárias, e a partir da combinação dessas cores 
podemos criar novas cores.
 CORES PRIMÁRIAS: 
As cores primárias são: magenta(12), amarelo(4) e azul cyan(8);
CORES SECUNDÁRIAS: 
Formadas pela combinação das cores primárias:
Azul cyan (8) + amarelo (4)= verde (6)
Azul cyan (8) + magenta (12)= violeta (10)
Amarelo (4) + magenta (12)=laranja (2)
CORES TERCIÁRIAS: 
Formadas pela combinação das cores secundárias, podem ser divididas 
em cores quentes (amarelo, vermelho, marrom, laranja e suas combinações) e 
frias (azul, verde, violeta e suas combinações).
CORES ANÁLOGAS: 
São cores vizinhas no círculo cromático.
CORES ACROMÁTICAS: 
São as cores chamadas neutras como branco, preto, cinza e marfim.
CORES MONOCROMÁTICAS: 
Cores da mesma família com variação de tonalidades. Para empregar 
cores no seu projeto Web, considerem princípios de familiaridade, equilíbrio, 
harmonia, ordem e ambiguidade.
109
Comunicação Visual para Web - UNIGRAN
5.2 Veja algumas recomendações para escolher cores com base no 
círculo cromático:
Utilizem várias tonalidades de brilho para uma mesma cor. Ex.: azul-
marinho, azul-médio e azul claro.
 Imaginem um triângulo equilátero no meio do círculo cromático, como 
na imagem acima, e utilize as cores que estão posicionadas nos vértices.
 Utilizem duas cores vizinhas e a terceira oposta a elas no círculo cromático. 
 Determinem a cor que será predominante na interface.
 Façam com posições baseadas nas temperaturas das cores, com cores 
frias (azul, violeta, verde) ou quentes (vermelho, laranja, amarelo). Use o branco 
como “cor de alívio” no texto, separadores e áreas de respiração.
 Se a composição da interface utilizar cores frias e quentes, igualmente 
distribuídas com igual luminância, as cores quentes predominarão.
 Os elementos escuros são “engolidos” visualmente em fundos claros, 
pois parecem menores do que realmente são.
 Interface composta por tonalidades escuras, as cores claras atrairão o olhar.
 Utilizem contrates cromáticos ou luminosos para distinguir e ressaltar 
um objeto de outro ou do fundo em que ele está posicionado.
Sete Diretrizes para utilização das cores
• estética (harmonia, equilíbrio, contraste, intensidade, variabilidade);
• visibilidade, legibilidade e saturação de leitura ( contraste visual);
• organização e usabilidade (como ajudar o usuário a navegar no site, 
direcionar sua leitura, identificar unidades, partes, seções etc.);
• identidade (como se diferenciar e ser reconhecido por meio das cores);
• repertório simbólico (a carga simbólica que pode ser incorporada às 
cores, naquele determinado contexto de uso e do repertório do usuário que se 
pretende atingir);
Veja as sete diretrizes de usabilidades recomendadas por 
Luciano Guimarães, doutor em Comunicação e SemióƟ ca pela 
PUC de São Paulo 
Para empregar cores no seu projeto Web considere princípios de familiaridade, 
equilíbrio, harmonia, ordem e ambiguidade.
110
Comunicação Visual para Web - UNIGRAN
• informação ( como a cor pode construir para conduzir a informação);
• limitações e recursos técnicos (aspectos materiais do suporte e dos 
processos); 
A composição de cores de uma interface para um determinado público-
alvo deve estar relacionada à sensação que você deseja provocar em seus usuários: 
suavidade, calma, limpeza visual, energia, alegria, impacto, profissionalismo, 
tecnologia etc. Por isso, é importante que você conheça um pouco sobre os 
significados das cores.
Seção 6 - Psicologia das cores na cultura ocidental
A psicologia das cores causa sensações e reações no usuário provocado 
pelas combinações cromáticas. Em função disso, é tão importante conhecer 
cada uma delas antes de empregá-las no layout de um site.
Branco: Considerada a melhor cor para demonstrar limpeza, é ofuscante, levando 
um certo cansaço mental. O ideal é sempre combiná-la com outra cor. Sugere pureza. 
Cria uma impressão de vazio e de infi nito. Ex.: ordem, simplicidade, luz, paz, higiene, 
casamento, hospital, neve, harmonia.
Preto: UƟ lizado sozinho é austero e confere isolamento. Associado ao branco, 
sugere um ar moderno. As composições do preto com outras cores podem ser bem 
alegres e esporƟ vas. Quando brilhante, confere nobreza, disƟ nção e elegância. Cor 
preponderantemente masculina. Ex.: noite, nobreza, pessimismo, tristeza, dor, 
silêncio, morte.
 
 Cinza: É a expressão de um estado de alma duvidosa e neutra. Símbolo da indecisão 
e da ausência de energia. Quanto mais sombrio, mais conota desânimo, monotonia. 
Ex.: chuva, máquinas, seriedade, velhice, desânimo, sabedoria
Vermelho: Signifi ca força, virilidade, masculinidade, dinamismo. É uma cor 
exalante e até enervante. Impõe-se sem discrição. É uma cor essencialmente quente, 
transbordante de vida e de agitação. Ex.: cereja, morango, sangue, desejo, sexo, 
agressividade, fogo, fome, perigo, guerra, força, energia, fúria, dinamismo, paixão.
 
Laranja: Transborda irradiação e expansão. É acolhedor, quente, ínƟ mo. Ex.: 
outono, pôr-do-sol, festa, comida, movimento.
Amarelo: EsƟ mula a criaƟ vidade, é uma cor vibrante e alegre. IncenƟ va a 
conversação. Em excesso, é cansaƟ va. É uma cor luminosa e muito forte para atrair a 
atenção. Ex.: luz, angúsƟ a, esperança, atenção.
111
Comunicação Visualpara Web - UNIGRAN
É preciso ressaltar que o projeto não deve ficar engessado a essas regras, 
porque, teoricamente, um site de alimentos, por exemplo, deveria ser composto 
pelas cores amarelo, laranja e vermelho, a exemplo do McDonald’s, mas essas 
cores nem sempre condizem com as cores institucionais da marca da empresa. 
 Veja um exemplo de composição cromática para um projeto de web site:
A escala cromática no site estabelece prioridades de navegação e conduz 
o usuário. É fundamental para projetar a usabilidade e hierarquia das informações 
no site. O uso inadequado, porém, pode levar os usuários a locais que eles não 
queriam. Por isso, a escolha de cores deve sempre estar focada no público-alvo 
do site.
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Verde: Cor universal da natureza. Tem frescor, harmonia e equilíbrio. Cor calma,
que não se dirige para nenhuma direção, nem encerra algum elemento de alegria, 
tristeza ou efi ciência. Ex.: fl oresta, natureza, bem-estar, tranquilidade, juventude, 
umidade, saúde, tapete de jogos.
Azul: Transmite segurança e confi ança, além de tranquilidade. Em exagero, pode 
deprimir as pessoas. Cor profunda, calma. Marca uma certa maturidade. Mais claro, 
provoca uma sensação de frescura e higiene, principalmente quando na presença de 
branco. Ex.: frio, céu, mar, tranquilidade, paz, infi nito, meditação, credibilidade.
Roxo: Equivale a um pensamento meditaƟ vo e mísƟ co, mistério. Assim como o 
preto, remete à nobreza e ao poder. Ex.: sonho, mistério, egoísmo, nobreza, fantasia, 
profundidade, doença.
Marrom: Emana a impressão de algo maciço, denso, compacto. Sugere segurança 
e solidez. Ex.: terra, outono, chocolate.
Rosa: É de pouca vitalidade e sugere feminilidade e afeição. É uma cor ínƟ ma, de 
doçura melosa e românƟ ca. Ex.: feminilidade, delicadeza.
Dica!!! Para montar a paleta de cores do seu projeto é parƟ r de uma cor principal 
(cores do logoƟ po da empresa ou pessoa, se houver) e, a parƟ r dela, crie variações em 
outros níveis de brilho e tons. 
Crie variações com outras cores e mantenha a saturação da cor matricial.
112
Comunicação Visual para Web - UNIGRAN
Sugestões de ferramentas online e leituras
• Ferramentas online
• COLOUR CONTRASTE ANALYSER: 
Programa para avaliação do contraste entre cores de texto e cores de fundo, é ótimo 
para testar a legibilidade de textos. Vocês podem fazer download dessa ferramenta 
no site: <www.maujor.com/tutorial/ccanalyser.php#download>. 
• VISIBONE:
Sistema on-line no qual você seleciona as cores desejadas e o sistema faz a 
combinação das tonalidades. Disponível em: www.visibone.com/colorlab/ 
• COLOR BLENDER:
Sistema on-line no qual você cria uma cor e o sistema cria uma paleta com tonalidades 
referentes à cor especifi cada. Disponível em: <www.colorblender.com>. 
• COLR: 
Site no qual vocês escolhem uma imagem de seus arquivos pessoais ou uma imagem 
postada na Web, e ele gera uma paleta de cores com as tonalidades da imagem que 
você selecionou. Disponível em: <www.colr.org/>.
• COLOR HUNTER: 
Semelhante ao Colr descrito acima. <www.colorhunter.com>. 
• DEGRAEVE: 
Site no qual vocês escolhem a URL de uma imagem e ele gera uma paleta de cores com 
as tonalidades dessa imagem. Disponível em: <http://www.degraeve.com/color-palette >.
• COLOR SCHEME GENERATOR: 
Sistema on-line no qual você seleciona uma cor na roda de cores e o programa cria 
uma paleta de cores nessa tonalidade a partir dessa cor especifi cada. Disponível em: 
<www.colorschemedesigner.com >.
• DREAMSTIME:
Esse site disponibiliza uma relação de links para outros sites que oferecem álbuns de 
imagens com downloads gratuitos, ferramentas de cores, dentre outros serviços, é um 
ótimo guia de referência. Disponível em: <www.bluevertigo.com.ar/bluevertigo.htm>. 
113
Comunicação Visual para Web - UNIGRAN
• Leituras
• A cor como Informação 
Autor: Luciano Guimarães 
Editora: Anna Blume 
• As cores na mídia
Autor: Luciano Guimarães 
Editora: Anna Blume 
• A cor no processo criativo 
Autora: Lilian Ried Miller Barros 
Editora: Senac
• Como combinar e escolher cores para o design gráfi co
Autor: Nick Clark
Editora: Gustavo Gili
• Da cor à cor inexistente
Autor: Israel Pedrosa
Editora: Léo Christiano Editorial
114