Combinações de Cores Branco e Marrom: 20 Paletas com Códigos Hex

Uma paleta de cores marrom branco combina brancos arejados com marrom aterrado, criando designs que se sentem quentes, limpos e confiáveis. É uma maneira fácil de obter um visual premium sem confiar em cores altas.

De menus de cafés a uma interface de usuário mínima, esses neutros quentes trazem estrutura calma, contraste suave e uma vibração natural "artesanal" que funciona em impressão e digital.

Por que as paletas brancas marrom funcionam tão bem

O branco traz clareza e espaço para respirar, enquanto o marrom adiciona peso, calor e uma sensação natural. Juntos, eles criam um contraste confortável que se lê como moderno, atemporal e "real".

Essas paletas são flexíveis: empurre-as mais leves para layouts minimalistas e editoriais, ou incline-se em tons de cacau mais profundos para uma marca premium e temperamental. Eles também combinam lindamente com a textura-grão de papel, madeira, pedra e sombras suaves.

Como os tons são familiares (creme, café, areia, noz), um esquema de cores branco e marrom tende a parecer confiável e acessível-ideal para rótulos de produtos, marcas de estilo de vida e interfaces calmas.

20+ ideias de paleta de cores marrom branco (com códigos hexagonais)

1) Latte de linho

hexagonal:#fbf6ef#efe2cf#d6bc9a#a67852#4b2f22

humor:Acolhedor, convidativo, suavemente rústico

Melhor para:Café branding e design de menu

Acolhedor e convidativo, como leite cozido no vapor que se transforma em café expresso em uma manhã chuvosa. Use os tons de linho pálido para espaço em branco generoso e os marrom caramelo para manchetes e divisores. Ele se encaixa em logotipos de cafés, menus e cartões de fidelidade onde o calor importa mais do que o contraste. Dica: Imprima em estoque não revestido para fazer os bronzeados se sentirem ainda mais ricos.

Exemplo de imagem de linho latte gerado usando media.io

Media.io

Media.io é um estúdio de IA online para criar e editar vídeo, imagem e áudio em seu navegador.

Experimente agora de graça

2) Mármore Mocha

hexagonal:#ffffff#f2f2f0#cbb9a7#8c6a52#2c1d16

humor:Elegante, Exclusivo, editorial

Melhor para:Embalagem de luxo para cuidados com a pele

Elegante e sofisticado, como bancadas de mármore ao lado de um assado escuro. Mantenha os tons quase brancos como a superfície principal e, em seguida, use mocha e café expresso para tipografia e contagem de ingredientes. A mistura funciona perfeitamente com folha metálica ou brilho spot para uma sensação premium. Dica: reserve o marrom mais profundo para pequenos detalhes para que o pacote ainda seja arejado.

Exemplo de imagem de marble mocha gerado usando media.io

3) Estúdio de leite de aveia

hexagonal:#f7f2ea#e7dccd#c8b29a#9a7657#5a3c2a

humor:Mínimo, calmo, moderno

Melhor para:2d ui mockup para uma loja de estilo de vida

Calmo e moderno, como um estúdio ensolarado com prateleiras de carvalho e têxteis macios. Use os tons de aveia e areia para painéis e cartões, em seguida, traga nogueira para ações chave e navegação. O contraste permanece suave, tornando-o ideal para páginas de compras de rolagem longa. Dica: emparelhe com ícones cinza quente para manter a interface do usuário nítida sem ficar fria.

Exemplo de imagem de oatmilk studio gerado usando media.io

4) Papel de cacau

hexagonal:#fffaf3#eadfce#c6aa8c#8a5c3c#3a241c

humor:Artesanal, aterrado, quente

Melhor para:design de envoltório de chocolate artesanal

Feito à mão e aterrado, como envoltórios de papel dobrados e o cheiro de pontas de cacau. Mantenha o branco cremoso para a marca da marca e deixe que os castanhos médios carregem o trabalho de padrão e blocos de ingredientes. É adequado para embalagens de pequenos lotes, etiquetas e conjuntos de presentes que precisam de um visual artesanal. Dica: Adicione uma textura de grão sutil aos tons mais claros para evitar uma impressão plana.

Exemplo de imagem de papel de cacau gerado usando media.io

5) Cabine de areia

hexagonal:#f5efe6#e2d0ba#b69574#7b543a#2b1a12

humor:Rústico, Ao ar livre, Confortável

Melhor para:mountain lodge Site Herói

