web design > cores
DESCRIPTION
Uma introdução à teoria das cores.TRANSCRIPT
![Page 1: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/1.jpg)
Web Designe o maravilhoso mundo das cores
![Page 2: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/2.jpg)
E o que é cor?A cor é uma percepção visual provocada pela ação de um feixe de fotons sobre células especializadas da retina, que transmitem através de informação pré-processada no nervo óptico, impressões para o sistema nervoso. fonte: Wikipédia
Web Design
![Page 3: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/3.jpg)
Web DesignClareamento
Escurecimento
Saturação
Intensidade
Valo
r
![Page 4: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/4.jpg)
Web DesignToda cor possui as diversas propriedades, dentre elas:● Matiz● Intensidade● Valor● Escurecimento● Clareamento (Brilho)● Saturação
![Page 5: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/5.jpg)
Web DesignMatizÉ a cor pura, sem adição de branco ou preto. IntensidadeÉ definida pela vivacidade da cor. Podemos intensivar uma cor adicionando preto ou branco à cor, ou neutralizá-la adicionando cinza.
![Page 6: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/6.jpg)
ValorRefere-se a luminosidade da cor, depende do escurecimento ou clareamento, mas não da saturação ou matiz. Uma imagem colorida perde sua matiz ao ser convertidada por preto ou branco, mas nunca suas caracteristicas tonais.
Web Design
![Page 7: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/7.jpg)
Web DesignEscurecimentoÉ a variação de matiz obtida através da adição de preto. ClareamentoÉ a variação de matiz obtida através da adição de branco.
![Page 8: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/8.jpg)
Web DesignAntes de continuar, uma historinha...
![Page 9: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/9.jpg)
Web DesignEra uma vez um moço chamado Isaac...
![Page 10: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/10.jpg)
Web DesignEra uma vez um moço chamado Isaac...
![Page 11: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/11.jpg)
Web DesignNosso amigo Sir. Isaac Newton, além de ter feito importantes descobertas como as leis da física, gravidade... Também contribuiu para o Design quando resolveu analisar um feixe de luz branca, e descobriu que este era composto de um espectro de cores: vermelho, laranja, amarelo, verde, azul, índigo e violeta.
![Page 12: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/12.jpg)
Web DesignIsaac, organizou as cores e criou o, hoje conhecido, círculo cromático.
![Page 13: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/13.jpg)
Web Design
![Page 14: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/14.jpg)
Web Design
Ow yeah!
![Page 15: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/15.jpg)
Web DesignA partir do circulo cromático, pode-se dividir as cores em Primárias, Secundárias e Terciárias.
![Page 16: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/16.jpg)
Web DesignPrimáriasSão cores que NÃO podemos obter através da combinação de outras.
![Page 17: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/17.jpg)
Web DesignSecundáriasSão obtidas através da mistura de duas cores primárias. Ex. verde, laranja, violeta...
![Page 18: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/18.jpg)
Web DesignTerciáriasSão obtidas através da mistura de uma cor primária e uma secundária. Ex. verde-amarelado, laranja-avermelhado...
![Page 19: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/19.jpg)
Web DesignTá, mas não pára por aí. O estudo das cores observou relações entre elas, e com isso podemos ainda destacar...
![Page 20: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/20.jpg)
Web DesignCores complementaresSão cores opostas no círculo cromático, e produzem um forte efeito contrastante.
![Page 21: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/21.jpg)
Web DesignCores análogasSão cores vizinhas no círculo cromático, e são fácilmente equilibradas na composição.
![Page 22: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/22.jpg)
Web DesignCores quentesSão cores que exprimem sensação de calor.
![Page 23: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/23.jpg)
Web DesignCores friasExprimem sensação de falta de calor.
![Page 24: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/24.jpg)
Web DesignO verde limão esta tanto nas cores quentes quanto nas frias. Isso porque ele não pertence a uma categoria fixa, quando inserido em um contexto quente, se comporta como uma cor quente e quando inserido em um contexto frio, age como cor fria.
;)
![Page 25: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/25.jpg)
Web DesignPara produção de websites, o sistema de cor mais utilizado é o RGB (red, green e blue), que é um sistema aditivo usado em monitores, TVs... Para formar uma imagem, diferentes porcentagens de cada cor se sobrepõem, como as retículas são muito pequenas não vemos os pontos de luz, mas sim a imagem formada.
![Page 26: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/26.jpg)
Web DesignA representação do RGB é dada através da indicação de um valor luminosidade de 0 a 255 a cada pixel (R (vermelho), G (verde), B (azul)), onde 0 é ausência, e 255 o valor de mais intensidade.
![Page 27: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/27.jpg)
Web DesignNa Web utiliza-se a notação RGB através de valores hexadecimais (base 16), onde 00 é preto (ausência) e FF é o máximo de intensidade.
![Page 28: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/28.jpg)
Web DesignExemplo: R G B => 00 00 00 (preto) R G B => 00 FF 00 (azul) R G B => FF FF FF (branco)
![Page 29: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/29.jpg)
Web Design
Psicologia das cores http://goo.gl/Uwj19
Psicologia e Relaçõeshttp://chocoladesign.com/psicologia-e-relacoes-fisicas-das-cores
Color in Motion (animação)http://www.mariaclaudiacortes.com/
![Page 30: Web Design > Cores](https://reader034.vdocuments.site/reader034/viewer/2022052301/558aff15d8b42a3a268b45bc/html5/thumbnails/30.jpg)
Thanks all folks!