20 Combinações de Tons Cinza e Branco Modernos para Inspirar Seu Design

Uma paleta de cores branca cinza é a maneira mais rápida de fazer os designs parecerem limpos, modernos e intencionais. Ele lhe dá contraste, hierarquia e espaço para respirar sem lutar contra seu conteúdo.

Abaixo estão 20 combinações de paleta cinza e branca (com códigos hexagonais) que você pode usar para UI, branding, impressão e interiores — além de exemplos de prompts que você pode recriar com o Media.io.

Por que as paletas cinza e branco funcionam tão bem

As combinações de cores cinza e branco são naturalmente flexíveis: podem parecer quentes (brancos cremosos + cinzas taupe) ou frios (cinzas inclinados para o azul + brancos nítidos), mantendo-se mínimos e legíveis.

Eles também criam uma hierarquia confiável. Com apenas alguns passos do branco ao carvão, você pode separar seções, criar profundidade nos cartões e guiar a atenção para botões ou manchetes sem adicionar ruído visual.

Mais importante, os tons neutros fazem do seu conteúdo o herói – fotos, produtos, tipografia e visualizações de dados tendem a parecer mais premium quando a paleta não está competindo pela atenção.

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

1) Concreto fosco

hexagonal:#f6f6f4#e3e4e6#c7c9cc#8e9096#2f3033

humor:Legal, Aterrado, Arquitetônico

Melhor para:Interiores de loft industrial

Frescos e arquitetônicos, esses tons parecem concreto polido sob a luz do inverno. Eles funcionam lindamente em grandes superfícies, como paredes, armários e embutidos, onde o contraste sutil importa. Combine com ferragens pretas foscas, aço escovado ou carvalho quente para evitar que pareça estéril. Dica de uso: Coloque o carvão mais escuro em acabamentos ou molduras de janelas para afiar o espaço sem sobrecarregá-lo.

Exemplo de imagem de concreto fosco 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) Linho de inverno

hexagonal:#fbfaf7#f0eee8#d9d6cf#b0aea7#4a4946

humor:Quente, calmo, íntimo

Melhor para:Convites de casamento

Quente e calmante, lê-se como tecido de linho, papel de pergaminho e luz suave de velas. Os brancos cremosos mantêm a tipografia elegante, enquanto o cinza mais profundo adiciona estrutura suficiente para nomes e datas. Combine com folha de ouro, sotaques de blush ou ilustrações de flores prensadas para um acabamento romântico. Dica de uso: Mantenha o fundo branco e reserve o tom mais escuro para os títulos para manter a clareza da impressão.

Exemplo de imagem de linho de inverno gerado usando media.io

3) névoa de grafite

hexagonal:#ffffff#e7e8ea#bfc2c7#6b6f77#1f2228

humor:Elegante, moderno, focado

Melhor para:UI do aplicativo no modo escuro

Elegante e focado, a gama parece névoa rolante sobre grafite, com destaques nítidos que mantêm as coisas legíveis. É adequado para interfaces de modo escuro onde a hierarquia depende de etapas sutis em vez de cores altas. Combine com um sotaque elétrico como ciano ou cal para estados ativos e notificações. Dica de uso: use o quase preto para a tela principal e o cinza médio para as cartas para evitar contraste lamacento.

Exemplo de imagem de neblina de grafite gerada usando media.io

4) Paredes da galeria

hexagonal:#f8f8f8#eded#cfcfcf#9a9a9a#2a2a2a

humor:Limpo, cuidado, minimalista

Melhor para:Galeria de Arte branding

Limpo e curado, evoca paredes brancas, iluminação suave e espaço negativo silencioso ao redor das obras de arte. Esta paleta de cores branco cinza é ideal para marcas que precisam do conteúdo para liderar enquanto ainda se sentem premium. Emparelhe com uma única cor de assinatura ousada para destaques de exposição ou etiquetas de eventos. Dica de uso: Mantenha os logotipos em carvão e deixe que os cinza claros lidem com os fundos para que as impressões permaneçam nítidas.

Exemplo de imagem de paredes de galeria geradas usando media.io

5) Aço e neve

hexagonal:#fafbfd#dfe6ee#b9c3cf#6c7a89#22272e

humor:Nível, avançado em tecnologia, arejado

Melhor para:Páginas de destino do produto tech

