Sobre Cor e Webdesign

É possível analisar a Teoria da Cor de diversas maneiras. Podemos escolher uma

abordagem física, psicológica, cultural, filosófica ou artística para entendermos as cores.
Todos estes estudos são interessantes e extremamente relevantes para designers e
desenvolvedores. Mas na hora de colocar a mão na massa decidir entre sistemas e
organizar uma paleta de cores bacana pode parecer uma tarefa confusa até para os
designers veteranos. Quais são as melhores práticas? Quais ferramentas podem facilitar
o uso, análise, inspiração e criação de paletas de cores para a internet? A intenção deste
artigo é responder a estas perguntas e fornecer algumas dicas práticas sobre cor e
webdesign.

Nomeando Cores
Dar nome a cores sempre foi um problema. Linguagem é uma coisa extremamente
subjetiva e arbitrária. Cada grupo cultural possui uma visão de mundo diferente e
portanto dá nome ao objetos a sua própria maneira. Com as cores não podia ser
diferente.

Outro grande problema é que a percepção física de cores varia de pessoa para pessoa.
Cor é a maneira que o olho interpreta a luz refletida nos objetos. O ser humano possuí
células chamadas cones. Estas células são responsáveis por entender os diferentes
padrões de comprimento de onda e entregar esta informação ao cérebro. E esta
percepção pode variar individualmente. Pesquisas mostram que existe uma diferença na
maneira com a qual homens e mulheres classificam as cores, por exemplo. E até pessoas
com super visão que enxergam milhões de cores a mais que alguem comum.

A Era Web Safe

Nos primórdios da web tudo era relativamente mais simples. Os chips gráficos
trabalhavam com apenas 8-bits e eram capazes de reproduzir exatamente 256 cores
diferentes. 216 delas ganharam um nome em inglês (o restante ficou reservado para uso
interno de cada sistema) e precisávamos consultar uma [É possível analisar a Teoria da
Cor de diversas maneiras. Podemos escolher uma abordagem física, psicológica,
cultural, filosófica ou artística para entendermos as cores. Todos estes estudos são
interessantes e extremamente relevantes para designers e desenvolvedores. Mas na hora
de colocar a mão na massa decidir entre sistemas e organizar uma paleta de cores
bacana pode parecer uma tarefa confusa até para os designers veteranos. Quais são as
melhores práticas? Quais ferramentas podem facilitar o uso, análise, inspiração e
criação de paletas de cores para a internet? A intenção deste artigo é responder a estas
perguntas e fornecer algumas dicas práticas sobre cor e webdesign.

Nomeando Cores
Dar nome a cores sempre foi um problema. Linguagem é uma coisa extremamente
subjetiva e arbitrária. Cada grupo cultural possui uma visão de mundo diferente e
portanto dá nome ao objetos a sua própria maneira. Com as cores não podia ser
diferente.
Outro grande problema é que a percepção física de cores varia de pessoa para pessoa.
Cor é a maneira que o olho interpreta a luz refletida nos objetos. O ser humano possuí
células chamadas cones. Estas células são responsáveis por entender os diferentes
padrões de comprimento de onda e entregar esta informação ao cérebro. E esta
percepção pode variar individualmente. Pesquisas mostram que existe uma diferença na
maneira com a qual homens e mulheres classificam as cores, por exemplo. E até pessoas
com super visão que enxergam milhões de cores a mais que alguem comum.

A Era Web Safe

Nos primórdios da web tudo era relativamente mais simples. Os chips gráficos
trabalhavam com apenas 8-bits e eram capazes de reproduzir exatamente 256 cores
diferentes. 216 delas ganharam um nome em inglês (o restante ficou reservado para uso
interno de cada sistema) e precisávamos consultar uma]3 na hora de escolher a matiz
mais bacana. Mesmo com a evolução das placas de video a preocupação com
acessibilidade e retrocompatibilidade forçou alguns desenvolvedores a se prenderem
aquele esquema inicial. Estas eram as cores “web safe”, ou seja, aquelas que
supostamente seriam exibidas corretamente em todos os browsers. Posteriormente foi
descoberto que apenas 22 destas cores eram realmente seguras. Mas isto é outra
história… Felizmente a tecnologia evoluiu e os monitores coloridos atualmente tem 24
bits e são capazes de renderizar exatamente 16,777,216 cores. Os dias de web safe
ficaram para trás. Mas catalogar milhões de cores em um computador com base em seus
respectivos nomes e suas variações em cada língua através de uma tabela passou a ser
impossível! É mais prático entender a mecânica por trás dos códigos para assim
usarmos as cores na internet de maneira efetiva.

