[7571 - 22546]unidade2

Prévia do material em texto

2UNIDADE 2Cores na web
Objetivos de aprendizagem
 � Entender o mecanismo fisiológico de reconhecimento 
das cores.
 � Perceber os cuidados necessários para o uso da cor na web.
 � Compreender os efeitos e as influências da cor durante o 
projeto de interface.
Seções de estudo
Seção 1 O que é cor?
Seção 2 A visão humana da cor
Seção 3 Teoria das cores
Seção 4 Sistemas de representações das cores
Seção 5 Definição da cor de fundo da página
Seção 6 Recomendações para o uso de cores na web
Seção 7 Cores seguras da web
com_visual_WEB.indb 43 05/06/12 11:46
44
Universidade do Sul de Santa Catarina
Para início de estudo
A unidade Cores na Web traz à tona a importância do uso da cor 
no projeto de websites. Muitas vezes consideramos a cor apenas 
como um fator estético, mas se você observar os objetos que você 
usa no cotidiano, vai perceber aspectos interessantes: o botão de 
ligar e desligar do controle remoto de sua tv é vermelho; quantas 
cores existem no teclado do seu celular? O painel do seu carro faz 
uso de no mínimo três cores, por quê? 
O uso da cor proporciona uma importante dimensão na 
comunicação visual: se a utilizamos com sabedoria, melhora-se a 
interpretação de uma mensagem; se mal utilizada, pode prejudicá-la. 
Quando vamos escolher as cores a serem utilizadas em nossos 
sites, acabamos, às vezes, por perder o sono à noite, até tomarmos 
a decisão. Qual cor? Quantas cores? Quais combinam? As cores 
da empresa, o gosto do cliente, nossas decisões durante o projeto 
nos colocam em ciladas virtuais. 
As escolhas relacionadas ao uso da cor vão além dos meros 
aspectos pessoais. O uso eficiente da cor depende de fatores que 
variam de particularidades como: recursos visuais disponíveis, 
fatores humanos e do próprio contexto de uso e do ambiente onde 
esta será utilizada.
Durante a unidade, vamos explorar este mundo colorido, a maneira 
como vemos, como interpretamos, tentando entender melhor para 
aplicar mais adequadamente a cor nos projetos de sites para Web.
Seção 1 – O que é cor?
Em 1666, Newton descobriu que a luz branca do sol pode ser 
decomposta com o auxílio de um prisma de cristal em radiações de 
larguras variáveis. A cor que é percebida pelos olhos é a refletida 
pelo objeto no qual o raio solar incide. Você pode dizer que o branco 
consiste na reunião de todas as cores; já o preto é a ausência de cor.
com_visual_WEB.indb 44 05/06/12 11:46
45
Comunicação Visual para Web
Unidade 2
A impressão dessas radiações sobre a retina do olho é o que 
distinguimos como cor. A cor pode ser definida como um 
comprimento de onda. 
O comprimento de onda para o vermelho claro é de 635 a 740 
nm (nanômetros), para o verde claro de 520 a 565 nm e para o 
azul claro de 450 a 500 nm.
Quando você vê um arco-íris, você está vendo a luz solar 
decomposta nessas 7 cores. Você sabe o que funciona 
como prisma nesse caso? As gotículas de água!
Figura 2.1 - Decomposição da luz
Fonte: Tavares (2011).
Seção 2 – A visão humana da cor
O olho humano é o órgão responsável pela recepção da visão. 
O olho é formado pelo globo ocular, que é uma esfera com 
aproximadamente 2,5 cm de diâmetro. Quando você fixa o olhar 
sobre um objeto, a imagem deste objeto atravessa a córnea, depois 
passa pela íris - que é responsável por regular a quantidade de luz 
recebida por meio da pupila. 
com_visual_WEB.indb 45 05/06/12 11:46
46
Universidade do Sul de Santa Catarina
Figura 2.2 - Globo Ocular 
Fonte: Missagia (2010).
Após atravessar o cristalino, a imagem é focada sobre a retina 
(invertida, depois o cérebro acerta isto!). Você conhece o 
mecanismo de uma máquina fotográfica? Nosso globo ocular 
pode ser comparado a uma máquina fotográfica: o cristalino seria 
a objetiva; a íris, o diafragma e a retina seria a placa ou película. 
Quando a imagem chega ao cristalino, ela é ajustada, sendo levada 
para trás ou para frente, permitindo que se projete sobre a retina.
Nossa retina está provida de duas espécies de células 
sensíveis à luz: os bastonetes e os cones. 
Cones e bastonetes
Os bastonetes permitem a visão para intensidades luminosas 
muito pequenas (noite, crepúsculo). Recebem apenas impressão de 
luminosidade e nenhuma impressão cromática. Por isso, quando 
saímos da cama à noite, no escuro, os objetos coloridos aparecem sem 
cor, nossa visão está por conta dos bastonetes. Os bastonetes (120 
milhões de células) não percebem diferenças finas de forma e cor.
Os cones permitem a impressão colorida em claridades média e 
grande (visão diurna), a imagem fornecida é mais nítida e detalhada. 
Existem três tipos de cones (três milhões de células) no olho humano 
e cada um distingue uma cor diferente: vermelho, verde ou azul.
Você sabia que a quantidade de cones vermelhos, 
verdes ou azuis é 40:20:um? É por esse motivo que sua 
sensibilidade para o azul é muito menor do que para 
o vermelho. Em outras palavras, você vê um número 
maior de tons de vermelho do que de azuis.
com_visual_WEB.indb 46 05/06/12 11:46
47
Comunicação Visual para Web
Unidade 2
Campo visual
A capacidade de percepção das cores está diretamente relacionada 
ao campo visual. A distribuição das células fotoreceptoras não 
é uniforme. Olhe a Figura 2.3. Na área central existem apenas 
células do tipo cone (1), no campo central (2) existem células do 
tipo cone e bastonetes, na área periférica encontram-se apenas 
bastonetes (3).
Na região da fóvea (1) ocorre a projeção da imagem do objeto 
focalizado. Nós enxergamos com nitidez somente objetos focados 
na fóvea. Essa permite que a luz atinja os fotorreceptores sem passar 
pelas demais camadas da retina, maximizando a acuidade visual.
Os bastonetes, ausentes na fóvea, são encontrados principalmente 
na retina periférica (2,3), sendo responsáveis pela transmissão de 
informações para as células ganglionares.
No fundo do olho está o ponto cego, insensível à luz, onde não 
há cones nem bastonetes. Dele emergem o nervo óptico e os 
vasos sanguíneos da retina.
Figura 2.3 - Campo Visual 
Fonte: Winckler; Borges; Basso (2000).
Segundo Winckler, Borges e Basso (2000), a área central da 
visão (1) é a responsável pela leitura e deve receber máxima 
percepção e contraste. O campo central (2) deve contrastar 
com a área central, com uma relação de 2:1, e o campo visual 
periférico não deve exceder 10:1. A área periférica percebe 
apenas movimentos e vultos.
É a capacidade de o 
olho distinguir entre 
dois pontos próximos 
e depende de diversos 
fatores, em especial 
do espaçamento dos 
fotorreceptores na retina 
e da precisão da refração 
do olho.
com_visual_WEB.indb 47 05/06/12 11:46
48
Universidade do Sul de Santa Catarina
Você já chegou ao cinema após o início da sessão? 
Saiu da antessala com muita claridade e entrou na sala 
de projeção exatamente no momento em que a cena 
estava muito escura? Como você se sentiu? Aquela 
cegueira momentânea é causada pela acomodação 
dos cones e pelo aumento da sensibilidade dos 
bastonetes. O inverso também acontece, imagine você 
saindo de uma sala com baixa luminosidade para um 
gramado em um dia de sol intenso.
Formação de imagens coloridas na retina
Durante todo o processo da percepção visual, o cristalino se 
modifica, adapta-se, de modo a focalizar sobre a retina a imagem 
do objeto visualizado. A acomodação e a convergência do 
cristalino dependem da cor do objeto visualizado. Isto acontece 
porque as ondas verde, azul e vermelha convergem a diferentes 
distâncias da retina. 
Na Figura 2.4 é possível observar que as ondas vermelhas 
convergem além da superfície da retina, enquanto os 
comprimentos de ondas verdes sobre a retina e azuis convergem 
antes da retina. Quando focalizamos objetos avermelhados, 
o cristalino se torna mais convexo, como se o objeto estivesse 
próximo do observador. Quando focalizamos um objeto azul, o 
cristalino fica menos convexo (mais relaxado), como se o objeto 
estivesse distante (WINCLER; BORGES; BASSO, 2000). 
Figura 2.4 - Foco sobre a retina 
Fonte:Borges (2003).
com_visual_WEB.indb 48 05/06/12 11:46
49
Comunicação Visual para Web
Unidade 2
O uso de cores intensas causa fadiga visual justamente pela 
necessidade constante de adaptação do cristalino. Imagine 
o uso do azul e do vermelho simultaneamente, as diferentes 
profundidades de foco seriam fatigantes!
A cegueira para algumas cores
Você sabia que o daltonismo é uma deficiência na visão que 
dificulta a percepção de uma ou de todas as cores (na sua variação 
mais comum, o daltônico não distingue o vermelho do verde)? 
O daltonismo é uma deficiência quase que 
exclusivamente masculina, para 10% da população 
masculina apenas 1% das mulheres apresentam o 
problema. No projeto Web, temos que considerar essa 
parcela da população, fazendo uso da luminância, de 
forma a permitir a diferenciação da cor.
Que tal você verificar sua acuidade visual? Qual número você vê 
nas esferas? Esse teste tenta detectar a deficiência da percepção 
da cor – o daltonismo.
Figura 2.5 - Teste de visão 
Fonte: Chostakovis (1999).
Imagino que agora você esteja se perguntando: como o indivíduo 
daltônico diferencia as luzes verdes e vermelhas do semáforo, já 
que, para esse indivíduo, as duas cores são apenas variações do 
cinza? Em tempo, os números nas esferas são o 5 e o 6.
com_visual_WEB.indb 49 05/06/12 11:46
50
Universidade do Sul de Santa Catarina
Seção 3 – Teoria das cores
Muitas teorias procuram explicar o fenômeno da visão 
cromática, mas todas elas se baseiam na observação de que o 
olho humano pode detectar quase todas as graduações de cores, 
quando as luzes monocromáticas vermelho, verde e azul são 
misturadas apropriadamente.
As cores se dividem em três grupos: primárias, 
secundárias e terciárias.
Cores primárias 
São as cores que não podem ser formadas por nenhuma mistura. 
São elas: azul, amarelo e vermelho. Quando misturadas de forma 
variável, produzem todas as cores do espectro.
Cores secundárias 
São formadas por duas cores primárias misturadas em partes iguais.
Cores terciárias 
São as intermediárias entre uma cor secundária e qualquer das 
duas primárias que lhe dão origem (PEDROSA, 1982).
Observe a Figura 2.6, construída por Fabris, em 1973. As cores 
primárias estão no centro, as secundárias (verde, laranja e violeta) 
no segundo triângulo. O terceiro ciclo se complementa com as 
cores terciárias. 
com_visual_WEB.indb 50 05/06/12 11:46
51
Comunicação Visual para Web
Unidade 2
Figura 2.6 - Círculo das cores
Fonte: Frabris; Germani (1973).
Cores complementares 
São as cores opostas no disco de cores. O vermelho é 
complementar do verde, o azul é complementar do laranja.
As cores complementares são usadas para dar força e equilíbrio a um 
trabalho, criando o máximo de contraste. As cores complementares 
são as que dão mais contrastes entre si, se queremos destacar um 
amarelo, devemos colocar junto dele um violeta.
Figura 2.7 - Cores complementares
Fonte: Elaboração da autora (2010). 
com_visual_WEB.indb 51 05/06/12 11:46
52
Universidade do Sul de Santa Catarina
Cores análogas 
São as que aparecem lado a lado no disco de cores. São análogas 
porque há nelas uma mesma cor básica. 
O amarelo-ouro e o laranja-avermelhado têm em 
comum a cor laranja. Elas são usadas para dar a 
sensação de uniformidade, profundidade, movimento, 
luz e sombra. 
Podemos considerar análogas três cores que se apresentam em 
sequência, no círculo das cores, como: o laranja, laranja-vermelho 
e vermelho.
Figura 2.8 - Círculo das cores
Fonte: Winckler; Borges; Basso (2000).
Figura 2.9 - Cores Análogas 
Fonte: Elaboração da autora (2010).
O contraste das cores
A sensação da cor depende de três parâmetros: o 
croma, a intensidade e o matiz (GUIMARÃES, 1997).
com_visual_WEB.indb 52 05/06/12 11:46
53
Comunicação Visual para Web
Unidade 2
Matiz 
Segundo preceitos da colorometria, o matiz é uma das três 
propriedades da cor. Ela permite classificar e distinguir uma cor 
de outra. As outras duas propriedades que apoiam essa distinção 
são a saturação e a luminosidade.
Quando estudamos o matiz na teoria das cores, o matiz se refere 
à cor “pura”, sem adição de branco ou preto. 
Croma
É a qualidade específica de saturação da cor, que indica o seu grau 
de pureza. Mas o que é saturação? Imagine um copo de leite 
puro. Agora imagine você adicionando a esse leite cinco colheres 
de chocolate em pó. O leite vai ficar bastante escuro. Agora você 
começa adicionando leite a essa mistura, a cor vai clareando, mas, 
ainda, é marrom, quanto mais leite você adicionar mais claro 
vai ficar o leite. Se você adicionar 10 litros de leite à mistura, é 
provável que o líquido fique quase branco.
Podemos dizer que a saturação refere-se à quantidade 
de branco em uma cor.
Resumindo, a saturação indica a maior ou menor intensidade da 
tonalidade, se a cor é pura ou esbatida. A cor saturada (pura) não 
contém a cor preta nem a branca. 
Mas quando ocorre o contrário e aumentamos a saturação, a 
imagem acaba por ficar quase com um aspecto irreal.
Luminosidade
É a quantidade relativa de claro ou escuro em uma escala do preto 
ao branco. É fundamental para a percepção de profundidade.
com_visual_WEB.indb 53 05/06/12 11:46
54
Universidade do Sul de Santa Catarina
Contraste 
É a base à distinção da forma, tamanho, posição, volume e 
aparência dos objetos. Ele pode ser obtido por meio de diferenças 
do matiz e iluminação. O contraste pode ser usado para alterar a 
sensação de tamanho entre objetos (GUIMARÃES, 1997). 
Um exemplo é quando queremos parecer mais magros e usamos 
roupa preta. As cores contrastantes são diretamente opostas no 
disco das cores; como o azul e o amarelo.
Figura 2.10 - Contraste das cores
Fonte: Color Voodoo (2010).
Compare os diferentes efeitos produzidos pelo contraste do fundo 
para o mesmo quadrado vermelho. 
O quadrado vermelho parece mais brilhante (preto), menos brilhante 
(laranja) ou ainda maior (preto), de acordo com o fundo utilizado.
Seção 4 – Sistemas de representações das cores
As cores são representadas de maneira diferente se o dispositivo 
reflete ou emite luz. Objetos que não emitem luz refletem uma 
parte da luz que incide sobre eles e absorvem a outra parte. 
A sensação da cor é relativa e variável, segundo a natureza da fonte 
luminosa e do objeto. Se uma laranja-lima é iluminada por uma luz 
azul, essa se transforma em verde; nesse caso, a reflexão do amarelo 
se soma à da luz azul e ambas as cores são refletidas misturadas.
Assim, os dispositivos que representam cores seguem 
o modelo subtrativo, quando não emitem luz, e 
aditivos, quanto emitem luz.
com_visual_WEB.indb 54 05/06/12 11:46
55
Comunicação Visual para Web
Unidade 2
Dispositivos que misturam pigmentos coloridos (impressora, 
Scanner), seguem o modelo subtrativo, cujas cores primárias são: 
amarelo, magenta e ciano. A mistura de todas as cores produz 
o preto. Dispositivos baseados na emissão de luz (monitor, 
datashow) seguem o modelo aditivo, cujas cores primárias são 
vermelho, verde e azul-violeta. O branco é obtido pela mistura de 
todas as cores.
São modelos aditivos o HSV, o HLS e RGB. Entre os modelos 
subtrativos, o mais empregado é o CMYK. O sistema RGB é o 
padrão de cores na WWW. É um sistema cartesiano (x, y, z), em 
que cada cor primária (Red, Green e Blue) representa um dos 
eixos do cubo RGB. O modelo CMYK é formado pelas cores ciano 
(Cyan), magenta (Magenta), amarelo (Yellow) e preto (blacK). Ele é 
utilizado em dispositivos de impressão.
Há diferenças entre cores representadas em monitores do 
mesmo padrão RGB. Diversos fatores causam as diferenças, 
entre eles, o gamut, ou seja, o grau de contraste entre os valores 
intermediários de cinza de uma imagem. O valor de gamut do 
Macintosh é de 1.8 e de um PC é de 2.2. Imagens geradas em um 
Mac parecerão muito mais escuras na plataforma PC, enquanto 
as geradas no PC parecerão apagadas e sem brilho no Mac.
Seção 5 – Definição da cor de fundo da página
Segundo ateoria de detecção de sinais, o cérebro humano 
interpreta e organiza a informação que recebe em forma ótima, 
quando no campo visual há um número mínimo de cores e 
formas: quanto menos “ruído”, mais claro é o “sinal”.
Quando você escolhe o padrão de cores de um site, é importante 
observar alguns aspectos relacionados por Shneirman (2000):
 � Assunto da página: é um site voltado ao entretenimento? 