Nígidos e avançados em tecnologia, esses cinzas frescos parecem brilhar de neve contra aço escovado. Os tons criam profundidade para seções e cartões sem bordas pesadas, o que é perfeito para layouts da web modernos. Combinações de cores brancas como esta combinam bem com CTAs de cobalto, azul ou verde neon para foco instantâneo. Dica de uso: use o tom mais claro para o espaço do herói e traga o cinza-ardósia para a navegação para ancorar a página.

Exemplo de imagem de steel & snow gerado usando media.io

6) carvão de pérola

hexagonal:#f5f3f4#e0dde0#b8b2b9#7a747d#2b262e

humor:Suave, luxuoso, sofisticado

Melhor para:Embalagem de beleza

Suave e luxuosa, a paleta se lê como pó de pérola e carvão fumaçado em um espelho de vaidade. Funciona bem para cosméticos onde o contraste sutil sinaliza qualidade e contenção. Combine com folha de ouro rosa, tampas pretas brilhantes ou um sotaque mauve suave para uma sensação de boutique moderna. Dica de uso: Mantenha a cópia na sombra mais escura e use os tons médios para painéis secundários para que as etiquetas permaneçam legíveis sob o brilho.

Exemplo de imagem de carvão de pérola gerado usando media.io

7) Porto nebuloso

hexagonal:#f2f5f4#d6dcda#aeb8b5#6a7774#2d3534

humor:misty, Costeira, Relaxado

Melhor para:lobbies de hotéis costeiros

Nebuloso e relaxado, traz à mente a névoa do mar, madeira flutuante e pedra de ardósia perto da costa. As notas verde-cinza impedem que os neutros pareçam planos, especialmente em espaços públicos abertos. Combine com bege areia, madeira desgastada e latão quente para uma atmosfera costeira acolhedora. Dica de uso: use o tom mais escuro em wayfinding signage para que ele permaneça legível contra paredes pálidas.

Exemplo de imagem de foggy harbor gerado usando media.io

8) Estúdio monocromático

hexagonal:#fcfcfc#f1f1f1#d5d5d5#7d7d7d#1a1a1a

humor:afiado, editorial, atemporal

Melhor para:Sites do portfólio

Nível e atemporal, parece um estúdio brilhante com bandeiras pretas e fundos de papel limpo. Os pontos finais fortes fazem com que a tipografia e as imagens pareçam intencionais, mesmo com um estilo mínimo. Emparelhe com uma cor de sotaque para estados de pavimento e tags de projeto, mas mantenha-o contido. Dica de uso: Defina o texto do corpo em cinza profundo em vez de preto puro para reduzir o brilho nas seções brancas.

Exemplo de imagem de monochrome studio gerado usando media.io

9) ardósia macia

hexagonal:#f7f8fa#e1e4ea#c2c7d0#7b8391#343a44

humor:Profissional, calmo, confiável

Melhor para:Relatórios corporativos

Profissionais e calmos, esses cinzas com inclinação azul sugerem slides polidos, mesas arrumadas e dados confiáveis. Eles são excelentes para relatórios onde os gráficos precisam de separação sem linhas duras. Combine com um sotaque contido como azul marinho ou esmeralda para métricas chave e convocações. Dica de uso: use o tom mais pálido para fundos de página e reserve a folha para cabeçalhos para manter documentos longos fáceis de digitalizar.

Exemplo de imagem de ardósia suave gerada usando media.io

10) Ledger de Mármore

hexagonal: #f9f9f9 #e8e7e5 #c9c6c0 #9a968f #3a3936

humor: elegante, silencioso, refinado

Melhor para: design de banheiro de luxo

Elegante e silencioso, remete às veias do mármore, ladrilhos de calcário e iluminação suave de hotel. Os tons de cinza quente mantêm o ambiente com um clima de spa, não clínico. Combine com acabamentos em metal champagne, toalhas cremosas e madeira clara para um visual de luxo relaxado. Dica de uso: repita o cinza médio em rejuntes ou detalhes em pedra para deixar todo o ambiente coeso.

Exemplo de imagem do ledger de mármore gerada usando media.io

11) Escritório nas Nuvens

hexagonal: #ffffff #f2f4f7 #d6dbe3 #9aa3b2 #2e3440