Mas se você ainda precisa de um nome humano para se sentir mais feliz pode utilizar
alguma ferramenta como [É possível analisar a Teoria da Cor de diversas maneiras.
Podemos escolher uma abordagem física, psicológica, cultural, filosófica ou artística
para entendermos as cores. Todos estes estudos são interessantes e extremamente
relevantes para designers e desenvolvedores. Mas na hora de colocar a mão na massa
decidir entre sistemas e organizar uma paleta de cores bacana pode parecer uma tarefa
confusa até para os designers veteranos. Quais são as melhores práticas? Quais
ferramentas podem facilitar o uso, análise, inspiração e criação de paletas de cores para
a internet? A intenção deste artigo é responder a estas perguntas e fornecer algumas
dicas práticas sobre cor e webdesign.

Nomeando Cores
Dar nome a cores sempre foi um problema. Linguagem é uma coisa extremamente
subjetiva e arbitrária. Cada grupo cultural possui uma visão de mundo diferente e
portanto dá nome ao objetos a sua própria maneira. Com as cores não podia ser
diferente.

Outro grande problema é que a percepção física de cores varia de pessoa para pessoa.
Cor é a maneira que o olho interpreta a luz refletida nos objetos. O ser humano possuí
células chamadas cones. Estas células são responsáveis por entender os diferentes
padrões de comprimento de onda e entregar esta informação ao cérebro. E esta
percepção pode variar individualmente. Pesquisas mostram que existe uma diferença na
maneira com a qual homens e mulheres classificam as cores, por exemplo. E até pessoas
com super visão que enxergam milhões de cores a mais que alguem comum.

A Era Web Safe

Nos primórdios da web tudo era relativamente mais simples. Os chips gráficos
trabalhavam com apenas 8-bits e eram capazes de reproduzir exatamente 256 cores
diferentes. 216 delas ganharam um nome em inglês (o restante ficou reservado para uso
interno de cada sistema) e precisávamos consultar uma [É possível analisar a Teoria da
Cor de diversas maneiras. Podemos escolher uma abordagem física, psicológica,
cultural, filosófica ou artística para entendermos as cores. Todos estes estudos são
interessantes e extremamente relevantes para designers e desenvolvedores. Mas na hora
de colocar a mão na massa decidir entre sistemas e organizar uma paleta de cores
bacana pode parecer uma tarefa confusa até para os designers veteranos. Quais são as
melhores práticas? Quais ferramentas podem facilitar o uso, análise, inspiração e
criação de paletas de cores para a internet? A intenção deste artigo é responder a estas
perguntas e fornecer algumas dicas práticas sobre cor e webdesign.

Nomeando Cores
Dar nome a cores sempre foi um problema. Linguagem é uma coisa extremamente
subjetiva e arbitrária. Cada grupo cultural possui uma visão de mundo diferente e
portanto dá nome ao objetos a sua própria maneira. Com as cores não podia ser
diferente.

Outro grande problema é que a percepção física de cores varia de pessoa para pessoa.
Cor é a maneira que o olho interpreta a luz refletida nos objetos. O ser humano possuí
células chamadas cones. Estas células são responsáveis por entender os diferentes
padrões de comprimento de onda e entregar esta informação ao cérebro. E esta
percepção pode variar individualmente. Pesquisas mostram que existe uma diferença na
maneira com a qual homens e mulheres classificam as cores, por exemplo. E até pessoas
com super visão que enxergam milhões de cores a mais que alguem comum.

A Era Web Safe

Nos primórdios da web tudo era relativamente mais simples. Os chips gráficos
trabalhavam com apenas 8-bits e eram capazes de reproduzir exatamente 256 cores
diferentes. 216 delas ganharam um nome em inglês (o restante ficou reservado para uso
interno de cada sistema) e precisávamos consultar uma]3 na hora de escolher a matiz
mais bacana. Mesmo com a evolução das placas de video a preocupação com
acessibilidade e retrocompatibilidade forçou alguns desenvolvedores a se prenderem
aquele esquema inicial. Estas eram as cores “web safe”, ou seja, aquelas que
supostamente seriam exibidas corretamente em todos os browsers. Posteriormente foi
descoberto que apenas 22 destas cores eram realmente seguras. Mas isto é outra
história… Felizmente a tecnologia evoluiu e os monitores coloridos atualmente tem 24
bits e são capazes de renderizar exatamente 16,777,216 cores. Os dias de web safe
ficaram para trás. Mas catalogar milhões de cores em um computador com base em seus
respectivos nomes e suas variações em cada língua através de uma tabela passou a ser
impossível! É mais prático entender a mecânica por trás dos códigos para assim
usarmos as cores na internet de maneira efetiva.

Mas se você ainda precisa de um nome humano para se sentir mais feliz pode utilizar
alguma ferramenta como]4 para descobrir um (em inglês) a partir de seu respectivo
código. Uma opção em português é navegar em uma lista como a da Wikipedia. Não
que isto tenha algum aspecto prático no dia-a-dia. Explicar para o seu cliente qual é a
cor Feldspato pode ser mais complicado do que simplesmente mostrar o trabalho, mas
você pode impressionar os seus amigos na próxima vez que jogar Stop.

Sistemas de Cores
RGB

O RGB (Red, Green e Blue – ou Vermelho, Verde e Azul) é um sistema de cores

aditivo projetado para ser utilizado em dispositivos eletrônicos. Monitores são pretos e
iluminados por pontos de luz. Portanto você parte da ausência de cor e vai “somando”
pontos de luz vermelhos, verdes e azuis até chegar na cor desejada.

A estrutura é composta por 3 pares de números de 3 dígitos cada variando do 0 ao 255,

quanto mais alto é o número mais clara é a cor. Através destas combinações podemos
chegar a mais de 16 milhões de cores (256 x 256 x 256).

É possível utilizar cores do sistema RGB em layouts diretamente de suas folhas de

estilo. Para isto basta declarar o valor dos canais vermelho, verde e azul separados por
virgula.
Vamos imaginar que o seu layout possui um título azul. A sintaxe em CSS ficaria
assim:

h1 {
color: rgb(0, 0, 255);
}

Com as novidades do CSS3 o RGB ganhou um upgrade e tornou-se RGBA. O canal A

(alpha) é responsável por controlar a opacidade das cores dos elementos em CSS sem
afetar outros itens afiliados. Para isto basta declarar um valor de 0.1 a 1 separado por
ponto. Este valor corresponde ao nível de transparência sendo 1 sólido e 0 invisível.

O mesmo título do nosso exemplo com 50% de transparência ficaria assim:

h1 {
color: rgb(0, 0, 255, 0.5);
}

O sistema Hexadecimal

Se você está lendo este artigo provavelmente já está familiarizado com os tripletos
hexadecimais. São sequências numéricas que representam cores formadas a partir de
uma combinações de 6 caracteres precedidos de uma hashtag. Mas você sabe a lógica
por trás do sistema?

Os códigos hexadecimais são compostos através de uma combinação de três conjuntos

de pares formados a partir de números de 0 a 9 e letras de A a F. Quanto mais alto o
número mais clara é a cor e quanto mais baixo o número – você adivinhou! – mais
escura. Por isso que #000000 é preto. Se o código for composto de pares que se repetem
como no caso de #444444, por exemplo, é possível utilizar a formula abreviada #444. O
simbolo # serve apenas para informar que se trata de um código hexadecimal.

A sintaxe acredito ser já conhecida de todos:

h1 {
color: #0000ff;
}

Cada campo pode conter apenas um caractere. A função das letras é representar os
números de dois dígitos, algo como o que acontece com o valete, dama e rei em cartas
de baralhos. E é daí que vem o nome hexadecimal. São números de base 16. Ou seja, o
A representa o 10, o B o 11 e assim por diante até a letra F. Por isto que a cor mais clara
de todas, o branco, é representado por #FFFFFF.

Cada par é responsável por uma cor aditiva do esquema RGB. Os primeiros 2 números
controlam o vermelho, os 2 seguintes o verde e os dois últimos o azul. Ou seja #ff0000
é o vermelho mais claro, #00ff00 é o verde mais claro e #0000ff é o azul mais claro.
Como saber isto pode te ajudar? Simples, através deste mecanismo você pode fazer
ajustes de cores no seu design diretamente do CSS de maneira prática e lógica. Você
pode deixar uma matiz mais clara ou escura apenas alterando o valor dos pares
numéricos.

Para esquentar uma cor basta aumentar a quantidade de vermelhos (primeiro par) e
diminuir a quantidade de azul (último par). Para esfriar basta fazer o processo inverso.
HSL

A escala das cores tanto em RGB quanto em códigos HEX varia entre o eixo claro-
escuro. Estes modelos deixam de lado outras maneiras mais intuitivas de classificação
de cores como matiz e saturação. O HSL surgiu para preencher este vácuo. A idéia aqui
é distribuir as cores não em um eixo vertical mas sim em um modelo de cilindro. As
cores não são somadas ou subtraídas, mas sim distribuídas ao longo de um circulo
cromático. Cada matiz representa um grau do cilindro entre 0 e 360.
A sintaxe dele é da seguinte maneira:

hsl (hue, saturation%, lightness%);

Sendo o primeiro valor a matiz, o segundo a saturação e o terceiro a quantidade de

iluminação. O nosso título azul ficaria assim:

h1 {
color: hsl(240, 100%, 50%);
}

Da mesma forma que o RGB o HSL também pode ser utilizado em CSS e possui um
canal alpha (HSLA). O mesmo título com 50% de opacidade:

h1 {
color: hsl(240, 100%, 50%, 0.5);
}

Embora possua suas vantagens, principalmente para quem esta acostumado com
divisões mais artísticas de cores, o HSL ainda não se popularizou… Suponho que a
razão é por que alguns softwares gráficos utilizados por designers, como o Photoshop,
simplesmente não possuem um misturador de cores compatível com o formato. Todas
as cores utilizadas no layout teriam que ser convertidas manualmente para HSL, o que
poderia significar um gasto a mais em tempo. Existem alguns plugins que prometem
facilitar o processo, mas as outras alternativas (RGBA e HEX) já funcionam muito bem.
Até que os programas gráficos mais populares sejam compatíveis, o HSL não deve
ganhar muito espaço.
CMYK

Já aconteceu de você abrir uma foto no computador e reparar que as cores estão bem
estranhas? Pois é, o estagiário provavelmente fechou o arquivo em CMYK. Este
formato foi pensado exclusivamente para pigmentos de impressão.

CMYK é uma sigla para Cyan, Magenta, Yellow e Black (Ciano, Magenta, Amarelo e
Preto). Se você está se perguntando por que a sigla para preto é K existem duas
explicações provavéis. A primeira é que o K representa Key já que o preto é uma cor-
chave. A outrea é simplesmente para não confundirem com o B de Blue no RGB.

O CMYK é um sistema de cores subtrativo já que você parte do branco e vai retirando
luminosidade até chegar na cor desejada. A impressão em CMYK é a partir de pontos
coloridos chamados retículas. Como nosso foco aqui é a internet não vou entrar em
muitos detalhes sobre este sistema. Mas vale a pena conhecer para saber como não
salvar arquivos para a web.

Qual sistema utilizar?

Tudo depende das características do seu layout. Considerando esquemas de cores flat o
hexadecimal serve muito bem. Alias, inspirada pelo visual minimalista do Windows 8
as cores vivas e sólidas são uma grande tendência em 2013. Mas se o seu layout faz uso
de transparências, gradientes e sombras o RGBA vale bastante a pena.

Mas você não precisa prender-se a apenas uma opção. Você pode combinar, em um
mesmo CSS, sistemas diferentes. Uma prática comum é utilizar HEX para cores sólidas
e RGBA apenas para situações onde o canal alpha é importante. De qualquer maneira
ter a mão uma tabela de equivalência pode ser útil. Sorte que existem conversores
automáticos como o ColorHexa para ajudar nesta tarefa. Basta digitar um código de cor
(de qualquer tipo) ou um nome em inglês para descobrir os valores equivalentes em
HEX, Binário, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE-LCH,
XYZ e xyY. Só isto já seria ótimo, mas a ferramenta ainda tem outras informações
interessantes como sugestões de esquemas de cores e alguns snippets de CSS para você
visualizar aquela cor aplicada a um texto, borda e background de uma div. Outra função
bacana é a possibilidade de visualizar como uma pessoa com daltonismo enxergaria
aquela cor.

Acessibilidade
Estima-se que 8% dos homens do mundo e 0.5% das mulheres sofre de algum tipo de
dificuldade de percepção de cores como o daltonismo. Para garantir que estas pessoas
poderão acessar o conteúdo da sua página é importante não depender da cor para indicar
elementos importantes. Por exemplo, indicar campos de formulário com erros apenas
com a cor vermelha não é distinção suficiente. Seria interessante, neste caso,
complementar a informação com algum outro recurso gráfico como um ícone. Se você
tem um amigo com daltonismo é interessante pedir para ele navegar no site e dizer se
encontra algum problema. Como nem sempre temos a oportunidade de realizarmos este
tipo de teste uma experiência que pode ajudar é retirar a saturação de todas as cores do
layout em um programa gráfico. Se as informações importantes ainda estão claras e com
bom contraste apenas em tons de cinza o seu layout é acessível. Você pode ainda
utilizar alguma ferramenta online como o Color Filter para checar como pessoas com os
tipos mais comuns de daltonismo enxergam sua página.

