Combinações de Cores Marrom e Azul: 20 Paletas para se Inspirar

Marrom e azul é uma daquelas combinações raras que parecem ao mesmo tempo naturais e planejadas. O marrom traz estabilidade terrosa, enquanto o azul oferece clareza e confiança — perfeito para marcas modernas, interiores e interfaces.

Abaixo estão 20 ideias de paletas de cores marrom azul com códigos HEX, além de dicas rápidas de uso e prompts de IA para você remixar no Media.io.

Por que as paletas marrom e azul funcionam tão bem

O marrom traz calor, textura e uma sensação de artesanato — pense em madeira, couro, café, argila e pedra. O azul adiciona estrutura, calma e credibilidade, razão pela qual é tão comum em produtos digitais e identidades profissionais.

Juntos, marrom e azul equilibram “humano” e “moderno”. O azul mantém o layout limpo e organizado, enquanto o marrom impede que o design se torne frio ou impessoal.

Essa combinação também funciona lindamente em vários meios: pode transmitir sofisticação em embalagens, acolhimento em interiores e alta legibilidade em UI — especialmente quando combinada com tons de branco suave para criar espaço de respiro.

20+ Ideias de Paletas Marrom Azul (com Códigos HEX)

1) Harbor Cocoa

HEX: #1F3B5C #3F6FA6 #A9C9E8 #7A4E2D #E7D8C9

Clima: calmo, litorâneo, enraizado

Melhor para: branding de hotel à beira-mar

A energia calma do litoral encontra o calor da madeira à deriva, como um porto ao entardecer. Use o azul profundo em logotipos e títulos, deixando o marrom cacau ancorar a tipografia e os ícones. Areia cremosa funciona como fundo principal para manter tudo leve. Dica: mantenha o azul claro apenas em pequenos detalhes para preservar o aspecto sofisticado da marca.

Exemplo de imagem de harbor cocoa gerado usando media.io

Media.io

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

Experimente Gratis Agora

2) Denim e Nogueira

HEX: #223A5E #4E7BB6 #C9DBF0 #6B4A2B #F2E9DF

Clima: casual, confiável, moderno

Melhor para: UI de ecommerce casual

Os tons descontraídos do denim combinados ao calor da nogueira transmitem familiaridade e confiança. Use o azul mais escuro na navegação e nos botões principais, e o azul suave nos estados de hover e cartões. Nogueira adiciona destaque tátil para etiquetas de preço, selos ou filtros selecionados. Dica: reserve o marrom para ênfase, mantendo as chamadas para ação claras.

Exemplo de imagem de denim e nogueira gerado usando media.io

3) Sela Tempestuosa

HEX: #1E2F3F #3D6D8C #B7D0DE #8A5A3A #EFE5D8

Clima: dramático, aventureiro, rústico

Melhor para: landing page de equipamentos outdoor

Azuis de céu tempestuoso e couro de sela desgastado evocam um passeio sob nuvens. Para paletas como esta, mantenha o tom mais escuro para textos de destaque e barras superiores, depois clareie as sessões com azul pálido. O marrom couro brilha em destaques como informações de entrega, avaliações e ícones de recursos. Dica: use bastante espaço em branco para manter o clima rústico, porém legível.

Exemplo de imagem de sela tempestuosa gerado usando media.io

4) Argila Costeira

HEX: #274C77 #6096BA #D9E8F5 #A06A42 #F3E7DA

Clima: iluminado pelo sol, relaxante, natural

Melhor para: decoração de sala de estar

Azuis ensolarados e marrons de argila lembram persianas pintadas ao lado de vasos de terracota. Use tons suaves em paredes e tecidos; destaque o azul mais profundo em armários, quadros ou um tapete marcante. Marrom argila fica melhor em móveis de madeira, couro e decoração cerâmica. Dica: repita o mesmo azul em objetos decorativos pequenos para dar unidade ao ambiente.

Exemplo de imagem de argila costeira gerado usando media.io

5) Mocha da Meia-noite

HEX: #0F2A43 #2F5D8A #8FB7D6 #4B2F22 #EADFD6

Clima: luxuoso, intimista, cinematográfico

