Pantone Process Black C

100K

Escalas de Cinza

INSTITUTO FEDERAL
RIO GRANDE
DO SULDE
INSTITUTO
FEDERAL
Campus Porto
AlegreE TECNOLOGIA
EDUCAO,
CINCIA

Verso Escalas de Cinza

100% K
30% K

Cores na Web
Prof Evandro Manara Miletto
IFRS - Campus Porto Alegre

roteiro
histrico
caractersticas e qualidades
harmonia das cores
sensaes das cores
manipulando cores na Web
recomendaes gerais

histrico

Isaac Newton

experimentos que mais influenciaram no estudo da luz e cor

1666 em Woolsthorpe, Inglaterra.

1 prisma de vidro + 1 papel
observou o raio de sol se decompor ao

atravessar o prisma (difrao)
descoberta das 7 cores (espectro)

vermelho, laranja, amarelo, verde,
azul,

anil e violeta
experimentos (decomposio e crculo

das cores - disco de Newton)

experimentos
disco das cores

descoberta do espectro

caractersticas
e propriedades

cores e nossa viso

a SOMA de todas as cores gera o BRANCO = NEUTRO,

compatvel com todas as cores
cores que enxergamos se ALTERAM conforme a ILUMINAO

ex. Vermelho pode ter diversas variaes tonais (existncia ou

ausncia de luz)
COR do objeto = LUZ que ele REFLETE (demais so absorvidas)
OLHO cones (3 receptores) sensveis ao vermelho, verde e azul

(teoria clssica de Thomas Young e Hermann Helmoltz)
HARMONIA (complementares, triangulo, monocromatico)

cores e nossa viso

fixar atentamente no ponto preto por 30s e permanecer fixo

cor e crebro
a cor informao em si mesma.

PARE

informaes pouco estimulantes ou desorganizadas so rejeitadas pelo crebro

a harmonia (equilbrio) das cores essencial (transmite senso de ordem)

cores do espectro visvel

cor

compr. de onda

freqncia

vermelho

~ 625-740nm

~ 480-405 THz

laranja

~ 590-625nm

~ 510-480 THz

amarelo

~ 565-590nm

~ 530-510 THz

verde

~ 500-565nm

~ 600-530 THz

ciano

~ 485-500nm

~ 620-600 THz

azul

~ 440-485nm

~ 680-620 THz

violeta

~ 380-440nm

~ 790-680 THz

Cores do espectro
contnuo

teoria da cor
CORES possuem VALOR (ferramenta do artista)
Artes plsticas (cores primarias = amarelo, azul e vermelho)

A mistura gera infinidade de outras cores.
SOMA das cores = processo ADITIVO (cor luz)
AUSNCIA de cores = processo SUBTRATIVO (cor pigmento)
CORES PRIMRIAS = indecomponveis adio

de
Branco ou Preto = variao da

TONALIDADE
CORES SECUNDRIAS = resultada da mistura

das PRIMRIAS

ARCO-RIS = decomposio natural da luz branca

S
P

P
S

S
P

relaes das cores

P

S
P

primrias e
secundrias

P
S

cor complementar de uma cor primria a que resulta

da mistura das outras duas cores primrias

teoria da cor RGB

sistema de cor obtida aditivamente (cor-luz)
objetos que emitem luz (monitores, tv, lanternas...)
Branco = adio de diferentes comprimentos de onda das cores

primrias de luz Vermelho + Azul (cobalto) + Verde
Red, Green, Blue - formas de uso na Web:
- VALOR dos canais RGB (de 0 a 255 e em em Hexadecimal)

canais RGB
formas de uso com HTML e CSS

Valor dos canais RGB (de 0 a 255)

uso: rgb(0,0,0) Preto (ausncia de todas as cores)

rgb(0,255,0) Verde (canal do verde com luz mxima)
Hexadecimal (0 a 255, representado por 00 a FF)

uso: #RRGGBB ex. #0000FF v(canal azul com luz mxima)
ex. em HTML:

<font color="#FF0000">cor do texto em HTML!</font>
ex. em CSS:

p{color: #9000A1;}

O
T
E
L
O
S
OB

h6{color: rgb(0,220,98);}

teoria da cor CMYK

sistema de cor obtida subtrativamente (cor-pigmento)
mancha-se uma superfcie sem pigmentao (branca) misturando-lhe

as cores secundrias da luz
corresponde ao CMY das impressoras = Cyan, Magenta, Yellow

obtem-se cor com pigmento (tinta e objetos que nao emitem luz)

utilizado pela Indstria Grfica nos diversos

processo de impresso, ex.: o Off-Set,

matiz
corresponde intensidade espectral de uma cor (comprimento

de onda dominante)
o fator diferencial de uma cor, que se especifica com um nome

e que o define em relao aos outros.
exemplo: amarelo, verde, violeta, vermelho, etc. so tons ou

matizes.
para se mudar o tom ou matiz de uma cor, acrescenta-se outro
tom, obtendo-se assim diferentes gradaes ou tonalidades
cores com diferentes matizes

brilho

- brilho

corresponde intensidade luminosa

mais brilho = mais luz = mais "claridade"

+ brilho

saturao

corresponde pureza espectral

relativa da luz

alta saturao = cor bem definida dentro de

estreita faixa espectral

baixa saturao = cor "indefinida" tendendo

ao branco, ampla distribuio espectral

tonalidade
esta caracterstica define variantes de um tom ou matiz (cor)
est relacionadas com a sua saturao ou luminosidade ou como

resultado da proporo das cores componentes ou das

agregadas.
exemplo: o verde amarelado e o verde azulado so diferentes

tonalidades do verde, mas tambm so tonalidades a gama de

verdes obtida a partir da cor pura.
cores com diferentes tonalidades

grau/valor de uma cor

Este um termo que tem a ver com a Escala tonal ou escala
de valores, se utiliza para descrever que to claro ou escuro
uma cor, e se refere quantidade de luz percebida.
O valor o grau de claridade ou obscuridade de uma cor.

grau ou valores do vermelho

contraste
a combinao entre cores totalmente diversas entre si
o bom uso conduz a uma harmonia aumentando a capacidade

produtiva
desperta o interesse pela vivacidade ou pela tenso que ocasiona
contrastes tambm so obtidos atravs do brilho, da pureza e do

calor de um determinado tom

exemplos do cinza sobre um

definido fundo acromtico ou
cromtico

o CINZA sobre o PRETO parece mais claro

sobre o BRANCO parece mais escuro
sobre o VERMELHO parece mais verde
sobre o VERDE, parece mais vermelho
sobre o AMARELO, prece mais roxo
sobre o ROXO, parece mais amarelo
sobre o AZUL, prece mais laranja
sobre o LARANJA, parece mais azul

o AMARELO, o VIOLETA e o
VERMELHO so as cores que oferecem
maior contraste com o cinza e so mais
usadas em publicidade

cores quentes e frias

transmitem
sensao de calor

associadas ao calor,
sol e fogo

transmitem
sensao de frio

associadas ao gelo,
gua, rvores, cu

harmonia das cores

influncia na percepo humana

harmonia monocromtica
uso das variaes de tonalidades de uma mesma matiz.
o esquema ou harmonia monocromtica utiliza variaes de


luminosidade e saturao de uma mesma cor.
harmonia simples e elegantes, de fcil percepo ao observador


especialmente quando se trata de tons azuis e verdes.
a cor principal pode ser combinada com cores neutras (preto e


branco) pode ser difcil ressaltar os elementos mais importantes.

graus de um tom vermelho

exemplos
harmonia monocromtica

harmonia anloga
formada de uma cor primria combinada com duas cores vizinhas
uma cor a dominante - as adjacentes enriquecem a harmonia
encontrado normalmente na natureza


Prs:


so fceis de criar como as


monocromticas, no entanto so


mais ricas.
Contras:


necessita de cor de contraste.


no to vibrante quanto a


harmonia de complementares.

exemplos
harmonia anloga

a ateno aparentemente no focada no contedo

harmonia complementar
resultado da combinao das cores opostas (simtricas no crculo

das cores)
o matiz varia em 180 entre um e outro.
melhores combinaes: cores frias e

cores quentes, (vermelho com

verde-azul ou azul com

amarelo).
harmonia de contraste.
define-se a cor dominante
usa-se a complementar para acentos e toques de destaque

exemplo
harmonia complementar
uso de cores
opostas: laranja e azul
pores minimizadas
sugere-se o uso de
uma pequena
quantidade das cores
complementares para
evitar contraste
excessivo

harmonia tridica
usa-se 3 cores eqidistantes no circulo cromtico.
ex. azul, amarelo e vermelho.
proporciona um efeito visual muito atraente.
oferece oferece um alto contraste visual e conserva o balano
e a riqueza das cores

menos contrastante que o

esquema de cores
complementares,
mais balanado e harmonioso

exemplo
harmonia tridica
uso com cautela
pode desviar a
ateno do contedo
sites que necessitam
mais apelo visual
ajudam na fixao de
uma nome ou marca

complemento divido
obtm-se misturando uma tonalidade da escala com as duas
vizinhas da cor oposta a primeira.
uma variante da combinao de
harmonia de complementares.
utiliza uma cor como principal e as
duas cores adjacentes ao seu
complementar.
oferece um grande contraste sem a
tenso do esquema complementar.

harmonia acromtica
obtida pela utilizao de cores neutras situadas na zona central do crculo cromtico,

perderam a saturao
que no se percebe
seu matiz original

sensaes das cores

exemplos do significado cultural e psicolgico das cores

vermelho
referncias: alimentao, energia e fluxo (sangue), acolhimento
(fraternidade), proibio e revoluo, fora.
outras conotaes: impureza, violncia, pecado, erotismo, seduo
chama ateno (elementos em destaque)
associao material:
rubi, cereja, guerra,
parada, perigo, fogo,
chama, lbios, mulher
associao afetiva:
dinamismo, fora,
energia, paixo, vigor,
sensualidade, emoo

amarelo
referncias: alegria, espontaneidade, ao, poder, dinamismo,
impulsividade, estimulao, contraste, prosperidade, riqueza,
divindade - irritao e covardia.
adquire luminosidade maior em contraste com cores quentes.
associao material:
flores grandes, terra
argilosa, palha, luz,
vero, limo, calor, luz
solar, chins...
associao afetiva:
conforto, iluminao,
alerta, esperana,
idealismo - inveja, dio...

verde
referncias: impulso ativo, descanso, relaxamento, calmante,
umidade, frescor, esperana, amizade, equilbrio, alm de todas as
conexes com ecologia e natureza
faixa harmoniosa que se interpe entre o cu e o sol.
associao material:
flores grandes, terra
argilosa, palha, luz,
vero, limo, calor, luz
solar, chins...
associao afetiva:
conforto, iluminao,
alerta, esperana,
idealismo - inveja, dio...

azul
referncias: no ocidente a mais lembrada como simpatia,
harmonia, amizade e confiana. frio, divino e eterno (cu), nobreza
(sangue azul), inteligncia, lgica, confiana e segurana
faixa harmoniosa que se interpe entre o cu e o sol.
associao material:
montanhas, frio, mar,
cu, gelo, feminilidade,
guas, tranqilas...
associao afetiva:
espao, viagem,
verdade, sentido, afeto,
intelecto, paz,
serenidade, fidelidade

laranja
referncias: no oriente representa a perfeio e todas as
qualidades nobres. a cor da transformao. iluminao,
fertilidade, cor aromtica
molhos agridoces asiticos so predominantemente de cor laranja
associao material:
pr-de-sol, luz, chama,
calor, festa, robustez ofensa, perigo, agresso
associao afetiva:
desejo, dominao,
fora, alegria,
advertncia, tentao,
prazer, euforia...

rosa
referncias: resulta da mistura do vermelho e branco. nome de
flor, ligado ao universo feminino. simboliza encanto e amabilidade.
Remete a inocncia e frivolidade.
cor terna e suave muito
utilizada em associaes
com o pblico infantil,
principalmente as
meninas - altamente
positiva

marrom
referncias: cor da pele morena. na antiguidade era a cor morena
feminina, por ser a cor da terra (fecundidade). cor dos tecidos que
no haviam sido tingidos.
maturidade, estabilidade, ligao com o cho.
associao material:
terra, guas lamacentas,
outono, doena sensualidade,
desconforto...
associao afetiva:
pesar, melancolia,
resistncia, vigor...

cinza
referncias: mistura do branco com o preto. fuso de estmulos,
simplificao, neutralidade e eventualmente, maturidade.
posio intermediria entre a luz e a sombra.
no interfere junto s cores em geral.
associao material: p,
chuva, ratos, neblina,
mquinas, cimento,
edificaes...
associao afetiva:
tdio, tristeza,
decadncia, velhice,
desnimo - seriedade,
sabedoria, finura ...

preto
referncias: ausncia da luz. busca da sombra e da escurido. vida
interior, sombria e depressiva. destruio e tremor tambm esto
associados ao preto.
pode determinar seriedade, sofisticao e requinte
associao material:
sujeira, sombra, funeral,
noite, carvo, coisas
escondidas e obscuras...
associao afetiva:
pessimismo, sordidez,
tristeza, opresso,
angstia - nobreza e
elegncia. alegria se
combinado com cores

branco
referncias: cor de leite, neve, neutralidade, pureza, vida quando
associada a alimentao. limpeza, liberdade, criatividade, paz
simboliza a luz e no deve ser considerado cor. cuidado: para os
ocidentais = vida e o bem, orientais = morte, fim, o nada.
associao material:
casamento, cisne, lrio,
neve, nuvens, tempo
claro ...
associao afetiva:
ordem, simplicidade,
limpeza, bem, otimismo,
pureza, paz, harmonia,
divindade.

manipulando cores na Web

viso geral de abordagens e tecnologias

usando Web standards

HTML

CSS

Estrutura e
contedo
da pgina.
Interatividade
bsica.

Apresentao
Look and Feel
Interatividade
simples

JavaScript
Manipulao via Script.
Alto nvel de
Interatividade.

Sites e aplicaes Modernas

CSS Cascading Style Sheet

mecanismo simples para adicionar estilos (fontes,
CORES, bordas...) a documentos web. W3C.

caractersticas:
linguagem de layout padro para web (tipografia e tamanho)

alm de precisa e poderosa, de fcil edio
favorece a largura de banda
criada para substituir layouts baseados em tabelas/frames
CSS + XHTML/HTML = separao de contedo e
apresentao

anatomia do CSS

anatomia do CSS
1 ou + regras (como elementos sero apresentados)

1 regra = 2 partes: 1 seletor e 1 declarao



seletor


p { color: red; }
declarao
1 declarao = 2 partes: 1 proprieade e 1 valor

color = propriedade
red = valor
opes para cor:

hexa= p{color: #ff0000;} ou p{color: #f00;}
RGB= p{color: rgb(255,0,0);} ou
RGB= p{color: rgb(100%,0%,0%);}

recomendaes gerais

dicas gerais
01. No usar itens que piscam (fadiga visual)
02. Evitar fundos escuros (principalmente em portais)
03. Padronizar cor para links (ou sublinhado)
04. Limitar nmero de cores (sistemas comerciais, P&B...)
05. Usar textos com letra preta fundo claro (+
legibilidade)
06. Cores brilhantes em reas pequenas (suaves, em reas

maiores)
07. Considerar usurios com problemas visuais
08. Associar poucas cores (fceis de serem lembradas)
09. Lembrar das cores opostas (vermelho:pare
oposto:verde:siga)
10. Usar associaes padro (so melhores captadas pelo

usurio comum)

exerccio 1
Em grupo de at 3 colegas, coletar 3 imagens (fotos) de
3 mdias diferentes: TV, Internet e Revistas.
Apresentar em aula e discutir esquemas de cores e
relao das cores com o contedo/contexto.

exerccio 2
Criar um pequeno site
com a estrutura similar
da imagem ao lado (3
pginas) usando um dos
esquemas de cores visto
em aula.
Inserir foto, trabalhar cor
de fonte, ttulos, fundo,
DIVs, formulrio e enviar
ao professor.

ferramentas online
http://www.checkmycolours.com/
verifica contraste entre elementos da
pgina e fundo visando acessibilidade
http://colorschemedesigner.com/
gera e exporta esquema de cores
baseado nas escolhas do usurios
Editores de CSS e HTML online
http://www.cssportal.com/online-css-editor/
http://cssmate.com/csseditor.html
http://www.online-html-editor.org/

referncias
Farina, M. Psicodinmica das Cores em Comunicao. 5a Ed. Blucher. 2006
Carrion, W. Design para Webdesigners. Brasport. 2010.
Zeldman, J. Designing with Web Standards, New Readers, 2003.
http://pt.wikipedia.org/wiki/Cor
http://onepixelahead.com/
http://www.amopintar.com/
http://espaco.com/design/
http://colorschemedesigner.com/

Escalas de Cinza

INSTITUTO FEDERAL
RIO GRANDE
DO SULDE
INSTITUTO
FEDERAL
Campus Porto
AlegreE TECNOLOGIA
EDUCAO,
CINCIA

Verso Escalas de Cinza

100% K
30% K

contato
Prof Evandro Manara Miletto
IFRS Campus Porto Alegre
Rua Cel Vicente, 281 - Centro
Fone (51) 3930-6040
evandro.miletto@poa.ifrs.edu.br
http://inf.poa.ifrs.edu.br/~evandro