Rústico e confortável, como uma varanda de cabana depois de uma caminhada e botas arrancadas pela porta. Use a areia pálida como pano de fundo e traga castanha para manchetes que parecem resistentes e acolhedores. Combina bem com a fotografia da natureza, especialmente texturas perenes e de pedra. Dica: Mantenha o texto do corpo no marrom mais escuro para manter a legibilidade sobre painéis claros.

Exemplo de imagem de sandy cabin gerado usando media.io

6) Castanha de porcelana

hexagonal:#ffffff#f1ece6#d0bfae#9b7558#563525

humor:Contraste atemporal, refinado e suave

Melhor para:suite de convite de casamento

Atemporal e refinado, como pratos de porcelana ao lado de madeira polida. Mantenha os brancos dominantes para uma sensação formal, em seguida, use castanha para monogramas, bordas e detalhes de RSVP. Os tons parecem bonitos com tipo serif, relevo e forros de envelope. Dica: Escolha um papel branco quente para evitar que os castanhos fiquem muito laranja na impressão.

Exemplo de imagem de castanha de porcelana gerada usando media.io

7) Nogueira de baunilha

hexagonal:#fff7e8#eddcc0#c9a57b#8b6241#3e2618

humor:Doce, aconchegante, acessível

Melhor para:Etiquetas de produtos de padaria

Doce e acessível, como cobertura de baunilha sobre nozes torradas. Use os tons claros de manteiga para a base do rótulo e os tons de nogueira para nomes de produtos e distintivos de sabor. Funciona especialmente bem em frascos, sacos de pão e adesivos sazonais. Dica: Adicione um pequeno crachá de alto contraste no marrom mais profundo para uma varredura rápida nas prateleiras.

Exemplo de imagem de vanilla walnut gerado usando media.io

8) Argila e creme

hexagonal:#fcf5ec#e8d2bd#c39b7d#9a6b4a#4a2b1f

humor:Terra, Criativo, Artesão

Melhor para:Folheto da oficina de cerâmica

Terra e criativa, como argila molhada nas mãos e prateleiras aquecidas em fornos. Deixe o creme carregar o espaço do título e, em seguida, camada de argila e marrom terracota para formas, informações de classe e blocos de preços. Ele combina perfeitamente com ilustrações de linha simples de vasos e ferramentas. Dica: Mantenha a sombra mais escura para a chamada à ação para que o folheto permaneça fácil de escanear.

Exemplo de imagem de clay & cream gerado usando media.io

9) Cappuccino Drift

hexagonal:#f9f4ee#e6d7c9#bfa58c#7b5a45#2a1a14

humor:Descontraído, íntimo, clássico

Melhor para:design de capa de livro

Descontraído e íntimo, como a arte de espuma desaparecendo lentamente em um cappuccino. Use os tons mais claros para gradientes de fundo e o marrom médio para letras de título que parecem literárias e quentes. Funciona bem com texturas de papel sutis e ilustração mínima. Dica: Adicione uma linha-chave branca fina ao redor do tipo escuro se o fundo incluir grãos.

Exemplo de imagem de cappuccino drift gerado usando media.io

10) Casca de bétula

hexagonal:#fffdf8#efe7db#cdbfae#8a6f57#3b2a20

humor:natural, Arejado, Nórdico

Melhor para:design de interiores mood board

Natural e arejado, como bétulas contra um céu pálido de inverno. Use os brancos e pálidos para blocos grandes, em seguida, traga marrom casca para notas de móveis e rótulos de materiais. Este conjunto adora combinar com acessórios pretos foscos e sotaques de sálvia silenciosos. Dica: Mantenha os padrões sutis e deixe a textura fazer o levantamento pesado.

Exemplo de imagem de casca de bétula gerada usando media.io

11) Pergaminho antigo

hexagonal:#fff8e9#ead8bf#c7ad88#9a744f#5a3c25

humor:vintage, Acadêmico, Quente

Melhor para:editorial Revista spread

Vintage e acadêmico, como velhas páginas de pergaminho e espinhas de couro. Use o creme mais claro para margens e colunas, em seguida, conte com os marrom mais ricos para cabeçalhos de seção e aspas de puxar. Ele se adapta a layouts longos onde o conforto importa tanto quanto a clareza. Dica: Escolha um preto ligeiramente quente para o texto do corpo para que ele fique naturalmente dentro da paleta.

Exemplo de imagem de pergaminho antigo gerado usando media.io

12) Amêndoa torrada

hexagonal:#fdf6ee#ead9c9#d2b49a#a37a56#5b3926

humor:Amigável, saudável, ensolarado

Melhor para:Cartões de receitas de blog de alimentos