Inspiração
Cores de Marcas

Na hora de criar um layout um designer sempre tem a mão sua própria paleta de cores.
Mas quando é preciso utilizar as cores de outras empresas a coisa complica! Qual é
exatamente o tom de azul do Facebook? E do Twitter? E o código hexadecimal do verde
Android? A missão do Brand Colors é justamente servir como um catálogo de cores dos
gigantes da internet. Além de ser útil para descobrir rapidamente as cores de marcas
famosas, a ferramenta é um bom panorama de quais são os tons mais utilizados na rede.

Cores da Web

Que tal ir um passo além da cor predominante e descobrir a paleta de cores completa de
uma marca? Através do Webcolour Data você pode explorar as cores de qualquer site na
internet. Basta inserir a URL e se inspirar no esquema de cores do seu site favorito. A
ferramenta exibe resultados (e seus respectivos códigos HEX) em gráficos interessantes
com base em porcentagem de uso, distribuição de tons, roda de cores e sites com paletas
de cor semelhantes. O Webcolour Data também pode ser útil para realizar uma análise
de design e verificar se as cores de um site estão consistentes com aquelas propostas na
identidade visual.
Cores de Fotos

O Color Thief tem uma proposta semelhante. Mas a idéia aqui é explorar paletas
baseadas em fotos. Basta realizar um upload de imagens que a ferramenta captura o
esquema de cores predominante.
Cores de Filmes

O Tumblr Movies In Color pode ser uma grande fonte de inspiração para quem curte
cinema. A idéia aqui é conhecer a paleta de cores utilizada na cinematografia de filmes
como 2001 – Uma Odisséia no Espaço, O Fabuloso Destino de Amélie Poulain, Clube
da Luta e Inception. Você pode navegar por imagens, títulos dos filmes ou nome do
diretor de fotografia. Vale o clique!

Criando suas próprias paletas

