O documento discute os seis esquemas de cores clássicos (monocromático, análogo, complementar, semicomplementar, triádico e tetrádico) e fornece exemplos de cada um. Também aborda como criar uma paleta de cores usando a notação hexadecimal e recomenda simuladores on-line de cores.

1. Aula 03
Esquema de Cores
Cristiano Pires Martins

2. Perceberam?
2
RGB CMYK

3. 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

4. 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

5. http://www.rotondo.cz/eng/ 4

6. http://www.homedesignfind.com/
5

7. 7
www.haveamint.com

8. 8
www.subtraction.com

9. http://markoprljic.iz.hr/
6

10. http://www.interiors.davroc.co.uk/
7

11. 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

12. Cores análogas
9
Obs.: Como regra
básica, não corte
uma fatia maior
que um terço do
todo.

13. http://www.regines.net.au/
10

14. http://www.cacaushow.com.br/
11

15. 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

16. Exemplo na roda de cores
13

17. www.americanas.com.br
14

18. http://www.faithink.com
15

19. www.itau.com.br
16

20. 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

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 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

23. 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

24. 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

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
¢ 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

27. Exemplo
FFFFFF =
000000 =
FF0000 =
FF00FF =
23

28. 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

29. WellStyled
http://colorschemedesigner.com/previous/colorscheme2/index-en.html
25

30. Snook
26
http://www.snook.ca/technical/colour_contrast/colour.html

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