Amigável e ensolarado, como amêndoas torradas espalhadas em um guardanapo de linho. Mantenha os tons pálidos para as etapas da receita e espaço em branco, em seguida, use marrom caramelo para títulos e destaques de ingredientes. Combina bem com fotos de alimentos acima da cabeça e ícones simples. Dica: use o marrom de tom médio para as divisórias para que o layout permaneça macio em vez de caixa.

Exemplo de imagem de amêndoa torrada gerada usando media.io

13) esmalte de café expresso

hexagonal:#faf2e7#e3d1bf#b99378#6b4632#1f1410

humor:Ousado, dramático, temperamental

Melhor para:Anúncio de produto de café premium

Ousado e temperamental, como xarope expresso derramado sobre creme. Use o expresso quase preto como âncora para manchetes e, em seguida, levante o layout com espaço negativo bege suave. Funciona em anúncios high-end onde o contraste e a contenção parecem luxuosos. Dica: Mantenha apenas um elemento de acento na sombra mais escura para evitar dominar os tons mais claros.

Exemplo de imagem de esmalte de café expresso gerado usando media.io

14) Chá de leite mínimo

hexagonal:#fffaf6#efe3da#d7c1b3#a47b67#5a3a2f

humor:Suave, moderno, discreto

Melhor para:2d ui mockup para um aplicativo de bem-estar

Suave e discreto, como o chá com leite em um copo transparente. Use os tons intermediários Blush-bege para cartões e entradas, em seguida, reserve o cacau mais profundo para botões primários e estados ativos. Ele suporta telas de embarque calmas sem se sentir lavado. Dica: Adicione sombras sutis em vez de bordas duras para manter a interface suave.

Exemplo de imagem de milk tea minimal gerado usando media.io

15) Galeria Rústica

hexagonal:#f8f4ef#e4d8cc#c0a894#7f604c#3a2a23

humor:Curado, caloroso, artístico

Melhor para:layout do site do portfólio

Curado e artístico, como uma pequena galeria com luzes quentes e molduras de madeira. Mantenha o fundo quase branco para que a fotografia se destaque, em seguida, use taupe e marrom para navegação e legendas. Esses tons suportam um olhar tranquilo e confiante sem roubar a atenção do trabalho. Dica: use a sombra mais escura apenas para os estados de movimento para manter a página clara.

Exemplo de imagem de galeria rústica gerada usando media.io

16) Algodão do deserto

hexagonal:#fffdfb#f0e6db#d8c3ad#b08463#6b4630

humor:Banhado pelo sol, relaxado, arejado

Melhor para:Sinalização interior boutique

Banhado ao sol e relaxado, como um tecido de algodão secando no ar do deserto. Use os brancos pálidos para espaço negativo e os bronzeados quentes para identificação de caminho e sinais de preço que se sintam amigáveis. Combina bem com acessórios de latão, carvalho claro e flores secas. Dica: Teste o tom médio em vinil fosco para que ele permaneça legível sob iluminação quente.

Exemplo de imagem de desert cotton gerado usando media.io

17) Pedra e Scone

hexagonal:#f6f3ee#e2d8ce#bca998#806452#38261f

humor:Cordial, caseiro, equilibrado

Melhor para:brunch Pôster design

Saudável e caseiro, como um scone quente em um prato de pedra. Use a base cremosa para o campo de pôster e, em seguida, camada marrom médio para os blocos de ilustração e o cronograma. Esses tons se sentem acolhedores para eventos de bairro e menus sazonais. Dica: Adicione um único pequeno pop de verde silenciado se precisar de um sinal de hierarquia extra.

Exemplo de imagem de stone & scone gerado usando media.io

18) Sussurro de canela

hexagonal:#fff6ef#f0ddcf#d3b19a#b07a5a#5f3a2a

humor:Romântico, gentil, aconchegante

Melhor para:Etiquetas de velas feitas à mão

Romântico e suave, como a canela no ar quente ao anoitecer. Cremes suaves e bronzeados rosados fazem uma bela base de etiqueta, enquanto o spice brown mais profundo aguça o nome da fragrância. Uma das combinações de cores branco-marrom mais fáceis para embalagens pequenas porque permanece legível sem parecer áspero. Dica: use o tipo arredondado e muito espaço para respirar para se inclinar no humor calmo.

Exemplo de imagem de cinnamon whisper gerado usando media.io

19) Museu Sepia

hexagonal:#fbfbf8#ede6dc#cdbba8#91725a#4a3227

humor:Histórico, atencioso, polido

Melhor para:Brochura de exposição

