Pense em um mundo onde não

houvesse cores. Como seria?

No mínimo monótono e triste.
Não é mesmo?
Em seu dia a dia, você observa tons e cores o tempo todo, mas já
parou para entender o que as cores significam?
 Cor ou tom é resultado da
existência da luz, ou seja, se a luz
não existisse, não haveria cores.
 O preto é a Já o branco
ausência de luz. resulta de algo
Ele é resultado que reflete toda
de algo que a luz, logo é a
absorve toda a existência de luz.
luz e não reflete.
A luz é fundamental para que o olho humano
perceba as cores, que só existem e só são vistas,
portanto, com a presença da luz. Essa relação
entre luz e cor na visão humana ocorre porque a
cor é produto de condições fisiológicas dos olhos.

Cada objeto visualizado por uma pessoa absorve

a luz que incide sobre ele e a reflete, de maneira
específica, dependendo do material que o
compõe. Isso ocorre no nível de ondas
eletromagnéticas de luz (conceito da física) que
estão em certas frequências.

Essas frequências de luz refletida são percebidas

pelos olhos do ser humano e geram a percepção
das diferentes cores.

Fonte: AUTOR DESCONHECIDO. Olho humano e cores. Universidade de São Paulo, s.d. Disponível em:
<http://disciplinas.stoa.usp.br/pluginfile.php/54518/mod_resource/content/1/Olho%20humano%20e%20cores.pdf>. Acesso em: 06 jun. 2015.
O ser humano percebe as cores em sete diferentes espectros visíveis, que formam as cores do
arco-íris: violeta, azul, ciano, verde, amarelo, laranja e vermelho.

A cor é tão importante para o ser humano que ela é capaz de gerar emoções e expressões de
personalidade. Ao visualizar uma cor, uma pessoa a associa a experiências, sensações, locais
ou pessoas, dependendo de sua familiaridade com essa cor.

Fonte: CARNEIRO, Teresa Cristina Teixeira Vieira. Percepção das cores. Universidade Federal Fluminense, s.d. Disponível em: <http://www2.ic.uff.br/~aconci/curso/percep~1.htm>. Acesso em: 06 jun. 2015.
Quando enxerga algo, o cérebro humano identifica
primeiro a forma, em seguida a cor e somente então
o conteúdo do que vê. Ou seja, é por meio da cor
que os elementos visualizados são diferenciados
entre si, gerando significado para o que está vendo
sendo visto.

Por isso, reflita sobre qual significado você espera

transmitir por meio da imagem que está criando ou
editando, para utilizar adequadamente as cores e
obter o resultado que espera.

Fonte: WHEELER, Alina. Design de identidade da marca: guia essencial para toda a equipe de
gestão de marcas. 3. ed. Porto Alegre: Bookman, 2012.
Como o curso trata do design, vamos
analisar as cores em um dos nossos
instrumentos de trabalho: o monitor.

Os monitores, de maneira geral,

produzem imagens na tela, emitindo luz
vermelha, verde e azul, que podem ser
emitidas em intensidades variadas. As
luzes coloridas se sobrepõem umas às
outras, o que permite ao monitor exibir
milhões de combinações de cores.
Ao se pensar em utilizar cores para Web
é preciso conhecer o modelo de cor
RGB. RGB vem de Red, Green e Blue.
No RGB, a cor vem direto da fonte de luz para nossos olhos,
sem a interferência de quaisquer objetos. Devido a esse fato, a
cor RGB age de forma diferente dos outros modos de cor.
Cada cor individual tem um valor, chamado de intensidade da
cor, que pode variar de 0 a 255.

Além de utilizar o modelo de cor RGB e ouvir falar nele em

quase toda referência à Web, você também verá referência de
cores, principalmente em cores de fonte, fundos de páginas e
de tabelas descritas em código hexadecimal. O (X) HTML que
descreve sua página web traduz qualquer cor usada para o seu
código hexadecimal.
 Você pode estar se perguntando: o que significa hexadecimal?

É o código que tem como base 16 dígitos, onde números e letras representam cores.