humor: claro, arejado, produtivo

Melhor para: dashboards de SaaS

Claro e arejado, é como a luz do dia entrando por grandes janelas em um escritório tranquilo. Essa paleta cinza e branca é feita para dashboards que precisam de superfícies calmas e hierarquia evidente. Combine com uma única cor de marca nos botões principais e use tons sutis para estados e alertas. Dica de uso: deixe as linhas de grade bem leves e utilize espaçamento e o cinza médio para dar estrutura.

Exemplo de imagem do escritório nas nuvens gerada usando media.io

12) Loft Silencioso

hexagonal: #f4f4f2 #deddd9 #b9b6af #86827a #3c3a35

humor: aconchegante, moderno, vivido

Melhor para: ambientação de apartamentos modernos

Aconchegante e vivido, esses neutros quentes evocam mantas de lã, papéis naturais e sombras suaves. São ideais para ambientação pois valorizam pisos de madeira e fotografam bem os espaços. Combine com cerâmica terracota, plantas e têxteis texturizados para adicionar calor. Dica de uso: use o tom mais escuro apenas em molduras e luminárias para que o ambiente continue claro.

Exemplo de imagem do loft silencioso gerada usando media.io

13) Snowcap Branding

hexagonal: #ffffff #f5f5f5 #dadada #a3a3a3 #2c2c2c

humor: limpo, confiante, versátil

Melhor para: logotipos de startups e pitch decks

Limpo e confiante, parece papel novo com tinta nítida e tipografia moderna. O contraste é suficiente para logotipos, ícones e gráficos sem ser agressivo. Uma combinação cinza-branca como essa fica ótima com um destaque de marca intenso como cobalto, coral ou limão. Dica de uso: mantenha os slides, em sua maioria, claros e use o carvão apenas para títulos e números principais.

Exemplo de imagem do snowcap branding gerada usando media.io

14) Minimalismo Acinzentado

hexagonal: #f8f7f6 #e2e0de #c6c2bf #8f8a86 #3b3836

humor: simples, suave, discreto

Melhor para: fundos para fotografia de produto

Simples e discreto, lembra reboco macio, cinza de madeira e luz de estúdio difusa. Esses tons fazem o produto se destacar sem contraste agressivo ou desvio de cor. Combine com um material tátil como papel kraft, linho ou cerâmica para profundidade. Dica de uso: use o cinza médio como superfície e deixe o tom mais claro para fundos de varredura contínua.

Exemplo de imagem do minimalismo acinzentado gerada usando media.io

15) Prata de Bétula

hexagonal: #f6f7f5 #e0e4dd #c0c7bf #879186 #2f352f

humor: fresco, natural, equilibrado

Melhor para: rótulos de skincare ecológico

Fresco e natural, lembra casca de bétula, folhas de sálvia e luz da manhã. O fundo acinzentado-esverdeado adiciona aspecto orgânico, adequado para marcas de beleza limpa e bem-estar. Combine com texturas de papel reciclado e um toque botânico discreto como eucalipto ou argila. Dica de uso: mantenha blocos de ingredientes no fundo mais claro e use o tom escuro para textos regulatórios para melhor leitura.

Exemplo de imagem da prata de bétula gerada usando media.io

16) Noite Polar

hexagonal: #fdfdfd #d9dde1 #a7adb5 #515a66 #0f141b

humor: dramático, cinematográfico, alto contraste

Melhor para: cartazes cinematográficos

Dramático e cinematográfico, remete à neve sob o luar e a um horizonte azul profundo. O amplo contraste valoriza tipografia ousada, gradientes com clima e silhuetas marcantes. Combine com um destaque saturado como carmim ou azul elétrico para títulos. Dica de uso: use tons médios para textura de fundo e deixe o texto quase preto e elementos focais bem nítidos.

Exemplo de imagem da noite polar gerada usando media.io

17) Concreto Chique

hexagonal: #f3f3f3 #d8d8d8 #b2b2b2 #707070 #252525

humor: urbano, estiloso, moderno

Melhor para: cardápios de restaurantes

Urbano e estiloso, lembra bancadas de concreto, metal escovado e restaurante com iluminação suave. Essa paleta cinza-branca é ótima para cardápios porque mantém o layout limpo e destaca preços e seções. Combine com uma cor forte para pratos especiais, como vinho profundo ou verde erva. Dica de uso: evite o tom mais claro para textos pequenos e deixe informações finas em cinza médio para melhor leitura.

