# Cores na web: guia completo > Guia completo sobre cores na web: teoria, ferramentas de paleta e significado psicológico. Referências essenciais para escolher cores certas. Domine cores! URL: https://dpw.dev/design/cores-na-web-guia-completo/ Publicado em: 2011-05-09 Categoria: design Tags: planejamento, web-design Autor: Tárcio Zemel Recentemente uma leitora do blog escreveu pedindo algum material sobre **cores na web**, perguntando se poderia publicar um artigo sobre este assunto tão importante no desenvolvimento para web. Como já tivemos a oportunidade de mostrar, as cores são uma das [maneiras de os sites se comunicarem com seus visitantes](/usabilidade/web-sites-e-comunicacao-21-maneiras-de-os-sites-se-comunicarem-com-seus-visitantes/), imprescindível para se fazer web sites de qualidade. O assunto, além de complexo e, em alguns pontos, controverso, é bastante amplo. Por isso, ao invés de escrever um artigo ou uma [série](/categoria/series/) a respeito, decidi que a contribuição seria maior ao indicar fontes e referências sobre o tema. Certamente compartilhar o que outras pessoas já escreveram sobre as **cores na web** (e cores, em geral) será uma contribuição muito maior. ## Referências sobre teoria das cores para web O uso da teoria das cores na web, na verdade, não é assunto exclusivo da web. O que se faz é pegar todo o este conteúdo teórico e, simplesmente, realizar algumas adaptações para que este seja mais "compatível" e traga resultados mais eficientes no ambiente online. Portanto, quando se faz este tipo de estudo, você encontra os mesmos termos, terminologias, conceitos e constatações, seja no "mundo online" ou "mundo offine". Então, uma boa forma de começar o estudo das cores é acessando o site de **Maria Claudia Cortes**, [Color in Motion](http://www.mariaclaudiacortes.com/colors/Colors.html), no qual, através de interações do próprio visitante, ela mostra o significado, melhor combinação, efeitos psicológicos, significado nas diferentes partes do mundo, etc, das cores vermelho, laranja, amarelo, verde, azul e roxo. Além disso, há uma animação que envolve os personagens das cores, mostrando algumas das principais respectivas características. Realmente vale a pena o acesso! Uma das grandes referências na área é **Daniele Viana** que, em [seu blog](http://www.danielevsilva.com.br/), fez uma série de artigos a respeito. O interessante é que, dentre esses artigos, existem aqueles que abordam, especificamente, as principais cores e seus efeitos em web designs. Artigos estes que, numa disposição didática, seriam: - [O uso das cores em webdesign](http://www.danielevsilva.com.br/uso-das-cores/) - Breve análise das cores - [Amarelo](http://www.danielevsilva.com.br/amarelo/) - [Azul](http://www.danielevsilva.com.br/azul/) - [Cinza](http://www.danielevsilva.com.br/cinza/) - [Laranja](http://www.danielevsilva.com.br/laranja/) - [Marrom](http://www.danielevsilva.com.br/marrom/) - [Preto](http://www.danielevsilva.com.br/preto/) - [Rosa](http://www.danielevsilva.com.br/cor-de-rosa/) - [Roxo](http://www.danielevsilva.com.br/roxo/) - [Verde](http://www.danielevsilva.com.br/verde/) - [Vermelho](http://www.danielevsilva.com.br/vermelho/) Também o pessoal do [Vandelay Design Blog](http://vandelaydesign.com/blog/) apresenta excelentes referências de sites por cor que valem a pena serem vistos: - [Amarelo](http://vandelaydesign.com/blog/galleries/yellow-websites/) - [Azul](http://vandelaydesign.com/blog/galleries/blue-websites/) - [Laranja](http://vandelaydesign.com/blog/galleries/orange-websites/) - [Marrom](http://vandelaydesign.com/blog/galleries/brown-websites/) - [Verde](http://vandelaydesign.com/blog/galleries/green-websites/) - [Vermelho](http://vandelaydesign.com/blog/galleries/red-websites/) - [Rosa](http://vandelaydesign.com/blog/galleries/pink-websites/) - [Roxo](http://vandelaydesign.com/blog/galleries/purple-websites/) No artigo "[Color Theory for Designers, Part 1: The Meaning of Color](https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/)" também é possível encontrar mais sites-exemplo separados por cores -- juntamente com a explicação sobre as propriedades e características de cada uma. ## Ferramentas para cores na web Já tivemos a oportunidade de mostrar algumas ferramentas para cores na web, como, por exemplo, o [Colorblind Web Page Filter](/acessibilidade/colorblind-web-page-filter/). Mas, para compor este artigo melhor, faz-se necessária uma lista mais incrementada. Portanto, segue uma lista completa de ferramentas de cores para web: - Amostras/Combinações de cores - [0to255](http://0to255.com/) - [Color Schemer Scheme Gallery](http://www.colorschemer.com/schemes/) - [COLOURlovers](http://www.colourlovers.com/) - [ColorBurn Winners](http://www.firewheeldesign.com/sparkplug/2006/February/colorburn_winners.php) - [Color Combos](http://www.colorcombos.com/) - [Color Schemes](http://www.gpeters.com/color/color-schemes.php) - [Kuler](http://kuler.adobe.com/) - Montagem de esquemas de cores - [Color Blender](http://colorblender.com/) - [Color Palette Generator](http://www.degraeve.com/color-palette/) - [Color Scheme Designer](http://colorschemedesigner.com/) - [Color Schemer Online](http://www.colorschemer.com/online.html) - [EasyRGB: Color Harmonies](http://www.easyrgb.com/index.php?X=HARM) - Cores a partir de imagem - [Color Palette Generator](http://www.degraeve.com/color-palette/) - [Palette Generator](http://bighugelabs.com/flickr/colors.php) - [What´s Its Color](http://whatsitscolor.com/) - Outros - [Color Blender](http://meyerweb.com/eric/tools/color-blend/) - [Colour Check](http://www.etre.com/tools/colourcheck/) - [Colour Selector](http://www.limov.com/colour/) ## Conclusão Quando se trata de cores e exibição de imagens na web, algo que deve ser feito depois de o serviço feito, é "ajustar" o trabalho para a web. Então, confira o artigo "[Como otimizar imagens para web - guia de otimização de imagens](/miscelanea/como-otimizar-imagens-web-internet/)". Existem muitos e muitos sites que tratam sobre a teoria das cores na web. Alguns tratam de forma mais geral; outros mais pormenorizada. Mas são tantos e tantos que tentar sistematizar todos em um único artigo é algo bastante difícil de se fazer. Portanto, caso tenha algum complemento a fazer e/ou ferramenta para indicar, **comente**! --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml