Aula 03 

Esquema de Cores
Cristiano Pires Martins
Perceberam?
2
RGB CMYK
Como criar harmonia na
combinação de cores?
¢ Existem seis esquemas de cores clássicos:
l Monocromático
l Análogo
l Complementar
l Semicomplementar
l Triádico
l Tetrádico
2
Monocromático
¢ Consiste em uma cor básica única e
quaisquer números de matizes e
tonalidades derivados desta cor.
¢ O esquema ou harmonia monocromática
utiliza variações de luminosidade e
saturação de uma mesma cor.
¢ Observe os exemplos a seguir.
3
http://www.rotondo.cz/eng/ 4
http://www.homedesignfind.com/
5
7
www.haveamint.com
8
www.subtraction.com
http://markoprljic.iz.hr/
6
http://www.interiors.davroc.co.uk/
7
Esquema Análogo
¢ Consiste em cores adjacentes umas às
outras na roda das cores.
¢ É a harmonia formada de uma cor
primária combinada com duas cores
vizinhas na roda das cores.
¢ Uma cor é utilizada como a dominante
enquanto que as adjacentes são
utilizadas para enriquecer a harmonia.
8
Cores análogas
9
Obs.: Como regra
básica, não corte
uma fatia maior
que um terço do
todo.
http://www.regines.net.au/
10
http://www.cacaushow.com.br/
11
Cores complementares
¢ Consiste em cores localizadas em oposição
umas às outras na roda das cores.
¢ Por exemplo: verde e o vermelho; amarelo e o
violeta; laranja e o azul.
¢ E importante quando utilizar esta harmonia,
escolher uma cor dominante (cor básica), e
utilizar a complementar para acentos e toques
de destaque. Por exemplo utilizar uma cor
para fundo e a outra para destacar os
elementos de importância.
12
Exemplo na roda de cores
13
www.americanas.com.br
14
http://www.faithink.com
15
www.itau.com.br
16
Cuidado
¢ Com as cores discordantes!
¢ Quando selecionar as cores, não escolher
cores que não sejam diretamente opostas
umas das outras na roda de cores e que
também não sejam próximas o suficientes
para serem suficientes análogas.
17
Cores Semicomplementares
¢ É a aplicação de duas cores adjacentes ao
complemento da cor básica.
¢ Por exemplo:
l Cor básica: vermelho
l Adjacentes: chartreuse (amarelo-
esverdeado) e verde-mar(azul-esverdeado)
18
Esquema de Cores Triádicas
¢ É a divisão da roda de cores em terços, ou
seja.
¢ Tendo como o exemplo anterior, ao girar a
roda de cores no sentido horário em um
grau teremos as cores primárias: vermelho,
amarelo e azul.
19
Esquema de cores Tetrádicas
¢ Este esquema abrange 4 cores, nele
podemos combinar 2 esquemas de cores
complementares.
¢ Por exemplo: laranja e azul; e amarelo e
roxo.
20
Variações
• Monocromático com toque “pop”: utilizar
matizes e tonalidades de cor básica
incorporando cinza, preto e branco puros;
• Analo-ajuste: aumente a saturação de uma
das cores do monocromático e diminua a
das demais;
24
Paleta de cores
¢ É uma combinação de cores a ser utilizada
no site, ou na construção da identidade
visual do projeto.
¢ Primeiro escolhemos uma cor que
consideramos básica (cor que identifica o
projeto visual), e em cima dela montamos
as demais cores, podendo utilizar os tipos
de esquemas e também utilizar matiz ou
saturação nas cores escolhidas.
21
Notação Hexadecimal
¢ Para compor a paleta de cores, utilizamos o
padrão RGB (para computadores) que por
sua vez utiliza o padrão hexadecimal, ou seja,
padrão que é baseado em múltiplos de 16,
incluindo 6 dígitos adicionais, podendo ser as
letras do A ao F, onde: A – corresponde ao 10,
B- 11, C-12, D-13, E-14, F-15.
¢ O código hexadecimal especifica os níveis de
vermelho, verde e azul aplicados a uma cor.
22
Exemplo
FFFFFF =
000000 =
FF0000 =
FF00FF =
23
Simulador de cores na web
¢ Há uma grande variedade de simuladores
de paleta de cores na web, veja:
¢ Gerador de Cor da WellStyled
¢ Gerador de Cores da Jonathan Snnok
24
WellStyled
http://colorschemedesigner.com/previous/colorscheme2/index-en.html
25
Snook
26
http://www.snook.ca/technical/colour_contrast/colour.html
27
Referências
¢ COBURN, Foster; McCORMICK, Peter. Corel Draw – Guia
Oficial. São Paulo. Makron Books, 1998.
¢ BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de
Janeiro: Altabooks, 2008.
¢ KALBACH, J; PIVETA, E K. Design de Navegação Web.
Bookman, 2009.
¢ KLOSKOWSKI, Matt. Camadas com Photoshop: Guia Completo
do Recurso (Colorido). Alta Books. 2008.
¢ WATRALL, E; SIARTO, J. Use A Cabeça! Web Design. Alta
Books, 2009.
¢ SANTAELA, Lúcia. O que é Semiótica. São Paulo: Brasiliense,
2003.
¢ Manual da CorelDRAW® Grapics Suite X5. 2010.
¢ Digital:
¢ http://www.amopintar.com/harmonia-das-cores