Criar esquemas de cores pode ser uma tarefa mais prática utilizando algum gerador
como o [É possível analisar a Teoria da Cor de diversas maneiras. Podemos escolher
uma abordagem física, psicológica, cultural, filosófica ou artística para entendermos as
cores. Todos estes estudos são interessantes e extremamente relevantes para designers e
desenvolvedores. Mas na hora de colocar a mão na massa decidir entre sistemas e
organizar uma paleta de cores bacana pode parecer uma tarefa confusa até para os
designers veteranos. Quais são as melhores práticas? Quais ferramentas podem facilitar
o uso, análise, inspiração e criação de paletas de cores para a internet? A intenção deste
artigo é responder a estas perguntas e fornecer algumas dicas práticas sobre cor e
webdesign.

Games

Quem disse que você não pode aprender se divertindo? Alguns webgames como o Color
Method testam o seu conhecimento e percepção de cores com base em tom, saturação,
cores complementares, análogas… Cuidado, pode ser viciante!
Sobre Cor e Webdesign II
| Entenda a diferença entre matiz, luminosidade e saturação, aprenda a criar paletas de
cores funcionais e conheça a fórmula mágica do contraste.

por Dani Guerrato 23/09/2013

Propriedades
Não vou entrar muito na parte física ou psicológica da coisa, ok? Existem muitos
lugares onde vocês podem (e devem) ler sobre isto. Como o objetivo aqui é teoria da cor
especificamente para a internet vamos dar uma revisada básica nos conceitos
fundamentais e partir para as dicas práticas.

Basicamente podemos classificar as cores através de alguns aspectos. São eles…

Matiz
Grau que um estimulo de cor pode ser descrito como parecido ou diferente de outro.
Confuso, né? Pense na matiz como a personalidade da cor. As matizes são mais ou
menos análogas aos nomes que damos para as tonalidades diferentes de cores. É pela
matiz que você diferencia o azul do vermelho e do verde, por exemplo. Mas pense na
cor pura, sem adição de preto ou branco. Azul marinho ou azul pastel são a mesma
matiz: azul.
Saturação
A saturação é a intensidade da cor. Imagens com alta saturação são mais vivas e
vibrantes. Já imagens com baixa saturação são mais neutras e mudas, mais próximas do
cinza. Se você reduzir toda a saturação de uma imagem no monitor ela vai ficar somente
em tons de cinza.
Luminosidade
A luminosidade é a escala de claridade. Esta propriedade está ligada a percepção de
brilho. Quanto maior a luminosidade de uma cor mais próxima ela estará do branco e
quanto menor a luminosidade mais próxima ela estará do preto.
Contraste
Em linhas gerais contraste é uma relação de oposição ou distinção entre dois objetos.
Ou seja: coisas que são diferentes umas das outras. Em teoria da cores isto pode
significar uma diferença em relação a matiz, saturação e / ou luminosidade. Viu por que
era importante entender os outros conceitos? Quanto mais alto o contraste mais
diferentes são as cores e portanto mais fácil de serem distinguidas, quanto mais baixo
mais próximas elas são e mais difícil é esta tarefa.
Uma questão de percepção
A percepção de contraste varia de pessoa para pessoa e pode piorar com fatores como
envelhecimento ou deficiências visuais… Ou seja, bom contraste é questão de
acessibilidade! Algumas pesquisas indicam que jogar videogames melhor a percepção
de contraste, então está aí uma boa desculpa para a jogatina!

Bom vs. Mal Contraste

Mas não basta ser simplesmente diferente para ser bom. Você já sabe intuitivamente que
algumas combinações de cores são esquisitas. Um texto magenta em um fundo verde
limão, por exemplo, é bem difícil de ler. Em termos práticos, principalmente quando
estamos falando de fundos para texto, contraste entre luminosidade diferentes são mais
confortáveis para a visão. Por isto que é ótimo ler textos pretos em um fundo branco.
Ou vice-versa. Evite cores de luminosidade semelhante, mesmo que elas possuam
matizes diferentes.
Quer um bom teste prático? Se o texto estiver vibrando (dando a impressão de estar
pulsando) significa que é péssimo para a leitura!

A fórmula do contraste

Ainda está na dúvida? Bem, a W3C criou uma fórmula para medir o contraste levando
em conta a relação entre brilho e diferença de cor.

Vamos considerar:

R = vermelho

G = verde

B = azul

1 = cor número 1

2 = cor número 2

Para calcular o brilho (luminoside) utilize o valor RGB sendo:

((R X 299) + (G X 587) + (B X 114)) / 1000

Para calcular a diferença de cor:

(máximo (R1, R2) – mínimo (R1, R2)) + (máximo (G1, G2) – mínimo (G1,G2)) +
(máximo (B1, B2) – mínimo (B1, B2))

O contaste está bom se o brilho for maior que 125 e a diferença de cor maior que 500.

Se você não curte matemática use esta calculadora. Basta inserir os valores em HEX ou
RGB.

Baixo contraste como estilo

Antes de sair apontando o dedo que o layout do amiguinho está com baixo contraste
lembrem-se que existem alguns contextos onde isto é proposital. A intenção pode ser
diminuir o destaque de algum elemento ou simplesmente criar um efeito interessante.
Mas utilize esta técnica com moderação e apenas para trechos curto de texto. Tudo bem
utilizar o baixo contraste em um banner – título branco sobre imagem colorida, por
exemplo – mas se você utilizar esta técnica para grandes blocos de texto é provável que
seu usuário nem se dê ao trabalho de ler. Alias, quanto menor mais importante o
contraste!

Circulo Cromático
Bem, um mano chamado Goethe achou que seria interessante organizar esta zona. Em
1810 ele dividiu as cores do espectro visível (aquelas do arco-íris que a gente aprende
na escola) em um circulo cromático, ou, para os íntimos, roda das cores. Quanto mais
longe uma cor estiver no círculo, maior o contraste.
Este círculo cromático foi a base de diversos sistemas de cores. De métodos artísticos
para mistura de cores até esquemas voltados para a computação gráfica. O RGB e o
CMYK possuem os seus próprios círculos cromáticos.

Complementares
Cores complementares são as cores opostas no circulo cromático. Como o contraste é
super alto elas são bem uteis para chamar atenção. Isto pode, dependendo da situação,
até salvar a vida de uma pessoa. Boias e botes salva-vidas, por exemplo, são laranjas
para contrastar com o azul do mar. E azul e laranja são – você já adivinhou – cores
complementares! Este tipo de contraste é ótimo para ressaltar elementos em imagens e
layouts.
Mas tome cuidado! A tendência é que cores complementares produzam vibrância e
ressaltarem a luminosidade uma da outra quando próximas. Ou seja, contraste deste tipo
são péssimos para textos. Quando combinados com matizes com luminosidade alta o
efeito é desastroso. Lembra-se do texto rosa no fundo verde? Pois é. São cores
complementares no circulo RGB.
Análogas
São as cores vizinhas no circulo. Pelas matizes serem mais parecidas o contraste tende a
ser mais baixo e a combinação mais harmoniosa.

Paletas funcionais
Ok. Chega de teoria. Vamos ver como aplicar estas informações para a criação de
layouts. Lembre-se que em design você não deve escolher nada aleatoriamente ou por
que “fica bonitinho”. É preciso ter um propósito e uma função para os elementos e com
a cor não poderia ser diferente. Uma técnica útil é atribuir uma função para cada cor e
desta forma transmitir significado.

Principal

O primeiro passo é escolher uma matiz principal. Normalmente esta cor já está definida
no branding e costuma corresponder a cor dominante do logotipo, por exemplo. Se não
for o caso tente tomar uma decisão de acordo com a mensagem que você deseja
transmitir. Leve em consideração os temas retratados neste artigo e pesquise ao menos o
básico sobre psicologia das cores. Esta cor principal deverá ser utilizada para elementos
como títulos em destaque, links, botões, navegação, etc.

Secundária

O segundo passo é definir uma cor secundária. A função desta cor será criar um
contraste com a primeira. Ela é útil para itens da interface que demandam extrema
atenção como chamadas para a ação (botões de compra, cadastro, login, etc.) ou títulos
pontuais. Esta cor deverá ser utilizada com cuidado para que crie realmente um destaque
em relação ao restante do layout. Uma dica é escolhe ruma cor análoga ou
complementar como cor secundária.

Base

Com estas duas cores definidas o próximo passo é definir uma base. Esta é a cor que vai
servir de background, portanto escolha matizes que tenham pouca vibrância. Procure
utilizar tons neutros como preto, branco, cinza ou uma variação com grande contraste da
cor principal. Por exemplo, se sua matiz principal for azul escuro você pode definir um
azul bem clarinho como base. Ou vice-versa.

Texto

A próxima função é texto. O segredo aqui é criar um bom contraste com a base. A
legibilidade é essencial. Na dúvida utilize base branca e texto preto ou cinza escuro.
Não tem como errar!

Alerta

Esta é a cor utilizada para momentos de extrema atenção como mensagens de erro e
validação de formulário. Matizes quentes como amarelo, vermelho e laranja costumam
ser boas cores de alerta. Lembre-se que isto não significa necessariamente textos. Esta
cor pode ser utilizada como background de uma janela, ícone ou botão, por exemplo.
Com o uso inteligente das cores o seu usuário intuitivamente sabe quando aconteceu ou
não um problema sem precisar ao menos ler a mensagem.

Sucesso

A função desta cor é transmitir textos relacionados a acertos. A mensagem foi enviada
com sucesso? O formulário validou sem erros? O arquivo foi salvo? Utilize cores de
sucesso. Matizes frias como azul e verde costumam ser ótimas para passar o recado.
Novamente o uso não precisa se restringir a textos.

Classes funcionais
Com uma ajudinha de um pré-processador você pode transformas estas matizes em
variáveis e mixins. Desta forma reaproveitar o código fica muito mais fácil. Este é o
segredo básico dos frameworks e dominando esta técnica você pode criar o seu próprio
muito mais facilmente. E pensando nestas funções deste a fase de criação do layout o
desenvolvimento se torna muito mais ágil.
Vejamos como ficaria a paleta apresentada acima em CSS + LESS. Primeiro definimos
as variaveis:

@principal: #008fb2;
@secundaria: #ef7200;
@base: #fbfbfb;
@texto: #333;
@alerta: #bf0500;
@sucesso: #0abf7e;

Abaixo definimos a cor base como background do corpo do documento, a cor padrão
para todos os textos, a cor principal como cor para links.

body {
background: @base;
color: @texto;
}

a {
color: @principal;
}

Este é um pequeno exemplo do que pode ser feito utilizando cores funcionais e pré-
processadores. Mas as possibilidades são infinitas. Podemos criar variações mantendo a
matiz das cores e apenas modificando valores como matiz e saturação para criar efeitos
interessantes. Podemos, por exemplo, escurecer em 20% a cor principal para um efeito
de hover.

a:hover {
color: darken(@principal, 20%);
}

É possível criar variações bem interessantes apenas variando a cor e luminosidade.

É claro, se você não curte utilizar pré-processadores pode fazer este tipo de mistura na
unha. Só é um pouquinho mais trabalhoso, mas no final você tem um layout super
harmonioso. Experimente criar variações de saturação, mistura e combinação de cores
para efeitos interessantes.

Mais funções

As funções apresentadas aqui são apenas sugestões. Você pode criar quantas outras
desejar como padrões para informações, risco, elementos inativos, etc. A sua
imaginação é o limite.

Blocagem de cor
Uma caracteristica do flat design é o uso de poucos elementos como linhas, sombras,
ribbons, etc. A separação de conteúdo pode ser feita através de blocos de cores
diferentes. Isto funciona bem principalmente para sites com uma grande quantidade de
rolagem vertical. Esta técnica é chamada de color blocking.

Um mini case
No portfólio da minha empresa eu utilizei o color blocking para separar os trabalhos de
cada cliente na página inicial. Cada bloco deveria ser mais ou menos correspondente a
matiz dominante do case apresentado, por isto criei uma boa quantidade de variações
(24 matizes). Desta maneira o bloco sempre combina com a identidade visual de cada
cliente.
Para evitar a junção de cores vibrantes eu intercalei blocos coloridos com neutros
(brancos com texto preto e vice-versa). Na maior parte dos blocos os textos e botões
ficaram nas cores brancas, mas para evitar problemas de contraste utilizei o cinza escuro
para cores com alta luminosidade como no caso do amarelo.

Não esqueça de calibrar o monitor…

Eu lembro quando estava na minha fase sobrinha, dando os primeiros passos na área de
design. Um dos primeiros jobs que fiz foi um cartão postal com uma ilustração de um
boneco de neve fofo e um céu azulzinho… Exceto que quando olhei em outro
computador o céu estava bege! Na verdade todas as cores estavam esquisitas. O
problema era o meu monitor que estava muito, mas muito mal calibrado. Eu consegui
corrigir o trabalho a tempo, mas o resultado poderia ter sido desastroso. Monitores –
principalmente os fabricados na China vendidos a preço de banana – precisam ser
calibrados de tempos em tempos. Não é algo que você precisa fazer todo o dia. Cerca de
uma vez por mês é o ideal. É possível modificar o perfil de cores através das
configurações padrões do seu sistema, utilizar softwares específicos, ferramentas online
ou até mesmo através de um hardware chamado colorímetro (o que é muito mais
preciso). Então se o Twitter parece cinza ou Youtube laranja faça ao seu cliente e a si
mesmo um favor: calibre seu monitor. Ou você pode acabar com um céu bege.
Esteja preparado para o pior
Por mais irônico que pareça, as vezes o seu monitor está bem calibrado DEMAIS e isto
pode causar uns pepinos… Em um mundo ideal isto não seria um problema. Alias, do
ponto de vista da criação gráfica a fidelidade de cores é imprescindível. Mas na real é
bem difícil que o usuário padrão se preocupe com isto. A não ser que o seu público alvo
esteja apenas entre designers, cineastas, fotógrafos e gamers é bem provável que grande
parte das pessoas estão acessando o seu site de um monitor vagabundo. Para garantir
que todos os usuários – com o monitor bem calibrado ou não – tenham uma experiência
bacana teste seu trabalho na maior quantidade de telas possíveis! Experimente o layout
especialmente naquele tubão pré-histórico da casa da sua avó… Assim você terá uma
idéia do pior que pode acontecer.

Outras influências
Vale lembrar que não é só a calibração que influência na percepção de cores. A
iluminação ambiente e configurações do computador como modo de economia de
energia também podem produzir diferenças de contraste, brilho e saturação. O objetivo
aqui não é ficar com as cores idênticas em todas as máquinas, pois isto é impossível,
mas manter um bom nível de contraste, leitura e acessibilidade é essencial. De nada
adianta um layout que só fica bacana no seu computador, certo?

Conclusão
Bem, esta foi só a ponta do iceberg. Existe muito a ser estudado sobre teoria das cores.
Ainda restam os aspectos físicos, biológicos, psicológicos, culturais, colorimetria…
Mas com este artigo vocês já tem as ferramentas básicas para criarem ótimas paletas de
cores funcionais. Até a próxima!