Hexadecimal é o código mais utilizado na web e tem como base 16 dígitos, ou seja 0, 1, 2, 3, 4, 5,
6, 7, 8, 9 e, ao invés de se utilizar 10, 11, 12, 13, 14, 15, convencionou-se utilizar a, b, c, d, e, f. Ou seja,
dezesseis dígitos simples, ficando números e letras na representação das cores. Exemplos:
A cor #000000 é o preto. #ffffff é o branco. #0000FF o azul. #C0C0C0 um tom de cinza.

O símbolo # (tralha) identifica o código hexadecimal.

Um detalhe importante: cores que tenham seus caracteres duplicados como #FF0000, #000000,
#FFFFFF, podem ser digitadas como #F00, #000, #FFF, sem nenhum problema.
 Vamos conhecer as escalas de cores?

Escala de vermelho

Na escala de vermelho, para obtermos variações mais Para obter variações para o vermelho mais escuro,
claras, mantemos o vermelho em 255 e alteramos em segue o inverso. Basta alterar o vermelho, mantendo o
iguais proporções o verde e o azul: verde e azul em 00, finalizando com o vermelho puro
(255, 00, 00):
 Vamos conhecer as escalas de cores?

Escala de verde

Iniciamos nesta escala um clareamento Para obter uma gradação com o

a partir da cor pura, mantendo o verde verde escuro, alteramos a mesma Verde azulado:
em 255, alterando o vermelho e o azul cor RGB, mantendo inalterados o
com valores idênticos: vermelho e o azul:
 Vamos conhecer as escalas de cores?

Para clarear o azul, mantemos o
RGB, o valor do azul e alteramos o
vermelho e o verde:
Escala de azul
Temos aqui outra variação, porém
partimos de uma coloração mais escura Escala partindo do azul violetado:
(alterando as três cores até a 5ª variação
de azul) para a clara, mantendo no RGB o
valor do azul fixo:
 Vamos conhecer as escalas de cores?

Escala de laranja

Na primeira tabela, temos a escala Tom mais escuro de laranja a um tom Outro tom mais escuro de laranja
do laranja para um tom mais claro: mais próximo do amarelo: para um laranja mais forte:
 Vamos conhecer as escalas de cores?

Escala de cinza

Podemos estabelecer uma escala de cinza

