Codigo Da Cor Marrom

Guia prático para usar o código da cor marrom em desenvolvimento web

O marrom é uma daquelas cores que todo mundo acha fácil definir no computador até tentar usar em um projeto real. O problema é que o marrom não tem um único código universal. Existe uma infinidade de tons e cada um se comporta de maneira diferente dependendo do dispositivo, do fundo e do contraste que você precisa.

Se você está procurando pelo codigo da cor marrom, precisa saber exatamente o que quer antes de copiar qualquer valor. Vamos começar pela base técnica.

O codigo da cor marrom mais comum em hex

O marrom padrão na paleta do Windows e em diversas referências web tradicionais é o #964B00. Em RGB, isso corresponde a 150 de vermelho, 75 de verde e 0 de azul. O esquema HSL seria aproximadamente 30 graus de matiz, 100% de saturação e 29% de luminosidade. Esse é o marrom que aparece quando você digita "brown" em um seletor de cor padrão. Ele funciona para botões, bordas e elementos decorativos simples. Não é o ideal para textos em fundo claro porque o contraste fica ruim, especialmente em telas baratas que já tendem a lavar as cores. Outra variação bem usada é o #8B4513 (SaddleBrown em CSS). Esse é um pouco mais quente, com mais vermelho e um toque de azul residual que dá a impressão de couro envelhecido. Eu uso esse em templates que precisam de uma vibe mais orgânica, sem parecer amarelo demais. Tem também o #A0522D (Sienna), que é mais avermelhado e menos laranja. E o #D2691E (Chocolate), que é visivelmente mais claro e funciona melhor como cor de destaque.

Essas não são especificações oficiais — são convenções que vieram do CSS Level 1 e foram mantidas porque todo mundo já as reconhece.

Por que o marrom é problemático na prática

Eu passei um bom tempo tentando usar marrom em interfaces e aprendi duas coisas que ninguém explica direito. A primeira é que o marrom puro quase nunca existe nos espaços de cor das telas. Monitores usam RGB com gamut limitado, e o marrom real (aquele de terra molhada ou madeira) cai fora da maioria dos perfis sRGB comuns em monitores de entrada. Quando você vê um marrom "bonito" num site, provavelmente é um laranja escuro com baixa luminosidade, não um marrom genuíno. Isso não é falha sua, é limitação do hardware. A segunda coisa que descobri sendo mais chato é o problema de acessibilidade. Vou dar um exemplo concreto: tive um projeto em que precisei colocar texto marrom (#654321) sobre fundo bege claro. O ratio de contraste era algo em torno de 3.2:1. Passava no teste visual para mim, mas quando testei com o plugin do WCAG no navegador, a tela inteira ficou vermelha. A correção foi subir para #7A4B2E, que ainda parecia marrom mas batia 4.6:1, perto o suficiente do AA para texto grande. Se fosse texto pequeno, teria que ir pra #8B5A2B. Esse ajuste de apenas alguns pontos no hex já muda completamente a percepção da cor. Você quase não nota a diferença no seletor, mas no contexto real é o que separa algo legível de algo ilegível.

Código da cor marrom em diferentes formatos

Aqui estão os valores mais úteis organizados para você copiar direto: Marrom padrão (#964B00): - Hex: #964B00 - RGB: rgb(150, 75, 0) - HSL: hsl(30, 100%, 29%) - CMYK: cmyk(0, 50, 100, 41) — útil só se for imprimir Saddle Brown (#8B4513): - Hex: #8B4513 - RGB: rgb(139, 69, 19) - HSL: hsl(25, 76%, 31%) - CMYK: cmyk(0, 51, 86, 45) Sienna (#A0522D): - Hex: #A0522D - RGB: rgb(160, 82, 45) - HSL: hsl(19, 74%, 40%) Chocolate (#D2691E): - Hex: #D2691E - RGB: rgb(210, 105, 30) - HSL: hsl(25, 81%, 47%) Marrom muito escuro (#3E2723) — bom para texto: - Hex: #3E2723 - RGB: rgb(62, 39, 35) - HSL: hsl(9, 38%, 19%)

Para imprimir, converta sempre para CMYK com perfil SWOP ou FOGRA. Valores RGB mandados para impressão viram laranja ou marrom-avermelhado dependendo da prensa.

Como gerar seu proprio tom de marrom

A maioria das pessoas pega um hex pronto e torce para funcionar. Isso dá problema porque todo projeto tem requisitos diferentes de contraste e fundo. O jeito certo é começar do zero. Pegue um tom de laranja no — matiz entre 15 e 35 graus — e desça a luminosidade até 20% ou 30%. Quanto mais baixo o valor de L, mais "marrom" ele parece. Se subir demais, vira laranja. Se descer muito, vira marrom-escuro e perde identificação. Uma técnica que funciona bem: escolha um laranja que você goste, copie o hex, e reduza cada canal RGB em aproximadamente 40%. Isso mantém a proporção original enquanto escurece. O resultado geralmente é um marrom mais natural do que os predefinidos. Eu costumava fazer isso manualmente até criar um script simples em Python que recebe um hex e devolve três variações em diferentes níveis de luminosidade com o ratio de contraste calculado automaticamente. Leva uns 10 segundos e evita que você gaste meia hora testando combinações que não funcionam.

Ferramentas úteis

Para ver como o marrom fica em contexto, o WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) é o padrão. Cole o hex da cor do texto e o hex do fundo, e ele te diz se passa em AA normal, AA grande, ou AAA. Ninguém precisa perder tempo adivinhando. O Coolors.co e o Adobe Color servem para gerar paletas completas a partir de uma cor base. Se você já tem o marrom definido, essas ferramentas acham o verde-combinável, o creme neutro, o cinza quente. É mais rápido do que testar no olho mesmo. Para quem trabalha com design system, o tailwindcss.com tem uma escala de warm (amarillos/marrons) pré-configurada que segue padrões razoáveis de contraste. Copiar dessa paleta economiza horas de ajuste.

O que não fazer

Não use marrom puro (#964B00) como cor de texto em fundo branco. O contraste é insuficiente para leitura prolongada. Use tons mais escuros ou mude para um marrom-acastanhado com mais presença. Não misture marrom com vermelho puro em interfaces. Os dois competem pela mesma faixa espectral e o resultado é cansativo. Se precisar de calor, escolha um ou outro. Não confie na aparência do marrom no celular para decidir o tom final. Telas OLED e LCD mostram cores radicalmente diferente, e um marrom que parece perfeito no iPhone pode ficar opaco no Galaxy ou num monitor IPS barato. Sempre valide no dispositivo de menor qualidade que seu público usa.

Resumo técnico rápido

O codigo da cor marrom não é único. O mais reconhecido é #964B00, mas existem dezenas de variações úteis dependendo do contexto. A regra prática é: comece com um laranja no HSL, desça a luminosidade, verifique o contraste no WebAIM antes de aplicar, e teste em pelo menos dois dispositivos diferentes antes de considerar a cor definitiva. Se você precisa de algo específico — como um marrom para fundo escuro, um tom que combine com paleta quente, ou valores exatos para impressão — é só dizer que contexto. O valor muda conforme a aplicação.