Melhor para: embalagem de velas de luxo

O azul da meia-noite profundo com marrom mocha evoca veludo e café torrado à luz baixa. Deixe o azul escuro dominar o rótulo e a caixa para uma base premium, depois adicione detalhes de mocha em relevo. Os tons de azul mais claros são perfeitos para padrões sutis ou informações secundárias. Dica: use uma tinta metálica junto ao tom mais escuro para um acabamento sofisticado.

Exemplo de imagem de mocha da meia-noite gerado usando media.io

6) Workwear Vintage

HEX: #1D3557 #457B9D #DCE8F2 #7B4B2A #F5EFE6

Clima: tradicional, resistente, trabalhador

Melhor para: pôster de workwear

Azuis tradicionais e marrom robusto remetem a jaquetas índigo e botas de couro. Essas combinações funcionam melhor com tipografia forte, ícones simples e branco envelhecido levemente texturizado. Use o azul médio em blocos secundários e o azul escuro em títulos para manter a hierarquia visual. Dica: adicione um único selo estilo carimbo em marrom para reforçar o clima vintage.

Exemplo de imagem de workwear vintage gerado usando media.io

7) Suede da Margem do Rio

HEX: #214E6B #6FA3C1 #CFE2EE #8C6239 #F0E6DA

Clima: fresco, ao ar livre, acessível

Melhor para: ui de site de marca outdoor

Azuis de rio frescos com marrom suede lembram uma trilha que termina à beira d’água. Use o azul mais escuro na navegação e títulos e tons claros nos fundos de sessões. Marrom suede é ótimo para abas, selos pequenos e botões secundários. Dica: combine com ícones de linha simples para manter o ar moderno e limpo de uma trilha.

Exemplo de imagem de suede da margem do rio gerado usando media.io

8) Casca de Bluejay

HEX: #2A4D8F #6EA0D6 #D7E7F7 #7A5B3E #F6F0E8

Clima: lúdico, amigável, de história infantil

Melhor para: ilustração de livro infantil

Azul vivo de bluejay e marrom quente de casca formam uma dupla alegre de livro ilustrado. Use o azul mais intenso em personagens e objetos principais, enquanto o azul suave serve para o céu e sombras delicadas. Marrom casca traz aconchego em troncos, ninhos e contornos. Dica: mantenha os contornos finos e deixe a paleta fazer o trabalho do contraste.

Exemplo de imagem de casca de bluejay gerado usando media.io

9) Latte Índigo Empoeirado

HEX: #2B3A67 #6C7DAE #E1E6F2 #8B6B4F #F7F1E9

Clima: suave, romântico, refinado

Melhor para: convite de casamento

Índigo empoeirado e marrom latte lembram linho, flores secas e votos ao entardecer. Use o índigo em nomes e informações principais e suavize a página com azul lavanda claro no fundo. Marrom latte funciona bem para monogramas, bordas e detalhes do RSVP. Dica: imprima o tom mais escuro levemente mais claro que o azul marinho puro para manter o ar delicado.

Exemplo de imagem de latte indigo empoeirado gerada usando media.io

10) Arctic Timber

HEX: #102A43 #4A90C2 #E6F0FA #6A4B3A #F2ECE6

Clima: nítido, arquitetônico, minimalista

Melhor para: portfólio editorial de arquitetura

Azuis árticos nítidos com marrom de madeira lembram fachadas de vidro contra interiores de madeira quente. Use os tons quase brancos para espaçamento na página e estrutura de grade, depois acrescente o azul profundo para títulos e legendas de seções. O marrom amadeirado funciona lindamente como destaque sutil para citações ou etiquetas de projetos. Dica: mantenha as fotos levemente azuladas para que os detalhes azuis pareçam coesos.

Exemplo de imagem de arctic timber gerada usando media.io

11) Cobalt Truffle

HEX: #143D66 #2F80C0 #CFE5F5 #5C3A2E #F3E6DD

Clima: sofisticado, confiante, de alto padrão

Melhor para: anúncio de produto para cuidados com a pele