excluindo o preto (RGB 0,0,0 – hexadecimal
#000000) e o branco (RGB 255,255,255 e
hexadecimal #FFFFFF) alterando, em
conjunto, os três pares do código:
O padrão RGB gera 16 milhões de cores
(16.777.216 para ser mais exato), podendo ser
utilizadas em código hexadecimal. Porém nem
todos os monitores podem exibir todas. Se
você utilizar uma cor que está fora das
contidas na paleta segura RGB, alguns
sistemas podem exibir uma cor diferente
daquela que você escolheu para o seu layout
e, como consequência, o visual ficará péssimo.

Surgiu, então, a paleta Websafe. Ela é

composta por 216 cores que são reconhecidas
por todos os monitores e, seguramente, com
ela, você poderá compor páginas web e
aplicá-la no tratamento de imagens.
Aplicando o código hexadecimal, utilizaríamos cores
como #B0C4DE, #CD853F, #DDA0DD, etc. Você já sabe
que o referido código é composto pelos caracteres 0, 1, 2,
3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

As cores da paleta Websafe são compostas apenas por

0, 3, 6, 9, C, F. Utilizadas sempre de par em par: #330000,
009999, 00CCCC, #FF33FF sempre com pares idênticos.

Um exemplo que não se aplica seria: #C71585, 9370D8...

Paleta Websafe
Ao utilizar as cores para a elaboração do layout de um site, deve-se
conhecer sobre o significado das cores.
 PRETO

• Associação material: sujeira, sombra, enterro, noite, carvão, fumaça, condolência, morto,
fim, coisas escondidas.

• Associação afetiva: mal, miséria, pessimismo, sordidez, tristeza, desgraça, dor, temor,
intriga.

• Deriva do latim niger (escuro, preto, negro). Nós utilizamos o vocábulo “preto”, cuja
etimologia é controvertida. É expressivo e angustiante ao mesmo tempo. É alegre quando
combinado com certas cores. Às vezes tem conotação de nobreza, seriedade.
 CINZA

• Associação material: pó, chuva, ratos, neblina, máquinas, mar sob tempestade.

• Associação afetiva: tédio, tristeza, decadência, velhice, desânimo, seriedade, sabedoria,

passado, finura, pena, aborrecimento, carência vital.

• Do latim cinicia (cinza) ou do germânico (gris, cinza); nós utilizamos o termo de origem
latina. Simboliza a posição intermediária entre a luz e a sombra. Não interfere junto às cores
em geral.
 BRANCO

• Associação material: batismo, casamento, cisne, lírio, primeira comunhão, neve, nuvens em
tempo claro, areia clara.

• Associação afetiva: ordem, simplicidade, limpeza, bem, pensamento, juventude, otimismo,

piedade, paz, pureza, inocência, dignidade, afirmação, modéstia, deleite, despertar,
infância, alma, harmonia, estabilidade.

• A palavra banco vem do germânico blank (brilhante). Simboliza a luz e nunca é considerado
cor, pois de fato não é. Para os orientais é a morte, o fim, o nada. Representa também, para
nós ocidentais, a iminência do fim, isto é, o medo, ou representa um espaço (entrelinhas).
 VERMELHO

• Associação material: rubi, cereja, guerra, lugar, sinal de parada, perigo, vida, sol, fogo,
chama, sangue, combate, lábios, mulher, ferida, rochas vermelhas, conquista,
masculinidade.

• Associações afetivas: dinamismo, força, baixeza, energia, revolta, movimento, barbarismo,

coragem, furor, esplendor, intensidade, paixão, vulgaridade, poderio, vigor, glória, calor,
violência, dureza, excitação, ira, interdição, emoção, ação, agressividade, alegria,
comunicativa, extroversão.

• Vermelho vem do latim vermiculos (verme, inseto). Da cochonilha, um inseto, se extrai uma
substância escarlate, o carmim, e chamamos essa cor de carmesim [do árabe: qimezi
(vermelho bem vivo ou escarlate)]. Simboliza uma cor de aproximação, de encontro.
 VERMELHO ALARANJADO

• Associação material: ofensa, agressão, competição, operacionalidade, locomoção.

• Associação afetiva: desejo, excitabilidade, dominação, sexualidade.

 LARANJA

• Corresponde ao vermelho moderado.

• Associação material: outono, laranja, fogo, pôr do sol, luz, chama, calor, festa, perigo,
aurora, raios solares, robustez.

• Associação afetiva: força, luminosidade, dureza, euforia, energia, alegria, advertência,

tentação, prazer, senso de humor.

• Laranja origina-se do persa narang, por meio do árabe naranja. Simboliza o flamejar do fogo.
 AMARELO

• Associação material: flores grandes, terra argilosa, palha, luz, topázio, verão, limão, chinês,
calor de luz solar.

• Associação afetiva: iluminação, conforto, alerta, gozo, ciúme, orgulho, esperança,

idealismo, egoísmo, inveja, ódio, adolescência, espontaneidade, variabilidade, euforia,
originalidade, expectativa.

• Amarelo deriva do latim amaryllis. Simboliza a cor da luz irradiante em todas as direções.
 VERDE

• Associação material: umidade, frescor, diafaneidade, primavera, bosque, águas claras,

folhagem, tapete de jogos, mar, verão, planície, natureza.

• Associação afetiva: adolescência, bem-estar, paz, saúde, ideal, abundância, tranquilidade,

segurança, natureza, equilíbrio, esperança, serenidade, juventude, suavidade, crença,
firmeza, coragem, desejo, descanso, liberalidade, tolerância, ciúme.

• Verde vem do latim viridis. Simboliza a faixa harmoniosa que se interpõe entre o céu e o
sol. Cor reservada e de paz repousante. Cor que oferece o desencadeamento de paixões.
 VERDE AZULADO

• Associação afetiva: persistência, arrogância, obstinação, amor próprio, elasticidade da

vontade.
 AZUL

• Associação material: montanhas longínquas, frio, mar, céu, gelo, feminilidade, águas
tranquilas.

• Associação afetiva: espaço, viagem, verdade, sentido, afeto, intelectualidade, paz,

advertência, precaução, serenidade, infinito, medição, confiança, amizade, amor, fidelidade,
sentimento profundo.

• Azul tem origem no árabe e no persa lázúrd, por lazaward (azul). É a cor do céu sem
nuvens. Dá a sensação de movimento para o infinito.
 ROXO

• Associação material: noite, janela, igreja, aurora, sonho, mar profundo.

• Associação afetiva: fantasia, mistério, profundidade, eletricidade, dignidade, justiça,

egoísmo, grandeza, misticismo, espiritualidade, delicadeza, calma.

• Roxo nos vem do latim russes (vermelho-carregado). Cor que possui um forte poder
microbicida.
 PÚRPURA

• Associação material: vidência, agressão, furto, miséria.

• Associação afetiva: engano, calma, dignidade, autocontrole, estima, valor.

• Púrpura deriva do latim purpura. Simboliza a dignidade real, cardinalícia.

 VIOLETA

• Associação afetiva: engano, miséria, calma, dignidade, autocontrole, violência, furto, agressão.

• Violeta é diminutivo do provençal antigo viula (viola). Essa cor possui bom poder sonífero.
 MARROM

• Associação material: terra, águas lamacentas, outono, doença, sensualidade, desconforto.

• Associação afetiva: pesar, melancolia, resistência, vigor.

• Marrom, do francês marron (castanho).

Agora vamos para a influência das cores na vida.

De acordo com a idade, a classe social, o sexo e a região onde habita, o indivíduo apresenta certas
preferências por cores. O psicólogo Bamz (1980) realizou uma pesquisa com pessoas de diferentes idades e
chegou ao quadro a seguir:

Vermelho - 1 a 10 anos: Idade da efervescência e da espontaneidade.

Laranja - 10 a 20 anos: Idade da excitação, imaginação, aventura.

Amarelo - 20 a 30 anos: Idade da força, potência, arrogância.

Verde - 30 a 40 anos: Idade da diminuição do “fogo” juvenil.

Azul - 40 a 50 anos: Idade do pensamento e da inteligência.

Lilás - 50 a 60 anos: Idade do juízo, do misticismo e da lei.

Roxo - 60 em diante: Idade do saber, da experiência e da benevolência.

Agora vamos para as representações de cores.

O círculo cromático, como o próprio nome diz, é um

círculo onde estão definidas as cores e suas variações,
considerando as cores visíveis ao olho humano.
Outra representação é pela Harmonia Monocromática.

Ela é a harmonia resultante de uma mesma cor da roda das

cores. As tonalidades podem mudar, mas todas ficam no
mesmo matiz da roda das cores.

O esquema ou harmonia monocromática utiliza variações de

luminosidade e saturação de uma mesma cor. Essas
harmonias luzem simples e elegantes, de fácil percepção ao
observador especialmente quando se trata de tons azuis e
verdes.

A cor principal pode ser combinada com cores neutras ou

preto e branco. No entanto, pode ser difícil ressaltar os
elementos mais importantes quando se utiliza essa harmonia.
 VERMELHO
(PRIMÁRIO)
VERMELHO-VIOLETA VERMELHO LARANJA
(TERCIÁRIO) (TERCIÁRIO)

VIOLETA LARANJA
(SECUNDÁRIO) (SECUNDÁRIO)
Agora vamos para a Harmonia Análoga.
AZUL AMARELO
É a harmonia formada de uma cor primária combinada com VIOLETA LARANJA
duas cores vizinhas na roda das cores. Uma cor é utilizada (TERCIÁRIO) (TERCIÁRIO)
como a dominante enquanto as adjacentes são utilizadas
para enriquecer a harmonia.
AZUL AMARELO
(PRIMÁRIO) (PRIMÁRIO)

AZUL VERDE AMARELO VERDE

(TERCIÁRIO) (TERCIÁRIO)
VERDE
(SECUNDÁRIO)
 VERMELHO
(PRIMÁRIO)
VERMELHO-VIOLETA VERMELHO LARANJA
A Harmonia Complementar ocorre quando combinamos (TERCIÁRIO) (TERCIÁRIO)
cores opostas na roda das cores. Em outras palavras, são
cores que se encontram simétricas em relação ao centro da VIOLETA LARANJA
roda. O Matiz varia em 180º entre um e outro. (SECUNDÁRIO) (SECUNDÁRIO)
Essa harmonia funciona ainda melhor se são combinadas
cores frias e cores quentes, como vermelho com verde-azul AZUL AMARELO
ou azul com amarelo. Uma harmonia complementar é, VIOLETA LARANJA
intrinsecamente, uma harmonia de contraste. (TERCIÁRIO) (TERCIÁRIO)

É importante, quando utilizar essa harmonia, escolher uma

cor dominante e utilizar a complementar para acentos e AZUL AMARELO
(PRIMÁRIO) (PRIMÁRIO)
toques de destaque. Por exemplo, utilizar uma cor para
fundo e a outra para destacar os elementos de importância.

AZUL VERDE AMARELO VERDE

(TERCIÁRIO) (TERCIÁRIO)
VERDE
(SECUNDÁRIO)
 VERMELHO
(PRIMÁRIO)
VERMELHO-VIOLETA VERMELHO LARANJA
(TERCIÁRIO) (TERCIÁRIO)

Vamos para mais uma representação, a Harmonia Triádica.

VIOLETA LARANJA
(SECUNDÁRIO) (SECUNDÁRIO)
É a harmonia na qual usamos três cores equidistantes no
círculo cromático. Por exemplo, azul, amarelo e vermelho.
Esse tipo de combinação consegue dar um efeito visual AZUL AMARELO
muito atraente. VIOLETA LARANJA
(TERCIÁRIO) (TERCIÁRIO)
Essa harmonia é muito popular entre os artistas porque
oferece um alto contraste visual, ao mesmo tempo em que
AZUL AMARELO
conserva o balanço e a riqueza das cores. Essa harmonia não (PRIMÁRIO) (PRIMÁRIO)
é tão contrastante como o esquema de complementares,
mas aparece mais balanceado e harmonioso.
AZUL VERDE AMARELO VERDE
(TERCIÁRIO) (TERCIÁRIO)
VERDE
(SECUNDÁRIO)
 VERMELHO
(PRIMÁRIO)
VERMELHO-VIOLETA VERMELHO LARANJA
(TERCIÁRIO) (TERCIÁRIO)

A Harmonia do Complemento dividido é a harmonia VIOLETA LARANJA

(SECUNDÁRIO) (SECUNDÁRIO)
conseguida por meio da mistura de uma tonalidade da
escala com as duas cores vizinhas da cor diretamente oposta
à primeira. AZUL AMARELO
VIOLETA LARANJA
Essa é uma harmonia que oferece um grande contraste sem (TERCIÁRIO) (TERCIÁRIO)
a tensão do esquema complementar.
AZUL AMARELO
(PRIMÁRIO) (PRIMÁRIO)

AZUL VERDE AMARELO VERDE

(TERCIÁRIO) (TERCIÁRIO)
VERDE
(SECUNDÁRIO)
 VERMELHO
(PRIMÁRIO)
VERMELHO-VIOLETA VERMELHO LARANJA
(TERCIÁRIO) (TERCIÁRIO)
A última representação que iremos tratar é a Harmonia
Dupla complementar.
VIOLETA LARANJA
(SECUNDÁRIO) (SECUNDÁRIO)
Como o nome indica, refere-se à harmonia conseguida por
dois pares de cores complementares entre si.
Denominadas por alguns como tétrades, essas combinações AZUL AMARELO
são as mais ricas de todas as harmonias, porque utilizam VIOLETA LARANJA
quatro cores, sendo elas complementares em pares. (TERCIÁRIO) (TERCIÁRIO)

É, no entanto, uma harmonia muito difícil de trabalhar. Se as

AZUL AMARELO
quatro cores são utilizadas em iguais proporções, a harmonia (PRIMÁRIO) (PRIMÁRIO)
parecerá desequilibrada. Sendo assim, uma cor sempre
deverá ser escolhida como a dominante e, com ela, dominar
as restantes. AMARELO VERDE
AZUL VERDE
(TERCIÁRIO) (TERCIÁRIO)
VERDE
(SECUNDÁRIO)