Aula 03 esquema de cores

  • 1.
    Aula 03 
 Esquemade Cores Cristiano Pires Martins
  • 2.
  • 3.
    Como criar harmoniana combinação de cores? ¢ Existem seis esquemas de cores clássicos: l Monocromático l Análogo l Complementar l Semicomplementar l Triádico l Tetrádico 2
  • 4.
    Monocromático ¢ Consiste emuma cor básica única e quaisquer números de matizes e tonalidades derivados desta cor. ¢ O esquema ou harmonia monocromática utiliza variações de luminosidade e saturação de uma mesma cor. ¢ Observe os exemplos a seguir. 3
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
    Esquema Análogo ¢ Consisteem cores adjacentes umas às outras na roda das cores. ¢ É a harmonia formada de uma cor primária combinada com duas cores vizinhas na roda das cores. ¢ Uma cor é utilizada como a dominante enquanto que as adjacentes são utilizadas para enriquecer a harmonia. 8
  • 12.
    Cores análogas 9 Obs.: Comoregra básica, não corte uma fatia maior que um terço do todo.
  • 13.
  • 14.
  • 15.
    Cores complementares ¢ Consisteem cores localizadas em oposição umas às outras na roda das cores. ¢ Por exemplo: verde e o vermelho; amarelo e o violeta; laranja e o azul. ¢ E importante quando utilizar esta harmonia, escolher uma cor dominante (cor básica), e utilizar a complementar para acentos e toques de destaque. Por exemplo utilizar uma cor para fundo e a outra para destacar os elementos de importância. 12
  • 16.
    Exemplo na rodade cores 13
  • 17.
  • 18.
  • 19.
  • 20.
    Cuidado ¢ Com ascores discordantes! ¢ Quando selecionar as cores, não escolher cores que não sejam diretamente opostas umas das outras na roda de cores e que também não sejam próximas o suficientes para serem suficientes análogas. 17
  • 21.
    Cores Semicomplementares ¢ Éa aplicação de duas cores adjacentes ao complemento da cor básica. ¢ Por exemplo: l Cor básica: vermelho l Adjacentes: chartreuse (amarelo- esverdeado) e verde-mar(azul-esverdeado) 18
  • 22.
    Esquema de CoresTriádicas ¢ É a divisão da roda de cores em terços, ou seja. ¢ Tendo como o exemplo anterior, ao girar a roda de cores no sentido horário em um grau teremos as cores primárias: vermelho, amarelo e azul. 19
  • 23.
    Esquema de coresTetrádicas ¢ Este esquema abrange 4 cores, nele podemos combinar 2 esquemas de cores complementares. ¢ Por exemplo: laranja e azul; e amarelo e roxo. 20
  • 24.
    Variações • Monocromático comtoque “pop”: utilizar matizes e tonalidades de cor básica incorporando cinza, preto e branco puros; • Analo-ajuste: aumente a saturação de uma das cores do monocromático e diminua a das demais; 24
  • 25.
    Paleta de cores ¢É uma combinação de cores a ser utilizada no site, ou na construção da identidade visual do projeto. ¢ Primeiro escolhemos uma cor que consideramos básica (cor que identifica o projeto visual), e em cima dela montamos as demais cores, podendo utilizar os tipos de esquemas e também utilizar matiz ou saturação nas cores escolhidas. 21
  • 26.
    Notação Hexadecimal ¢ Paracompor a paleta de cores, utilizamos o padrão RGB (para computadores) que por sua vez utiliza o padrão hexadecimal, ou seja, padrão que é baseado em múltiplos de 16, incluindo 6 dígitos adicionais, podendo ser as letras do A ao F, onde: A – corresponde ao 10, B- 11, C-12, D-13, E-14, F-15. ¢ O código hexadecimal especifica os níveis de vermelho, verde e azul aplicados a uma cor. 22
  • 27.
  • 28.
    Simulador de coresna web ¢ Há uma grande variedade de simuladores de paleta de cores na web, veja: ¢ Gerador de Cor da WellStyled ¢ Gerador de Cores da Jonathan Snnok 24
  • 29.
  • 30.
  • 31.
    27 Referências ¢ COBURN, Foster;McCORMICK, Peter. Corel Draw – Guia Oficial. São Paulo. Makron Books, 1998. ¢ BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro: Altabooks, 2008. ¢ KALBACH, J; PIVETA, E K. Design de Navegação Web. Bookman, 2009. ¢ KLOSKOWSKI, Matt. Camadas com Photoshop: Guia Completo do Recurso (Colorido). Alta Books. 2008. ¢ WATRALL, E; SIARTO, J. Use A Cabeça! Web Design. Alta Books, 2009. ¢ SANTAELA, Lúcia. O que é Semiótica. São Paulo: Brasiliense, 2003. ¢ Manual da CorelDRAW® Grapics Suite X5. 2010. ¢ Digital: ¢ http://www.amopintar.com/harmonia-das-cores