Este documento apresenta os conceitos básicos de design gráfico e cores, incluindo a psicologia das cores, harmonia das cores usando o círculo cromático, esquemas de cores como monocromático e complementar, e como representar cores em hexadecimal.

1. Noções de Design Gráfico
Unidade I - Introdução ao Design
Gráfico
Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590

2. Objetivo
Diferenciar e adequar combinação de cores
conforme critérios de psicologia das cores
Página da disciplina na Web
Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590

3. Cor tem um impacto
emocional
• A cor da lagosta é usada como base para
toda a página.
• O vermelho intenso captura a atenção.
• A textura de madeira serve de fundo para
o conteúdo, dando a sensação de tábua
de corte.
• Dá fome.
• Representa muito bem o conteúdo. Prof. Nécio Veras

4. Harmonia das cores
• Cores harmoniosas são aquelas que funcionam bem
em conjunto ou justapostas, e que produzem um
esquema de cores atrativo.
• O círculo cromático ou roda das cores pode ser
utilizado de forma a ajudar na escolha das cores e
combinações harmônicas.
Prof. Nécio Veras

5. Roda de cor ou círculo
cromático
• Ferramenta que serve de base para todas as demais
ferramentas de cores no mundo do design.
• Diagrama circular que mostra diferentes cores e o
relacionamento entre essas cores.
• A roda é baseada em:
– 3 cores primárias: vermelho, verde e azul.
– 3 cores secundárias: amarelo, ciano e
magenta.
– 6 cores formadas pelas misturas das duas.
Prof. Nécio Veras

6. Cores complementares
• Uma harmonia complementar é
intrinsecamente uma harmonia de
contraste.
• Escolha uma cor dominante, e
utilize a complementar para
acentos e toques de destaque.
• Exemplo: utilizar uma cor para
fundo e a outra para destacar
os elementos de importância.
Prof. Nécio Veras

7. Esquema de cores que
combinam
• Esquemas de cores são mais que
simplesmente coleções de cores.
– Um esquema de cores é um certo
grupo de cores que combinam entre si.
– Todo bom esquema de cores começa
com uma única cor, chamada de cor
base.
Prof. Nécio Veras

8. Escolha uma cor base
Prof. Nécio Veras

9. Esquemas de cores
• Há vários esquemas de cores:
monocromático, análogo, complementar,
triádico, tetrádico, etc.
• Eles são meios simples de selecionar
diferentes tipos de paletas para usar em
seu site.
• São ferramentas importantes de design.
Prof. Nécio Veras

10. Esquema triádico
• Um dos mais usados.
• Usa 3 cores igualmente
espaçadas em torno da roda
de cores.
• Qualquer uma delas pode
ser a cor base.
Prof. Nécio Veras

11. Prática simples...
• Crie uma paleta de 3 cores baseada na
logomarca a seguir.
Dica: Escolha uma cor base e construa
sua paleta a partir dela.
Prof. Nécio Veras

12. Prof. Nécio Veras

13. Cores representadas em
Hexadecimal
• Valores de cores em haxadecimal possuem 6
caracteres como: #572266.
• Esse valor diz ao navegador quanto de vermelho,
verde e azul deve ser exibido.
• Há programas que permitem selecionar uma cor na
roda de cores e transformá-la em hexa.
▫ Exemplo: Kuler - kuler.adobe.com
• Kuler não tem somente um conversor de cores para
hexa, mas permite observar paletas de outras pessoas
e exportar suas próprias paletas.
Prof. Nécio Veras

14. Kuler
Prof. Nécio Veras

15. Prof. Nécio Veras

16. Prof. Nécio Veras

17. Mais claro ou mais escuro
• Se as cores de um site estiverem muito escuras é possível
clareá-las.
• Saturação é o termo para dizer que uma cor está mais clara
ou escura.
• Quanto mais próximo do centro da roda de cores, mais escura
é a cor.
Prof. Nécio Veras

18. Mudança de saturação no
site
Agora o site ficou “sem graça”.
Prof. Nécio Veras

19. Esquema de cores
tetrádico
• Quando o site está “sem graça” significa que as cores
estão muito claras.
• Se você não desejar deixar o site mais escuro, nem
“sem graça”, pense em adicionar cores.
• Podemos passar de um esquema de 3 para 4 cores.
• O esquema tetrádico ou complementar duplo usa 4
cores arranjadas em dois pares de cores
complementares.
• Cuidado: distribuir igualmente essas 4 cores pode
deixar o site bagunçado. Uma quarta cor deve ser
usada com moderação.
Prof. Nécio Veras

20. Novas versões do site
Prof. Nécio Veras

21. Testando layouts e cores
Prof. Nécio Veras

22. Referências importantes
sobre cores
• http://www.amopintar.com/harmonia-das-cores
• http://kuler.adobe.com/
Prof. Nécio Veras

23. Exercícios
Prof. Nécio Veras

24. Referências
Esta apresentação foi baseada nos materiais
didáticos de:
– Prof. Régis Pires (Curso de Introdução ao Web
Design) -
https://sites.google.com/site/ifpiregis/pronatec/intro
ducao-ao-web-design
Também no livro Use a Cabeça – WebDesign
Prof. Nécio Veras