Como montar uma paleta de cores marrom que realmente funciona
Marrom é uma cor que todo mundo subestima. Aparece em logotipos de cafeteria, em capas de livro, em interfaces de apps de finanças. O problema é que, na prática, a maioria das pessoas escolhe tons que parecem sujos ou desbotados quando colocados lado a lado. Eu já passei por isso em um projeto de branding para uma marca de café artesanal em Porto Alegre. O cliente queria um tom quente, acolhedor. O designer pegou um marrom padrão do Photoshop e jogou com bege claro. Saiu opaco, sem vida. A solução foi trocar o bege por um verde-oliva escuro e usar um caramelo quase laranja como destaque.
Paleta de cores marrom: a base que todo mundo erra
A primeira coisa que você precisa entender é que marrom não é uma cor primária. É uma cor terciária resultante da mistura de vermelho, amarelo e azul em proporções desiguais. Ou, dito de outra forma, é laranja escurecido com azul. Isso significa que toda paleta marrom carrega subtons quentes ou frios dependendo da dominância de cada componente. Se você quer um marrom quente, diminua o azul. Se quer um marrom frio, aumente o azul ou inclua mais verde. Muita gente começa montando paletas marrom pensando que precisa de três tons do mesmo cromatismo. Não precisa. Uma paleta marrom eficiente tem quatro a cinco cores no máximo: um marrom principal, um claro (não necessariamente bege), um escuro (quase preto), e um ou dois complementares ou análogos que tragam contraste. O erro mais comum é usar bege como cor clara do marrom. Bege é marrom desaturado com muito amarelo. Em telas digitais, bege claro sobre marrom escuro cria problema de acessibilidade: o contraste de luminância cai para 2.5:1 ou menos, abaixo do limite WCAG AA para texto normal.
Passo a passo prático
Abra o Figma ou o Photoshop. Comece selecionando o marrom principal. Eu gosto de usar um valor hex no intervalo #6B3A2A a #8B5E3C, dependendo da aplicação. Marrom muito escuro (#3D1C02) serve para texto e fundos pesados. Marrom muito claro (#D4A574) serve para fundos suaves, mas cuidado com a legibilidade. O segundo passo é escolher a cor clara. Evite bege puro. Teste um creme com leve toque de cinza, algo como #E8D5C4 ou #F2E6D9. A razão é técnica: bege puro (#F5F5DC) tem R e G quase iguais e B baixo, o que gera um tom amarelado que conflita com marrom quente. Um creme levemente azulado mantém a harmonia sem sacrificar o contraste.
O terceiro passo é o escuro. Aqui entra o marrom café, quase preto. #2C1608 ou #1A0D04 funcionam bem. Se o projeto for digital, testem o contraste com texto branco ou creme. A conta é simples: (luminância relativa da cor clara + 0.05) dividido por (luminância relativa da cor escura + 0.05). O resultado precisa ser pelo menos 4.5:1 para texto normal. Quarto passo: a cor de destaque. Aqui a paleta de cores marrom ganha personalidade. Opções seguras incluem verde musgo (#556B2F), azul petróleo (#36454F), ou terracota (#E2725B). O verde funciona porque é análogo ao marrom (ambos têm amarelo na composição). O terracota funciona porque é o marrom iluminado e saturado. O azul petróleo funciona pelo contraste complementar indireto.
Um problema real que encontrei e como resolvi
Em 2023, fiz o redesign do site de uma loja de móveis rústicos. O cliente insistia em manter um marrom chocolate (#3E2723) como cor de fundo principal. O problema era que o site tinha muito texto branco e imagens de produtos com tons claros. O contraste texto-fundo caía para 3.2:1. Inferior ao necessário. O cliente não queria abandonar o marrom. A solução foi criar duas variantes: #3E2723 para seções de destaque e #5D4037 para áreas de leitura prolongada. A diferença de luminância entre as duas variantes é de 0.18 na escala relativa, o que fez o contraste subir para 5.1:1 no tom mais claro. O cliente gostou porque manteve a identidade visual, só ganhou legibilidade. Outro detalhe que todo mundo esquece: marrom em materiais impressos se comporta de forma diferente de marrom em telas. Se o projeto sai para impressão offset, use valores CMYK. Um marrom #6B3A2A corresponde aproximadamente a C=60 M=80 Y=50 K=20. Se você usar o mesmo hex na impressão sem conversão, o tom sai esverdeado ou enlutado, porque a subtração de tintas no papel não replica a emissão de luz das telas.
Erros comuns e como evitar
O primeiro erro é usar apenas um tom de marrom e tentar salvá-lo com preto puro. Preto #000000 sobre marrom cria um contraste tão brusco que parece artificial. Substituam preto por marrom ainda mais escuro, algo como #1A0A04. A transição é mais suave e a paleta parece mais intencional. O segundo erro é saturar demais os tons. Marrom saturado (#B35900) parece laranja, não marrom. Mantenha a saturação entre 30% e 60% no HSL para tons que realmente comuniquem marrom. Acima de 60%, o olho interpreta como castanho ou caramelo. Abaixo de 30%, o tom parece cinza quente.
👉 Clique no botão abaixo para saber mais sobre o assunto!
O terceiro erro é ignorar o contexto de uso. Marrom em UI de app precisa de mais contraste que marrom em capa de revista impressa. Em aplicativos, testem o modo escuro e o claro separadamente. Uma paleta marrom que funciona no modo claro pode falhar no modo escuro se o tom escolhido for muito próximo do fundo preto.
Download rápido: paleta de cores marrom pronta
Segue uma paleta que eu uso como ponto de partida em projetos sérios. Os valores estão em hex e RGB para facilitar cópia direta: Marrom principal: #7B4B32 — RGB 123, 75, 50
Marrom claro: #D4A574 — RGB 212, 165, 116 Marrom escuro: #2C1608 — RGB 44, 22, 8
Destaque verde: #556B2F — RGB 85, 107, 47 Destaque terracota: #C65D3E — RGB 198, 93, 62
Em Figma, criem um frame vazio, cole cada cor num retângulo de 100x100 pixels e alinhem em grade. Exportem como SVG se for usar em vetor. Se for para web, salvem como arquivo .css com variáveis --color-brown-primary, --color-brown-light, --color-brown-dark, --color-accent-green, --color-accent-terracotta. Isso economiza tempo e mantém consistência.
Quando essa paleta não funciona
Marrom é uma paleta quente e terrosa. Para marcas de tecnologia, saúde ou inovação, o impacto emocional costuma ser o oposto do desejado. Nessas áreas, azul ou verde são mais seguros. Se o projeto exige transmitir confiança tecnológica, marrom pode soar antiquado. Não é que a cor seja ruim, é que o código cultural associativo não ajuda. A não ser que o contexto seja claramente artesanal, sustentável, vintage ou premium natural. Outro cenário onde marrom falha: público-alvo jovem adulto em plataformas como TikTok ou Instagram Reels. O consumo visual nessas plataformas favorece cores de alta saturação e contraste elevado. Marrom, por natureza, é contido. Funciona, mas exige esforço extra para chamar atenção. Se o orçamento de produção for baixo, considerem trocar por um tom de âmbar (#FFBF00) ou mostarda (#E1AD01) que mantêm a m áp mas ganham visibilidade.
Se vocês forem usar essa paleta em materiais acessíveis, testem com simulador de daltonismo. O verde #556B2F pode se confundir com o marrom #7B4B32 para pessoas com protanopia. Nesse caso, troquem o verde por um azul-acastanhado como #4A5D6B ou aumentem a diferença de luminância entre as duas cores.
