aula 03 esquema de cores
TRANSCRIPT
![Page 1: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/1.jpg)
Aula 03 Esquema de Cores
Cristiano Pires Martins
![Page 2: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/2.jpg)
Perceberam?
2RGB CMYK
![Page 3: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/3.jpg)
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
![Page 4: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/4.jpg)
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
![Page 5: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/5.jpg)
http://www.rotondo.cz/eng/ 4
![Page 6: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/6.jpg)
http://www.homedesignfind.com/5
![Page 9: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/9.jpg)
http://markoprljic.iz.hr/6
![Page 10: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/10.jpg)
http://www.interiors.davroc.co.uk/7
![Page 11: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/11.jpg)
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
![Page 12: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/12.jpg)
Cores análogas
9
Obs.: Como regra básica, não corte uma fatia maior que um terço do todo.
![Page 13: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/13.jpg)
http://www.regines.net.au/10
![Page 14: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/14.jpg)
http://www.cacaushow.com.br/
11
![Page 15: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/15.jpg)
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
![Page 16: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/16.jpg)
Exemplo na roda de cores
13
![Page 20: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/20.jpg)
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
![Page 21: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/21.jpg)
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
![Page 22: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/22.jpg)
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
![Page 23: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/23.jpg)
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
![Page 24: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/24.jpg)
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
![Page 25: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/25.jpg)
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
![Page 26: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/26.jpg)
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
![Page 27: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/27.jpg)
Exemplo
FFFFFF =
000000 =
FF0000 =
FF00FF =
23
![Page 28: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/28.jpg)
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
![Page 29: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/29.jpg)
WellStyled
http://colorschemedesigner.com/previous/colorscheme2/index-en.html
25
![Page 30: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/30.jpg)
Snook
26
http://www.snook.ca/technical/colour_contrast/colour.html
![Page 31: Aula 03 esquema de cores](https://reader034.vdocuments.site/reader034/viewer/2022052218/55ab20341a28abf1058b46c9/html5/thumbnails/31.jpg)
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