É um site voltado para venda de imóveis?
“Signal detection theory”, 
um modelo estatístico 
elaborado na década de 50.
com_visual_WEB.indb 55 05/06/12 11:46
56
Universidade do Sul de Santa Catarina
 � Público-alvo: há algum fator de homogeneização? Sexo 
(maioria homens ou mulheres), idade (é uma página que 
pretende atingir o público infantil ou jovens procurando 
diversão noturna), experiência (os usuários são 
funcionários de uma empresa com ou sem experiência 
no uso da internet/intranet)? Existem outros fatores a 
ser considerados? Ou os usuários formam uma plateia 
altamente heterogênea? (usuários de um sistema de caixa 
eletrônico de um banco, por exemplo).
 � Ambiente: qual é o grau de estresse ao qual os usuários 
estão submetidos (elevado, como em um sistema de 
bolsas de valores?)? Qual é a luminosidade do ambiente? 
Veja, a seguir, alguns exemplos.
Figura 2.11 - Website da Disney 
Fonte: Disney (2010).
com_visual_WEB.indb 56 05/06/12 11:46
57
Comunicação Visual para Web
Unidade 2
Figura 2.12 - Website da banda Sepultura 
Fonte: Sepultura (2010). 
A cor básica de fundo (o Matiz) da página inicial do site Disney 
é azul. Essa é uma cor que, além de transmitir confiança, calma 
e estabilidade, é perfeitamente visível para a grande maioria da 
população. Note que, apesar do impacto visual, não há muitas 
cores: fora o azul básico, utilizaram-se o verde, branco e laranja 
(todas cores positivas, emocionais). O negro foi abolido da página. 
As áreas com menor saturação da cor básica estão nas bordas.
O site do grupo de rock Sepultura é basicamente negro. Combina 
perfeitamente com o grupo e com a expectativa dos usuários do 
site, fãs da banda. Note que, novamente, há poucas cores.
O site “Mais Você” é adequado ao consumidor principal: a 
mulher. Cores suaves, femininas, esteticamente limpo.
Figura 2.13 - Website Mais Você 
Fonte: Mais Você (2007).
com_visual_WEB.indb 57 05/06/12 11:46
58
Universidade do Sul de Santa Catarina
Observe, agora, duas versões diferentes de uma mesma página: 
Figura 2.14 - Website Lancôme 
Fonte: Lancôme (2007).
Figura 2.15 - Website Lancôme 
Fonte: Lancôme (2007).
A versão Figura 2.14 é suave, delicada, de uma feminilidade pouco 
agressiva. Já a versão da Figura 2.15 modificou completamente a 
mensagem: a feminilidade é agressiva, as cores são fortes, vibrantes, 
até o vermelho (associado à paixão, ao sexo, ao amor), que não estava 
presente em nenhum dos seus matizes na versão anterior. Observe 
como a Figura 2.14 é parte do conjunto e não cria desvio de atenção. 
Já a Figura 2.15 provoca tanto impacto que é quase impossível 
observar o todo sem deixar de notar a foto, que surtirá um impacto 
muito maior no leitor. Observe que, além das cores e da postura das 
imagens, também o alinhamento do texto foi modificado.
com_visual_WEB.indb 58 05/06/12 11:46
59
Comunicação Visual para Web
Unidade 2
Nos 5 sites apresentados, observamos que a escolha das cores 
considera, principalmente, o perfil do público-alvo e a economia 
na quantidade de cores. Marmion (2005) sugere ser possível 
estabelecer as seguintes orientações:
 � utilize a menor quantidade possível de cores para o fundo 
