O código hexadecimal da cor marrom e o que ninguém te conta
Muita gente chega perguntando qual o codigo da cor marrom e espera um número único, mas a realidade é que não existe um único código hexadecimal para o marrom. O marrom é, tecnicamente, uma variação de laranja ou vermelho escuro com baixa luminosidade. Isso significa que você pode escolher entre dezenas de códigos válidos dependendo do contexto.
Qual o codigo da cor marrom no padrão hexadecimal?
Se você precisa de um marrom padrão, genérico, amplamente reconhecido, o mais usado na web é #964B00. Esse é o brown do sistema Windows clássico. Outro muito comum é #A52A2A, que é o brown do padrão CSS/HTML, definido especificamente como "brown". Se o assunto for design digital, esse é o código que você vai encontrar em qualquer palette pronta. Mas se o seu contexto é impressão, o jogo muda completamente. Vermelho, verde e azul são cores aditivas, feitas para telas. Impressora usa cores subtrativas: ciano, magenta, amarelo e preto (CMYK). Um marrom que parece bom na tela pode sair praticamente laranja ou envernizado na impressão se você não adaptar os valores. Eu passei uma semana inteira tentando corrigir a cor de uma capa de catálogo que saiu com um tom amarelado demais porque simplesmente copiei o hex #8B4513 e mapeei pro CMYK de forma ingênua usando conversor online. A saída ficou com um toque de verde fantasma que ninguém entendia. A solução foi ajustar manualmente: em vez de usar a conversão automática, eu baixei a luminosidade do cyan e aumentei o yellow, chegando em algo como C=40, M=80, Y=100, K=20. O marrom voltou a parecer marrom, não lama.
Aqui vai uma informação que poucos citam: o famoso #8B4513 (saddlebrown) é talvez o código mais citado em tutoriais, mas ele é problemático em telas modernas. Em monitores com gamut amplo, como os que usam tecnologia P3 ou OLED, esse código pode parecer artificialmente saturado porque o vermelho puro dele não tem o gradiente natural de uma cor marrom real. Se você trabalha com design para apps ou interfaces, prefira codes como #6F4E37 (o coffee do CSS) ou #BF953F (que é um marrom mais neutro, tendendo ao dourado escuro). Eles se comportam melhor em diferentes dispositivos. Outro ponto cego: quando você pega um marrom do Photoshop e leva pro Figma ou pro DevOps, muitas vezes a cor muda porque cada ferramenta interpreta o perfil de cor de forma diferente. O problema não é o código hex em si — ele é absoluto —, mas a forma como o software aplica o perfil sRGB, Display P3 ou Adobe RGB antes de renderizar. Se a cor precisa ser consistente entre design e código, force o uso exclusivo de sRGB e verifique no navegador, não apenas no editor visual. Eu já perdi duas horas num bug que parecia um erro de cor até descobrir que o Figma estava renderizando em P3 e o browser em sRGB. O código era o mesmo em ambos, a diferença era o perfil.
Principais códigos para copiar e colar
Vou listar os mais úteis sem enrolação, porque provavelmente é isso que você veio buscar. Brown padrão CSS: #A52A2A — o marrom oficial do HTML, bom para usar direto em estilização web sem depender de paletas externas.
👉 Clique no botão abaixo para saber mais sobre o assunto!
SaddleBrown: #8B4513 — muito usado em frameworks e templates, mas tenha cuidado com telas de alta fidelidade como citei acima. Coffee: #6F4E37 — uma opção mais neutra e previsível em diferentes perfis de cor. Recomendo essa para a maioria dos projetos digitais.
Chocolate: #D2691E — mais claro e mais quente. Funciona bem para fundos e textos secundários, mas não para tipografia principal em fundos claros porque o contraste pode cair abaixo dos níveis de acessibilidade WCAG AA. Marrom escuro padrão: #5D4037 — esse é interessante porque já vem com um tom de cinza embutido, o que o torna mais fácil de combinar com paletas neutras sem criar conflito de temperatura de cor.
Se o seu projeto exige precisão extrema, como um material brandbook ou um sistema de design que vai escalar para múltiplos canais, o mais seguro é não confiar apenas em hex. Defina os valores também em RGB (para telas) e CMYK (para impressão), e Documente o perfil de cor usado. Sem isso, qualquer pessoa que herdar o projeto vai ter que adivinhar qual versão da cor estava certa. Existe ainda o formato RGB puro, que alguns iniciantes confundem com hexadecimal. O valor rgb(150, 82, 46), por exemplo, corresponde aproximadamente ao #96522E. É a mesma cor, notação diferente. Use a que o seu ambiente exigir. Em CSS, os três formatos funcionam, mas rgb() com valores percentuais às vezes gera confusão porque 60% de vermelho não é a mesma coisa que 153 de 255 se você não prestar atenção.
Se você quer algo rápido e funcional, anote #6F4E37 e #A52A2A. São os dois que cobrem a maior parte dos casos reais. O resto é ajuste fino dependendo do que está construindo.
