O uso das cores em webdesign
Publicado em 02/03/06, na categoria Uso das Cores, Webdesign
O que é a cor:
A nossa retina possui dois tipos de células: Os cones responsáveis pela percepção das cores (especializados na captação das cores Azul, vermelho ou verde) e os bastonetes responsáveis pela distinção delas (e também pela nossa visão noturna). A cor nada mais é do que um estímulo enviado a retina e de acordo com a sua intensidade os cones fazem a decodificação transformando esse estímulo em uma percepção especifica.
Caracteristicas das cores:
O contraste: mede a diferença entre duas ou mais cores. No caso das fotos a seguir, entre o preto e o branco. Quanto mais alto o contraste mais a diferença é acentuada. Na primeira imagem o branco e o preto ficaram um pouco dissolvidos dificultando assim a sua separação. Na terceira imagem o contraste é tão alto que as partes mais claras ficam completamente brancas e as escuras pretas. Quanto mais alto o contraste, mas as cores se diferenciam.
O brilho mede a quantidade de cor branca adicionada a imagem. Quanto mais brilho mas esbranquiçadas ficarão as cores. Quanto menos brilho mais escuras.
A saturação mede a quantidade de uma determinada cor presente na mistura. Quanto mais saturada mais intensa e vibrante. Observe as variações de saturação nas cores primárias:
Ao definirmos as cores a serem utilizadas em um projeto precisamos ter em mente, antes da estética duas coisas:
- a resposta emocional à cor;
- deficiências na percepção das cores por um segmento significativo da platéia.
A resposta emocional à cor
A resposta emocional à cor é uma questão bastante complexa que envolve principalmente o contexto cultural do usuário.
Por exemplo: Um fábrica de assentos para vaso sanitário, não conseguiu vender assentos da cor verde em países do Oriente Médio, e também sofreu ataques, pois estaria ofendendo e agredindo o profeta Maomé, cuja cor-símbolo é o verde.
No ocidente algumas cores já são imediatamente assimiladas as suas características no contexto social.
- Vermelho: perigo, alerta, quente, excitante, paixão, sexo
- Azul: masculino, frio, calmo, confiável, estável
- Branco: pureza, honestidade, frio
- Pastel: feminino, sensibilidade, delicadeza, cálido
- Laranja: emocional, positivo, jovem
- Negro: densidade, seriedade, morte, autoridade, poder, estabilidade
- Rosado: feminino, cálido, jovem
- Verde: natureza, conforto, positivo (esperança)
O Fred do Usabilidoido, a algum tempo escreveu um ótimo artigo sobre esse assunto, com o título “Cor não é questão de gosto, é de cultura” vale a pena dar uma olhada.
Deficiências na percepção da cor
Uma pesquisa feita pelo estituto IBRAU em 2004 afirma que entre 8% e 20% da população sofre algum tipo de deficiência na percepção da cor devido a anomalias na codificação dos genes responsáveis pelos fotopigmentos nos cones (localizados no cromossomo X). Como os homens possuem apenas um cromossomo X eles são mais facilmente afetados, pois as mulheres necessitam ter seus dois cromossomos X prejudicados para apresentar um algum distúrbio.
Pessoas com essa deficiência têm a sua percepção das cores alterada ou em casos extremos, não percebem nenhuma cor, o que chamamos de Acromatopsia.
A forma mais comum de deficiência é a “verde-vermelho”. Isso não significa que pessoas com essa deficiência não sejam capazes de distinguir essas cores. O motivo do nome é que os cones responsáveis pela distinção dessas cores estão danificados. Deficiências nos cones com pigmentação azul são pouco freqüentes, e estão geralmente associadas a distúrbios mais sérios na visão.
Seja qual for o tipo de distúrbio, o número de pessoas com algum tipo de deficiência na distinção das cores é muito alto. É imprescindível que durante o processo de planejamento e criação levemos em conta esses agravantes.
A seleção de cores em projetos web
Ao definirmos a nossa paleta de cores para um site devemos levar em conta os seguintes fatores:
- Tema ou assunto - Sobre o que trata o site? O que o cliente deseja transmitir? Como seu cliente espera que o visitante se sinta ao acessar o site pela primeira vez? Alegre? Confiante? Curioso? Com essas informações em mão nós podemos começar a trabalhar e começar a definir se deverá ter cores claras e limpas ou fortes e vibrantes, se serão muitas cores e elementos decorativos ou se vamos priorizar o conteúdo.
- O publico alvo: Qual a classe social dos visitantes? E o sexo? Qual a faixa etária? Será para jovens que procuram diversão ou idosos que procuram passeios guiados para o fim de semana? Qual a experiência que esse visitante tem com a Internet?
Algumas dicas úteis para quem está começando
- Antes de tentar inovar saiba exatamente o que você está fazendo.
Quando nós começamos a ingressar no mercado de trabalho, lemos por aí que é preciso “inovar”, “arriscar” e “criar coisas novas”, cuidado! Sem dúvida criatividade e inovação é o carro-chefe de qualquer portifólio, mas se você não domina o assunto não arrisque demais. Não use combinações de cores inusitadas sem saber o efeito que elas causam. Lembre-se que cada monitor tem as suas configurações de brilho, contraste e saturação e que por isso, o que parece legível pra você pode ser insuportavelmente cansativo para outros usuários. - O texto deve sempre ter o maior contraste possível com fundo escolhido. A opção de texto em preto sobre fundo branco é a mais efetiva e já estamos cansados de saber disso.
- Se você está passando por uma crise criativa e não consegue planejar uma paleta de cores eficiente para um projeto, selecione uma única cor e trabalhe com ela em diferentes tons.
Dicas de cores baseadas no velho Disco de Newton
Eis aqui a nossa grande referencia de cores. Através dessa imagem o “disco de Newton” também chamado de “Espectro” é possível entender um pouco melhor as combinações de cores.
Ele é composto pelas 3 cores primarias (azul, amarelo e vermelho) intercaladas com as cores secundárias ( Verde, Laranja, púrpura e violeta e verde azulado).
Assim:
- amarelo + vermelho = Laranja
- Vermelho + azul = Púrpura / violeta
- Azul + amarelo = Verde
A cores primarias sempre combinam muito bem com as suas cores secundárias: Amarelo + Laranja, Laranja + Vermelho, vermelho + Violeta, Violeta+ Azul e Azul + Verde. Elas se combinam, mas apresentam um baixo contraste. Ou seja: você conseguirá uma linda combinação usando azul e verde mas nunca como fundo e fonte respectivamente, porque o contraste é muito pequeno.
O ideal para fundo e texto é combinar a parte de cima com a parte de baixo do disco. Uma das combinações mais legíveis é o Azul + amarelo.
Ao redor do nervo óptico, no centro da retina, não há cones azuis. Evite, portanto, utilizar o azul puro (#0000FF) para texto, líneas muito finas ou figuras pequenas, já que são difíceis de ver.
Se o contexto cultural e temático é adequado, o azul é uma excelente cor de fundo, especialmente em telas de computador, já que contribui a tornar as líneas de rasterização mais difusas.
Usabilidade e Design
Seguir à risca as recomendações acima não garante um design atraente; sempre há um espaço enorme para.a criatividade artística.
*update
Links Sugeridos e referência bibliografica
- Color In Motion
- Uma apresentação em flash muito interessante sobre as conotações das cores.
- Color Symbolism
- Simbolismo e teoria das cores (em inglês)
- Teoria das cores - Sobre sites
- Um pouco mais de teoria
Links: Geradores de Cores
Os sites a seguir são de geradores de paletas de cores. Tenha muito cuidado na hora de utilizá-los pois elas são geradas automáticamente e isso não garante 100% de acerto. O Bom senso e o bom gosto são muito importantes
- ColorBlender.com
- Color Scheme Generation
- Color Blender
- Colr in Motion
- Color Schemer Online v2
- Color Schemer Gallery
Assinar
Hum post fresquinho!
Bom. Gostei do artigo. Você poderia citar mais fontes para estudo como o Color in Motion.
[Responder]
Dhienifer Rosa Martins reply on 27/12/07 12:11:
Eu fiz essa experiência na sala de aula.
Descobri que a mistura de todas as cores, quando gira o arco- íris acaba ficando branco.
As dicas que peguei no site me ajudou muito!
Parabéns pelo site, ele é muito interessante e informativo!!!
[Responder]
bom sim, mas eu já citei tantas fontes e tantas vezes que acheio meio saturado. Mas vou editar o post e seguir seu conselho
[Responder]
catia reply on 19/08/07 8:00:
posso te conhecer?
[Responder]
Maravilhoso artigo!
Parabéns!
[Responder]
Excelente, claro, rápido e didático, melhor, adorei las colores de tu sítio.
[Responder]
cor nada mais é do q um estimulo…etc nao se fie nisso
[Responder]
gostaria desaber sobre acor,circulo das cores,pissicologia das cores,nuânces,policromia,monocromia.
[Responder]
Muito bem bolado seu blog… Este artigo está bem interessante! Realmente encontrei o que procurava!
Abraços!
[Responder]
Obrigada Raphael!
Fico feliz em saber que os visitantes vem gostando dos meus estudos
Isso é bem motivador
Abraços
[Responder]
catia reply on 19/07/07 7:58:
Vai po caralho
[Responder]
Fala Daniele, show de vola o seu site. Gostaria de saber se você tem algum livro para indicar que faça referência somente as cores para web? Obriigado
[Responder]
Tenho um sofá laranja, preciso comprar um outro tapete, pois o meu é cor creme, queria saber qual cor combinará, pois o tapete creme suja muito e moro em, agradeço.
[Responder]
Moro em apartamento é dificil para lavar.
[Responder]
Floyd Harrison reply on 19/07/08 7:54:
upher trigoneutism lutemaking navalist tiller tephritic randir anaplasma
New Orleans Plaza Hotel and Convention Center
http://www.rxlist.com/cgi/generic3/arixtra.htm
[Responder]
Preciso da reposta sobre meu tapete creme e sofá laranja.Aguardo retorno.Obrigada.
[Responder]
sabe q eu gosto do seu espaço!e do gatinho!
[Responder]
Você escolheu cores muito interessantes para o seu Blog, há um ar feminino na concepção ou pelo menos na minha percepção. Não acredito em cores e cultura, todos fomos um pouco influenciados por Van Gogh e muito influênciados por Miró e Picasso.
[Responder]
interessante o artigo.. tava estudando sobre as cores… aprendi sobre os tais dos bastonetes(são células sensiveis a luminosidade) e os cones(celulas capazes de reconhecer as cores se encontram no olho humano q nem os bastonetes) q temos se não me negano para cada cone azul temos 20 vermelho e 40 verdes… ou seja… se uma apresentação tiver muito azul.. cansará a visão da pessoa, pois existem poucos cones azuis o q causará cansao visual… no caso do vermelho e o verde.. o vermelho é uma cor muito quente para um fundo, ja o verde se torna um fundo melhor para se trabalhar, pois a quantidade de cones é bem maior…
um uso indevido para sites, folhetos etc é a utilização do verde com o vermelho…
como assim??
explicarei…
se um fundo é verde e a letra q está contida nesse fundo for vermelha trará dificuldades na leitura…(vice versa tbm)
mas pq??
bom.. pensamos assim… se temos grandes quantidade de cones verdes e vermelhos.. a utilização deles uma hora um uma hora o outro trará fadiga aos olhos.. e cansará a visão da pessoa tornando uma leitura ruim.. pessima
não sei se vcs entenderam minha explicação..mas espero que essas informações ajudem para alguma coisa
gostei do site… espero poder conversar com vc dani…xará…
[Responder]
bom, não foi muito que eu precisava de mais informação mesmo assim muito obrigado.
[Responder]
achei o assunto muito interessante
[Responder]
Muito bom,
Ajuda bastante esse tipo de conteúdo ^^
[Responder]
um bom artigo, objetivo, sem muito bla bla bla e dá uma idéia pratica do assunto.
gostei mesmo.
[Responder]
Muito bom seu artigo, tirou uma dúvida minha.
Gratz!
[Responder]
Menina! Que site maravilhoso você fez! Adorei, vou voltar sempre e recomendar principalmente pros diretores de arte da agência em que eu trabalho. Parabéns!
[Responder]
Achei muito legal e instrutivo o seu site , parabéns . Já o coloquei em meus favoritos , achei maravilhoso mesmo . Um abraço , Sandra Waihrich Tatit … advogada … Rio Grande do Sul … Brasil .
[Responder]
Oi Daniele, tudo bem? Espero que sim
Daniele, a algum tempo leio o seu blog, sou sincero quando digo que é um dos melhores blogs que já li com referencia a nossa área de atuação, a Web. Hoje enquanto lia essa matéria que faz referencia ao uso das cores na web encontrei o que pra mim parece um erro na parte que fala sobre “Resposta emocional da cor”. Lá vocês descreve a emoção que cada cor passa. O erro se da ao que você chamou de cor “Negro”, pois negro não é cor, e sim raça. Não estou fazendo qualquer referencia ao racismo nem nada do tipo, só achei legal levantar esse ponto por questões étnicas. Ok?
# Laranja: emocional, positivo, jovem
# Negro: densidade, seriedade, morte, autoridade, poder, estabilidade
# Rosado: feminino, cálido, jovem
Daniele, você está de parabéns pelo excelente trabalho que vem fazendo. Adoro o seu blog, espero ansioso por novos posts.
É valido ressaltar que estou escrevendo isso apenas como observação, ou seja, você não tem a menor obrigação de corrigir se não achar que seja melhor.
Sem mais….até logo
[Responder]
[...] vantagem em se usar o azul é que praticamente não existem distúrbios de visão relacionados a ela, apenas os problemas mais sérios afetam a identificação dessa cor. O azul é [...]
o uso de solvente nas tintas flexográficas vão deixando as cores mais claras. O que devo fazer para melhorar, por exemplo o azul marinho, o vermelho e o verde.
[Responder]
OI TUDO BEM DANI,AQUI É A TIA ANA MOURA, ADOREI VI RAPIDAMENTE,MAS PROMETO LER COM CALMA TUDO,MAS TUDINHO,MAS SEM FAZER UMA LEITURA PROFUNDA,JÁ ME APAIXONEI LINDO MARAVILHOSO, CONTINUE CADA VEZ MAIS AMADA, QUE DEUS TI ABENÇOE 1001 BJS TIA ANAMOURA
[Responder]