de seu site;
 � se for utilizar mais de uma cor, utilize cores próximas do 
espectro, que não criem contraste (fator de distração);
 � a percepção da cor é afetada pela luminosidade do 
ambiente. Considere as fontes de iluminação — naturais 
e artificiais — do local;
 � se o fundo é uma imagem, considere que, durante o 
tempo de carga, elementos frontais (foreground) podem 
não ser visíveis por falta de contraste;
 � utilize fundos simples para não comprometer a 
compreensão da página, a legibilidade do texto e o tempo 
para ser carregada;
 � o fundo não deve chamar mais atenção do que a 
informação. 
Figura 2.16 - Site da Banda Buenos Aires 
Fonte: Buenos Aires Rock (2010).
Na figura acima, o fundo utilizado pela banda chama mais 
atenção do que o texto com as informações da banda. A 
legibilidade é prejudicada dificultando a leitura e a atenção.
com_visual_WEB.indb 59 05/06/12 11:46
60
Universidade do Sul de Santa Catarina
Seção 6 – Recomendações para o uso de cores na Web
Como você já viu, as cores exercem diferentes efeitos fisiológicos 
sobre o organismo humano e tendem a produzir vários juízos e 
sentimentos. 
A cor é um elemento fundamental em qualquer processo 
de comunicação e merece uma atenção especial.
São apresentadas, a seguir, algumas recomendações sobre o 
uso da cor, coletadas em Parizotto (1997), Winckler (2002), 
Robertson (1993) e Shneidermann (2000):
Recomenda-se o uso de um grupo limitado 
de cores, dando ao usuário a opção de mudá-
las, máximo de “cinco mais ou menos duas”.
Desse modo, as páginas de um mesmo site estarão 
mais propensas a ter um “padrão” consistente.
Use a cor como uma forma de informação 
adicional ou aumentada.
Evite confiar na cor como o único meio de expressar um 
valor ou uma função particular. 
Use cor para realçar em vez de usar 
sublinhado (e use sublinhado ao invés de 
itens piscando). 
Restrinja o uso do sublinhado para links, para não 
confundir o usuário.
Sempre que possível, evite usar cores muito 
quentes, tais como o rosa e o magenta. 
As cores muito quentes parecem pulsar na tela e ficam 
difíceis de focalizar. 
Se for usado um fundo colorido, selecione as 
cores do texto de modo a obter o contraste 
mais forte entre o texto e o fundo.
Isso aumenta a visibilidade e a legibilidade do texto. 
Recomenda-se o uso mnemônico da cor.
O uso mnemônico da cor é empregado respeitando 
os estereótipos para criar fortes associações a fim de 
ajudar no reconhecimento, na lembrança e no tempo 
de busca. No site Submarino, percebemos a divisão das 
seções fazendo uso da cor para diferenciá-las, a seção de 
brinquedos é rosa, a de eletrônicos é azul, a seção abaixo é 
a de games.
com_visual_WEB.indb 60 05/06/12 11:46
61
Comunicação Visual para Web
Unidade 2
Figura 2.17 - Site Submarino
Fonte: Submarino (2010).
Use cores brilhantes e contrastantes com 
cautela. 
Esses elementos atraem a atenção do usuário e o seu 
emprego deve ser reservado para áreas importantes, 
caso contrário, o usuário pode achar mais difícil saber 
para onde olhar e fica confuso. 
Use cores monocromáticas para o texto, 
sempre que for possível.
As cores monocromáticas são mais nítidas, aumentando 
a legibilidade e visibilidade do texto.
Recomenda-se o uso de uma cor neutra para 
fundos. 
As cores neutras (por exemplo, cinza-claro) aumentam a 
visibilidade das outras cores.
Não use simultaneamente alto croma e cores 
que estejam muito distantes no espectro solar. 
Para relações figura-figura e muitas figura-fundo, fortes 
contrastes de vermelho/verde, azul/amarelo, verde/azul 
e ve rmelho/azul criam vibrações, ilusões de sombras e 
imagens posteriores.
Use um código de cores consistente e familiar, 
com referências apropriadas. 
 Vermelho: pare, perigo, quente, fogo;
 Amarelo: cuidado, devagar, teste;
 Verde: ande, OK, livre, vegetação, segurança;
 Azul: frio, água, calmo, céu;
 Cores quentes (amarelo, laranja, vermelho, violeta): 
ação, resposta requerida, proximidade;
 Cores frias (azul, turquesa, verde-mar,verde-alface): 
status, informação de fundo, distância;
 Cinzas, branco e azul: neutralidade. 
com_visual_WEB.indb 61 05/06/12 11:46
62
Universidade do Sul de Santa Catarina
Use a cor para aumentar a informação 
mostrada em preto e branco.
No que concerne ao aprendizado e compreensão, a cor 
é superior ao preto e ao branco em termos dotempo 
de processamento e de reações emocionais, mas não há 
diferença na habilidade em interpretar a informação. 
A cor é mais apreciável e a memória para informação 
colorida também parece ser superior àquela em preto e 
branco.
Recomenda-se projetar primeiramente em 
preto e branco e, então, adicionar a cor. 
A cor aumenta o processamento cognitivo e visual de 
uma informação que funciona bem em preto e branco, 
pois ajuda a localizar, classificar e associar imagens. 
Evite o uso de blink
O uso intensivo de piscar (blink) um texto ou imagem 
causa fadiga visual, dependendo das cores usadas para 
fundo e texto ou imagem, o olho precisa reposicionar 
o correspondente sensor da cor a ser usada, em cada 
instante do efeito de piscar, ou, dependendo das cores 
usadas, reposicionar o foco a cada instante.
Evite fundos escuros 
Fundo preto não é recomendado, pois há poucas cores 
que contrastam e ele causa cansaço visual. No caso 
de impressão em P & B, a cor usada para o texto ou 
imagem pode ser convertida para escuro e se confundir 
com o fundo (além de gastar grande quantidade de 
toner/tinta). 
Não use cores alternativas para links
Podem-se acrescentar cores para casos alternativos, 
como (mantendo-se os padrões): 
 Link ainda não visitado, que fica na mesma página 
(âncora) – verde;
 Link já visitado na mesma página – rosa;
 Link para o nodo hierarquicamente superior - laranja/
amarelo âmbar. 
Não torne a tela muito brilhante ou escura Use as cores brilhantes em áreas pequenas e cores suaves em áreas maiores.
Procure evitar cores que juntas causam 
ilusões óticas, como:
 verde/vermelho;
 azul/amarelo;
 verde/azul;
 vermelho/azul;
com_visual_WEB.indb 62 05/06/12 11:46
63
Comunicação Visual para Web
Unidade 2
Use combinações legíveis para texto/fundo: 
 preto/branco;
 branco/preto;
 amarelo/preto;
 verde/preto;
 branco/vermelho;
 preto/amarelo;
 preto/verde;
 ciano/magenta;
 branco/marrom;
 amarelo/marrom;
 verde/marrom;
 ciano/marrom;
 magenta/marrom.
Use as cores da fóvea e periféricas 
apropriadamente; a fóvea fica na região 
central da retina; é composta de cones 
sensíveis ao detalhe:
 use azul para áreas grandes ou formas pequenas; azul 
é bom para fundo de tela;
 use vermelho e verde no centro do campo visual e não 
na periferia;
 use preto, branco, amarelo e azul na periferia do 
campo visual.
Lembrar que cor mal utilizada é pior do que não usar cores.
Seção 7 – Cores seguras da web
Atualmente, temos computadores capazes de mostrar milhões de 
cores simultaneamente. Isto nem sempre foi assim. Até a década 
de 90, a maioria dos equipamentos apresentava apenas 256 cores 
diferentes de cada vez. Nesse caso, todas as cores eram simuladas 
por essas 256, causando manchas e distorções. Dessas 256, 216 
são chamadas de cores seguras da web.
A utilização das cores seguras é feita pela utilização de cores 
cujos códigos hexadecimais usam combinações dos números, 
indicados no quadro seguinte:
RGB 00 51 102 153 204 255
Hex 00 33 66 99 CC FF
Consulte no anexo 1, a Figura 2.18 referente ao quadro 
que contém as 216 combinações seguras, com os seus 
códigos hexadecimais.
com_visual_WEB.indb 63 05/06/12 11:46
64
Universidade do Sul de Santa Catarina
Síntese
Ao concluir esta unidade, você traz como bagagem conceitos 
relacionados à teoria das cores e aspectos de sua utilização. Você 
aprendeu que a visão humana da cor depende de aspectos fisiológicos 
e sua utilização eficiente deve considerar essas limitações.
Durante o estudo, verificou que as cores são reconhecidas em 
posições diferentes da retina, antes (azul), depois (vermelho) 
e sobre a retina (verde). Este reconhecimento faz com que o 
usuário, ao se deparar com interfaces onde ocorre a mistura 
destas três cores, sinta fadiga visual. 
Ao escolher a cor da página, é importante determinar o assunto 
da página, o público-alvo e o ambiente no qual o site será 
utilizado. A determinação desses fatores apoia a escolha das cores 
que interferem diretamente na aceitação do seu site pelo cliente.
O uso de contrastes, luminosidades e uma combinação assegura 
melhorias na comunicação com o internauta, transformando a cor 
em estímulo visual. 
A cor pode ser usada para agrupar itens, transmitir informações e 
alertar o usuário sobre uma determinada situação. Para que essas 
ações ocorram efetivamente, foram apresentadas, na unidade, 
algumas recomendações que procuram preservar o bom uso da 
cor na web, relacionadas ao número de cores a serem utilizadas, 
características de fundos considerados desejáveis, utilização de 
códigos de cores familiares, entre outros.
Outro aspecto observado na unidade foi o uso da paleta de 
cores seguras para web (216 combinações). Esse uso garante ao 
projetista que o usuário enxergue na tela de seu computador as 
cores que você está utilizando no projeto.
com_visual_WEB.indb 64 05/06/12 11:46
65
Comunicação Visual para Web
Unidade 2
Atividades de autoavaliação
1) A acuidade visual é dependente de vários fatores. Quais são eles?
2) Relacione as propriedades abaixo com suas respectivas células: (B) para 
bastonetes e (C) para cones:
a) ( ) permitem ao ser humano a visão diurna de forma nítida e colorida.
b) ( ) não fornecem nenhuma impressão cromática.
c) ( ) são as células responsáveis pela visão com baixa luminosidade.
d) ( ) são células que se distinguem por 3 tipos: o vermelho, o verde 
e o azul.
e) ( ) estas células aparecem em grande número na área periférica do 
olho.
f) ( ) estas células aparecem em grande número na área central.
g) ( ) preenchem completamente a região da fóvea, a área 
responsável pela leitura.
3) Como são formadas as cores secundárias?
com_visual_WEB.indb 65 05/06/12 11:46
66
Universidade do Sul de Santa Catarina
4) Qual a situação em que pode ser interessante o uso da cor 
complementar ou da cor análoga?
5) Quais os três fatores que devem ser considerados como fundamentais 
na escolha das cores de um site?
Saiba mais
Não deixe de pesquisar na internet o site Color in Motion 
O site é uma experiência interativa sobre a comunicação e 
o simbologismo da cor. Você vai aprender em que situações 
determinadas as cores expressam uma informação, suas cores 
complementares e como elas são utilizadas em diferentes países.
Que tal brincar com um aplicativo que gera esquemas e 
combinações de cores? Cada esquema se baseia em uma cor 
usada como base, que é combinada e complementada por cores 
adicionais, calculadas por meio de algoritmos, que permitem a 
melhor combinação ótica. Esta ferramenta Color Scheme está 
disponível em <http://wellstyled.com/tools/>.
Veja também Color, Contrast & Dimension, no seguinte 
endereço: <http://poynterextra.org/cp/colorproject/color.html>. 
Divirta-se !!
com_visual_WEB.indb 66 05/06/12 11:46