30
Web Design e o maravilhoso mundo das cores

Web Design > Cores

Embed Size (px)

DESCRIPTION

Uma introdução à teoria das cores.

Citation preview

Page 1: Web Design > Cores

Web Designe o maravilhoso mundo das cores

Page 2: Web Design > Cores

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

Web DesignClareamento

Escurecimento

Saturação

Intensidade

Valo

r

Page 4: Web Design > Cores

Web DesignToda cor possui as diversas propriedades, dentre elas:● Matiz● Intensidade● Valor● Escurecimento● Clareamento (Brilho)● Saturação

Page 5: Web Design > Cores

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

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

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

Web DesignAntes de continuar, uma historinha...

Page 9: Web Design > Cores

Web DesignEra uma vez um moço chamado Isaac...

Page 10: Web Design > Cores

Web DesignEra uma vez um moço chamado Isaac...

Page 11: Web Design > Cores

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

Web DesignIsaac, organizou as cores e criou o, hoje conhecido, círculo cromático.

Page 13: Web Design > Cores

Web Design

Page 14: Web Design > Cores

Web Design

Ow yeah!

Page 15: Web Design > Cores

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

Web DesignPrimáriasSão cores que NÃO podemos obter através da combinação de outras.

Page 17: Web Design > Cores

Web DesignSecundáriasSão obtidas através da mistura de duas cores primárias. Ex. verde, laranja, violeta...

Page 18: Web Design > Cores

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

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

Web DesignCores complementaresSão cores opostas no círculo cromático, e produzem um forte efeito contrastante.

Page 21: Web Design > Cores

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

Web DesignCores quentesSão cores que exprimem sensação de calor.

Page 23: Web Design > Cores

Web DesignCores friasExprimem sensação de falta de calor.

Page 24: Web Design > Cores

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

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

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

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

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

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

Thanks all folks!