O brilho do azul cobalto e o calor da trufa sugerem vidros brilhantes, cremes ricos e um balcão boutique. Para combinações ousadas de marrom e azul, deixe o cobalto liderar títulos e chamadas principais, enquanto a trufa apoia ingredientes e sombras sutis. O azul claro e o creme mantêm o layout arejado e moderno. Dica: use gradientes suaves com moderação para dar mais luminosidade ao produto.

Exemplo de imagem de cobalt truffle gerada usando media.io

12) Rainy Cabin

HEX: #1B2A41 #3E5C76 #CAD7E5 #6B4F3A #F0E9E1

Clima: aconchegante, tranquilo, contemplativo

Melhor para: UI de dashboard de produtividade

Azuis de chuva tranquilos com marrom cabana lembram uma caneca na janela e lã macia por perto. Use o azul médio para painéis e cartões, com o tom mais escuro para títulos e estados ativos. O marrom de cabana é ideal para avisos, pequenos destaques ou indicador de progresso quente. Dica: mantenha contraste alto nas tabelas para que o ambiente permaneça aconchegante sem perder clareza.

Exemplo de imagem de rainy cabin gerada usando media.io

13) Blueprint Leather

HEX: #0B3C5D #328CC1 #E1EFFA #7A4B33 #F6EFE8

Clima: técnico, definido, masculino

Melhor para: layout de lookbook masculino

Azuis blueprint combinados com marrom couro transmitem precisão, sobriedade e um toque ousado. Use o azul mais escuro para estrutura e divisões de página, deixando o azul mais vibrante em nomes de produtos ou detalhes de tamanho. O marrom couro fica melhor em etiquetas pequenas, cintos, sapatos ou ícones sutis. Dica: mantenha a tipografia limpa e condensada para combinar com o estilo estruturado.

Exemplo de imagem de blueprint leather gerada usando media.io

14) Museum Espresso

HEX: #1E3A5F #5A88B5 #DCEAF6 #4A2D22 #F4EEE7

Clima: culto, clássico, curado

Melhor para: sistema de sinalização de exposições de museu

Azuis de galeria curada e marrom espresso evocam placas, madeira polida e corredores silenciosos. Para uma paleta refinada de marrom e azul, deixe o espresso para tipografia e ícones de navegação, e os azuis para painéis calmos e cabeçalhos de seção. Use tons claros para mapas e textos longos para evitar fadiga visual. Dica: fique com um azul para fundos de sinalização e reserve o segundo para destaques de acessibilidade.

Exemplo de imagem de museum espresso gerada usando media.io

15) Clay Pot Sky

HEX: #244B6B #7FB0D6 #E3F0FA #B06F45 #F7EDE3

Clima: artesanal, vibrante, acolhedor

Melhor para: anúncio social para loja de cerâmica

O calor do barro feito à mão sob um céu claro transmite otimismo e foco artesanal. Use tons de azul para fundos limpos e textos, e destaque o marrom do barro no produto. Os neutros claros ajudam as fotos a parecerem naturais e fiéis na cor. Dica: mantenha textos curtos e use o azul médio para um único chamado para ação de alto contraste.

Exemplo de imagem de clay pot sky gerada usando media.io

16) Nautical Roastery

HEX: #12324B #2E6FA3 #BFD8EC #7D4E2F #F2E6DB

Clima: ousado, artesanal, marítimo

Melhor para: embalagem de café

Azuis náuticos intensos com marrom torrado evocam ar do mar ao lado de uma pequena torrefação. Use o azul escuro como cor principal do pacote para impacto na prateleira, depois acrescente marrom torrado em selos como origem, torra e notas de sabor. O azul claro funciona para padrões de ondas suaves sem pesar sobre a tipografia. Dica: mantenha uma área grande e legível, assim a embalagem permanece prática no varejo.

Exemplo de imagem de nautical roastery gerada usando media.io

17) Slate and Sienna

HEX: #2A3D4F #5B7C99 #D7E4EF #8A5A44 #F5EFE8

Clima: profissional, estável, discreto

Melhor para: UI de aplicativo financeiro web

Azuis ardósia suaves com marrom siena transmitem estabilidade e praticidade. Use o azul escuro para navegação, gráficos e métricas, e o tom claro para dashboards abertos e calmos. O siena brilha melhor em alertas, estados selecionados ou tags de pequeno destaque sem ser agressivo. Dica: evite usar siena em grandes áreas para manter a interface nítida.

