A cor marrom em um site: o que ela desperta
O marrom é a cor de materiais familiares: madeira, couro, café, chocolate, papel e terra. Uma página em marrom pode despertar essas imagens antes mesmo de alguém ler uma palavra.
Tecnicamente, o marrom é um laranja escuro e apagado. No círculo cromático, ele fica entre o vermelho e o amarelo, só que com menos luminosidade e saturação. Por isso não existe um único marrom. Entre a Areia clara e o Espresso profundo há um mundo de diferença, e cada tom causa outra impressão.
Para o site de vocês, o que conta é qual tom combina com a marca em qual papel.
O significado da cor marrom: uma leitura, não uma prova
A leitura mais comum fala em ligação com a terra, calor, confiabilidade e estabilidade. Essas qualidades provavelmente vêm dos materiais que o marrom lembra. Contexto e cultura as deslocam, e nem todo visitante tira dele a mesma mensagem.
Como efeito fixo, que acontece igual para todo mundo, isso não está comprovado. Este artigo não tem conhecimento de medições sólidas sobre o marrom em sites, então, na prática, vale a cautela.
Dessas leituras ainda não resulta confiança. Informações claras, páginas fáceis de ler e pessoas visíveis provavelmente contribuem mais para a confiança do que a cor.
Não escrevam no site de vocês «o marrom gera confiança». A afirmação não está comprovada. Em vez disso, digam o que o marrom representa no setor de vocês, como madeira, sabor ou natureza.
Para quais setores o marrom combina
O marrom funciona onde os visitantes já esperam os materiais ligados a ele. Três áreas são candidatas naturais, cada uma com a sua própria faixa de tons.
| Tons indicados | No que prestar atenção | |
|---|---|---|
| Ofícios manuais (marcenaria, paisagismo, selaria) | Nogueira, carvalho, couro | Mostrar fotos reais do trabalho, com o marrom como moldura e não como fundo contínuo |
| Gastronomia (torrefação, padaria, confeitaria) | Espresso, Caramelo, cacau | Usar um tom claro para equilibrar, para que os tons escuros não pesem |
| Natureza (sítio orgânico, cosméticos naturais, outdoor) | Tons terrosos com verde suave | Só fazer promessas ligadas à natureza que vocês possam cumprir |
A classificação é uma orientação da prática de design.
Fica mais difícil onde os visitantes esperam rapidez e tecnologia, como em software ou produtos financeiros. Ali, um marrom pesado pode parecer antiquado enquanto faltar um contraponto claro.
Um exemplo da logística mostra que o marrom também pode se firmar onde a rapidez conta. Os furgões de entrega da UPS são marrons há gerações, e a cor dos veículos virou símbolo da marca.
Usar o marrom no site: três papéis
Em um site, o marrom pode assumir três papéis: cor de texto, superfície e destaque. Definam cedo quais deles ele vai ocupar, porque isso determina o resto da paleta.
Marrom como cor de texto
Marrom como superfície
Marrom como destaque
Dá para estimar por alto quanta área o tom de base, a segunda cor e o destaque devem ocupar.
Uma regra prática conhecida divide a área em 60% de tom de base, 30% de segunda cor e 10% de destaque. Com o marrom, o tom de base costuma ser um neutro claro como o Linho, e o próprio marrom fica como segunda cor.
Uma paleta marrom para experimentar
O exemplo mostra três marrons, dois neutros claros e um contraponto. Os valores são uma sugestão para testar.
Um tom escuro (Espresso) fica com o texto, um médio (Nogueira) com as superfícies e um claro (Linho ou Areia) com o fundo. O Caramelo continua como destaque em pontos isolados. Esses papéis em geral já bastam para montar uma página, e depois vem a checagem de contraste.
Contraste: quando o marrom continua legível
A armadilha são marrons como o Caramelo, cuja luminosidade fica entre a do texto e a do fundo. Eles parecem agradáveis na tela, mas ficam perto demais do fundo.
As Web Content Accessibility Guidelines (WCAG) exigem uma razão de contraste de pelo menos 4,5:1 para texto normal. Para texto grande (a partir de cerca de 24 px, ou 19 px em negrito) e contornos de elementos de interface, basta 3:1.
Sobre Linho, o Caramelo só passa para texto grande e para os contornos de elementos de interface. Para texto corrido e rótulos, ele não passa. O artigo sobre acessibilidade no site explica quando essas exigências se tornam obrigatórias.
Testem o marrom no celular ao ar livre. Sob o sol, o contraste de qualquer par de cores cai. Um valor que passa por pouco na tela pode não passar ali.
Cores complementares do marrom e boas combinações
O marrom é um laranja escuro, por isso o seu oposto no círculo cromático fica nos azuis. Um petróleo suave ou um cinza-azulado dá vida à paleta sem competir com o marrom.
Três combinações merecem um primeiro teste. Um marrom escuro como Espresso ou Nogueira fica calmo e clássico com Linho ou Areia, e o contraste é alto. Já o Caramelo sobre Areia chega a apenas 2,8:1. Com Petróleo, a página ganha uma oposição clara, e o Petróleo funciona para links e botões com texto claro. Marrom com verde suave fica perto da natureza, mas as luminosidades precisam ser bem distintas, senão os tons se misturam.
O marrom combina com a marca de vocês? Três perguntas-chave
Antes de o marrom entrar na decisão de marca, três perguntas ajudam:
- Os visitantes do setor de vocês esperam madeira, café, couro ou terra?
- Dá para usar o marrom de forma legível em um nível claro, um médio e um escuro?
- A cor combina com aquilo que a empresa de vocês deve representar daqui a cinco anos?
Com três respostas sim, há bons motivos para o marrom. Com um não na primeira pergunta, como em software ou produtos financeiros, o marrom precisa de um contraponto claro. Com um não na terceira, vale olhar o posicionamento da empresa de vocês. A cor segue a marca. Com um não na segunda, a paleta e os contrastes mais acima ajudam.
Checklist «Marrom no site»: uma página para marcar
Em cinco seções, vocês vão das três perguntas-chave até colocar o site no ar, passando por tons, contrastes e combinações. Inclui as amostras de cor da paleta de exemplo e sete pares de contraste com os seus valores.
Obrigado. O download começará em instantes.
Conclusão: da cor à presença da marca
A cor é uma parte da presença da marca. Quem planeja um relaunch esclarece primeiro o que a empresa deve representar, e depois vêm cores, tipografia e imagens. As bases estão no artigo sobre identidade corporativa para PMEs e no de linguagem visual. A página criação de sites mostra como funciona o processo de um site novo.
Em uma conversa curta, esclarecemos juntos se o marrom combina com a marca de vocês e do que um relaunch precisa para isso.
Perguntas Frequentes
O que significa a cor marrom?
Na leitura mais comum, o marrom representa terra, madeira, calor e estabilidade. Esse significado provavelmente vem dos materiais que a cor lembra. Tom, contexto e cultura o deslocam, por isso convém lê-lo como tendência.
O marrom passa confiança em um site?
O marrom pode combinar com um setor, como ofícios manuais, gastronomia ou natureza, e parecer familiar ali. Mas não consegue garantir confiança. Para isso, informações claras, páginas legíveis e pessoas visíveis provavelmente pesam mais.
Quais cores combinam com marrom?
Linho, Areia e creme formam fundos calmos, sobre os quais marrons escuros como Espresso e Nogueira alcançam alto contraste. Petróleo ou cinza-azulado criam um contraponto, e um verde suave fica perto da natureza. Em qualquer combinação, vale conferir o contraste.
Qual é a cor complementar do marrom?
O marrom é um laranja escuro, por isso o seu oposto no círculo cromático é o azul. Na prática, funciona bem um petróleo suave ou um cinza-azulado, porque um azul puro ao lado do marrom logo parece duro.
Para quais setores o marrom é indicado?
O marrom combina onde os visitantes esperam madeira, couro, café ou terra, ou seja, em ofícios manuais, gastronomia e natureza. Em software ou produtos financeiros, um marrom pesado pode parecer antiquado quando falta um contraponto claro.
De quanto contraste o texto marrom precisa?
As Web Content Accessibility Guidelines exigem pelo menos 4,5:1 para texto normal. Para texto grande e para os contornos de elementos de interface, 3:1 basta. Marrons escuros como Espresso e Nogueira alcançam isso com facilidade sobre fundo claro. Tons como Caramelo muitas vezes não chegam lá, porque a luminosidade deles fica perto da do fundo.
Qual é o código hex do marrom?
Não existe um valor único. Em CSS, o nome «brown» corresponde a #A52A2A, um marrom médio avermelhado. Para uma marca, vale ter um tom próprio. Junto com vocês, nós o montamos em três níveis: escuro para texto, médio para superfícies e claro para fundos.