Exemplo de imagem do concreto chique gerada usando media.io

18) Tipografia Nebulosa

hexagonal: #fafafa #e6e8eb #c8ccd3 #818896 #303643

humor: reflexivo, literário, moderno

Melhor para: capas de livros

Reflexivo e literário, sugere neblina suave, camadas de papel e livrarias silenciosas. Os tons frios médios destacam títulos sem cor forte, especialmente para não-ficção e ficção contemporânea. Combine com um elemento de textura como grão, aquarela ou foto sutil. Dica de uso: deixe o nome do autor no tom mais escuro e o título no cinza ardósia para hierarquia refinada.

Exemplo de imagem da tipografia nebulosa gerada usando media.io

19) Cozinha Nórdica

hexagonal: #fcfbf9 #ecebe7 #d1cec7 #9c978d #3f3c36

humor: clara, acolhedora, escandinava

Melhor para: cozinhas escandinavas

Clara e acolhedora, lembra a luz da manhã sobre armários pintados e bancadas de pedra clara. Os cinzas levemente quentes não deixam o branco parecer frio, ideal para cozinhas com muitas superfícies refletivas. Combine com madeira de freixo clara, ferragens pretas foscas e plantas verdes suaves para equilíbrio. Dica de uso: use o cinza mais escuro na ilha ou armários baixos para ancorar o espaço.

Exemplo de imagem da cozinha nórdica gerada usando media.io

20) Papelaria Tempestuosa

hexagonal: #f7f7f9 #e2e3e8 #bfc3cc #6d7380 #242832

humor: polida, moderna, levemente sóbria

Melhor para: kits de papelaria minimalistas

Polido com leve sobriedade, traz à mente tardes chuvosas, papel macio e linhas de tinta limpas. Os cinzas frios fazem papelaria, envelopes e cartões parecerem profissionais sem excesso de seriedade. Combine com uma cor pontual, como azul marinho, verde escuro ou vinho discreto para selos e marcas pequenas. Dica de uso: imprima grandes áreas nos tons mais claros e use o escuro para monogramas e contatos.

Exemplo de imagem da papelaria tempestuosa gerada usando media.io

Quais cores combinam bem com o branco cinza?

Cinza e branco combinam com quase qualquer cor de destaque, pois são neutros e previsíveis. Para um visual moderno de UI, experimente acentos vivos como cobalto, ciano, limão ou coral para que CTAs e estados ativos sejam instantaneamente notados.

Se você quer criar uma atmosfera mais quente, adicione bege areia, caramelo, terracota ou blush suave—esses tons transformam um design monocromático em algo mais convidativo sem perder o aspecto minimalista.

Para marcas premium ou editoriais, metálicos (ouro/rosé) e tons profundos (marinho, verde-escuro, vinho) adicionam riqueza mantendo a paleta controlada.

Como usar uma paleta de cores branca cinza em projetos reais

Comece com uma função para cada tom: o mais claro para fundos, claro-médio para superfícies (cartões/seções), médio para bordas e divisores, escuro-médio para texto secundário, e carvão para títulos e números-chave.

Fique atento ao contraste—especialmente no branco. Para leituras longas, texto cinza-escuro costuma ser mais confortável que preto puro, e cinzas muito claros devem ser reservados para grandes áreas e não para fontes pequenas.

Para evitar um visual chapado, adicione textura: grão sutil, sombras suaves, referências a papel/linho, ou um único acento saturado para momentos interativos.

Crie visuais de paleta de cinza e branco com IA

Se você vai apresentar uma direção de marca ou construir um moodboard de UI, os visuais contam tanto quanto os códigos HEX. Representar a paleta cinza-branca em cenas realistas (interiores, embalagens, cartazes, landing pages) acelera as decisões.

Com a ferramenta de texto para imagem da Media.io, você pode inserir um prompt, iterar estilos e gerar exemplos consistentes para apresentações, revisões de clientes ou planejamento de conteúdo.

Use os prompts acima como ponto de partida, depois troque para seu setor (por exemplo, “dashboard fintech” ou “rótulo de skincare”) e o formato preferido.

Próximo: Paleta de Cor Preta