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.

Características 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)

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 portfó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.

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 automaticamente e isso não garante 100% de acerto. O Bom senso e o bom gosto são muito importantes