Histórico e atencioso, como fotos de sépia em um salão de museu tranquilo. Use os neutros pálidos para margens generosas e deixe que os marrom mais quentes guiem cabeçalhos e guias de seção. Combina perfeitamente com imagens monocromáticas e regras finas em cinza quente. Dica: Mantenha o contraste alto em pequenas legendas escolhendo os dois tons mais escuros para o tipo.

Exemplo de imagem de sépia de museu gerado usando media.io

20) Cacau de coco

hexagonal:#fffefc#f1ede6#d6c7b8#9d7e66#50372b

humor:Limpo, orgânico, moderno

Melhor para:Embalagem de sabão natural

Limpo e orgânico, como lascas de coco sobre cacau escuro. Use os brancos para um visual fresco e orientado para os ingredientes, em seguida, traga marrom cacau para variantes de aroma e marcas de carimbo. Uma paleta de cores branco marrom bem equilibrada para marcas ecológicas porque parece natural sem parecer lamacento. Dica: Adicione um pequeno desenho de linha botânica no tom médio para amarrar tudo.

Exemplo de imagem de coco cacau gerado usando media.io

21) Inverno Mocha Mist

hexagonal:#ffffff#f3f1ee#d9d0c6#a98b77#5a4237

humor:Suave, arejado, silenciosamente quente

Melhor para:design de cabeçalho de e-mail de férias

Suave e arejado, como uma manhã de inverno com uma caneca quente na mão. Os brancos com inclinação fria mantêm os layouts nítidos, enquanto os marrom mocha adicionam calor sazonal sem ficar vermelho ou verde. Ele funciona bem para cabeçalhos de e-mail, banners e blocos promocionais simples. Dica: use o tom médio para pontos sutis ou padrões semelhantes à neve, não preenchimentos pesados.

Exemplo de imagem de inverno mocha neblina gerada usando media.io

22) Biscoito e casca

hexagonal:#fff8f0#edd9c8#caa487#855a3f#2f1d15

humor:Confortante, terreno, contraste ousado

Melhor para:branding Restaurante Rústico

Reconfortante e terroso, como biscoitos em uma tábua de madeira. Use o creme de biscoito para fundos de sinalização e a casca marrom para logotipos e marcas estilo selo. Estas combinações de cores marrom branco parecem particularmente fortes com papel texturizado, impressão e logotipos simples de distintivos. Dica: Mantenha a cor do seu sotaque em um pequeno elemento, como um ponto vermelho pimenta, para que a marca permaneça aterrada.

Exemplo de imagem de biscuit & bark gerado usando media.io

Quais cores combinam bem com o branco marrom?

Branco e marrom combinam naturalmente com cinzas quentes, carvões macios e verdes abafados (sálvia, azeitona, eucalipto). Essas adições mantêm a paleta calma, ao mesmo tempo em que adicionam profundidade para os estados da interface do usuário, ícones e hierarquia de tipografia.

Para uma direção um pouco mais premium ou editorial, experimente sotaques metálicos (ouro, latão) ou tinta quase preta. Se você quer um toque fresco e moderno, dusty blues pode resfriar o calor sem colisão.

Ao adicionar uma cor de acento, mantenha-a pequena e intencional-emblemas, links ou um único destaque-para que a base quente e neutra ainda pareça coesa.

Como usar uma paleta de cores marrom branco em desenhos reais

Comece com o branco/creme mais claro como sua tela principal e, em seguida, atribua um marrom médio para superfícies secundárias (cartões, painéis, etiquetas). Use o marrom mais escuro com moderação para texto, ícones e CTAs-chave para proteger a legibilidade.

Na impressão, as paletas branco-marrom parecem melhor quando você se inclina em materiais: papel não revestido, grão sutil, relevo ou brilho pontual. No digital, substitua as bordas pesadas por sombras suaves e divisores cinza quente para evitar um visual "lamacento".

Se o contraste parecer muito suave, aumente a separação com escala (títulos maiores), espaçamento (mais espaço em branco) e textura (padrões apenas nos meios-tons), ao invés de adicionar mais cores.

Crie visuais de paleta branca e marrom com IA

Quer ver esses códigos HEX em mockups reais—menus, embalagens, cartazes, telas de UI e mais? Com o Media.io, você pode gerar visuais alinhados à sua marca a partir de um único prompt e iterar rapidamente.

Descreva o layout, o estilo e a iluminação desejados (por exemplo: “rótulo de skincare minimalista, fundo creme, tipografia mocha”) e então refine até a paleta ficar perfeita para seu projeto.

Próximo: Paleta de Cores Cinza Azul-Claro