Exemplo de imagem de slate and sienna gerada usando media.io

18) Copper Lagoon

HEX: #0E3B5A #3F8FB6 #D4EEF7 #A4653A #F6E7DA

Clima: fresco, restaurador, boutique

Melhor para: direção de interiores de spa

Azuis de lagoa frios com marrom cobre são restauradores, como água mineral e pedras quentes. Use o tom mais claro em paredes e toalhas, depois introduza o azul profundo em azulejos, vidros ou arte. Marrom cobre destaca ripas de madeira, metais e pequenos objetos de decoração. Dica: mantenha a luz quente para os azuis transmitirem calma em vez de frieza.

Exemplo de imagem de copper lagoon gerada usando media.io

19) Prairie Dusk

HEX: #22324A #6B8FB6 #E2ECF6 #9A6B4A #F7F0E8

Clima: suave, nostálgico, amplo

Melhor para: impressão de aquarela de paisagem

Azuis suaves do crepúsculo e marrons de pradaria lembram grama alta sob um céu desbotado. Use tons claros para lavagens e espaços, aprofundando com azul escuro em colinas distantes ou nuvens. O marrom quente é perfeito para texturas do primeiro plano e sombras suaves. Dica: sobreponha pinceladas transparentes para manter a paleta arejada e calma.

Exemplo de imagem de prairie dusk gerada usando media.io

20) Inkstone Caramel

HEX: #12263A #3C78A8 #D9EAF8 #8B5A3C #F4E9DD

Clima: literário, elegante, clássico moderno

Melhor para: design de capa de livro

Azul pedra-da-nanquim com marrom caramelo transmite literatura e atemporalidade, como páginas limpas e marcador de couro. Use o tom mais escuro para título e lombada, deixando o azul mais vibrante dar contraste moderno em formas ou ilustrações. Caramelo funciona para nome do autor, ornamentos ou uma moldura sutil. Dica: mantenha a capa simples, com um elemento tipográfico forte em destaque.

Exemplo de imagem de inkstone caramel gerada usando media.io

Quais cores combinam com marrom azul?

Tons neutros suaves e cremes quentes são as cores complementares mais fáceis para uma paleta marrom-azul, pois deixam o esquema claro, legível e versátil para impressão e telas.

Para um visual mais rico, experimente verdes escurecidos (sálvia, oliva) para acentuar o lado terroso ou acrescente metalizado contido (ouro/latão) para embalagens premium e branding de hospitalidade.

Se precisar de mais contraste em UI, um cinza frio ou carvão pode deixar o sistema mais estruturado e melhorar a hierarquia—especialmente em texto, divisores e componentes com muitos dados.

Como usar uma paleta marrom azul em projetos reais

Comece atribuindo funções: deixe o azul profundo para estrutura (títulos, navegação, textos de destaque), acrescente azul claro ou branco sujo ao fundo e utilize o marrom como destaque para calor e ênfase.

Em interiores, a escala importa: azuis claros e cremes funcionam bem em grandes superfícies (paredes, tapetes), enquanto marrons brilham em materiais táteis como madeira, couro e cerâmica. Repita um azul em objetos menores para dar intencionalidade ao ambiente.

Para branding e embalagens, escolha uma cor “principal” (geralmente azul-marinho ou cobalto), depois utilize marrom em selos, etiquetas ou tipografia secundária. Isso mantém a identidade moderna, sem perder o toque artesanal.

Crie visuais de paleta marrom azul com IA

Se quiser prever como marrom e azul ficarão em uma cena real—como uma landing page, mockup de embalagem ou ambiente—visuais feitos por IA ajudam a testar a direção antes do projeto final.

Use os prompts acima como templates: troque tipo do produto, palavras-chave de estilo (minimalista, vintage, editorial) e proporção de tela para adequar ao seu uso, iterando até a paleta encaixar.

O Media.io facilita gerar mockups de paleta com sua marca direto no navegador—sem instalar nada.

Próximo: Paleta de cores cinza marrom