Paletas Modernas de Tons Flat: 20 Combinações com Código Hex

Cores flat são modernas, legíveis e fáceis de adaptar a diferentes telas — perfeitas para UI, branding, pôsteres e impressos. Quando os tons são limpos (sem gradientes), seu layout, tipografia e hierarquia se destacam.

Abaixo estão 20 ideias de paletas de cores flat com códigos HEX, sensações e dicas de uso prático — além de exemplos de prompts de IA que você pode reutilizar para gerar visuais combinando.

Por que paletas flat funcionam tão bem

Paletas flat eliminam o ruído visual. Sem gradientes e textura pesada, os usuários escaneiam mais rápido, os estados de UI ficam mais claros e a tipografia permanece nítida em todos os dispositivos.

Também são previsíveis na produção. Preenchimentos sólidos se reproduzem de forma mais consistente em fluxos web, app e impressão, e são mais fáceis de padronizar em sistemas de design.

O mais importante: cores flat tornam a hierarquia evidente. Você pode atribuir funções (superfície, primária, destaque, texto) e manter sua interface ou layout coerente à medida que cresce.

20+ ideias de paletas de cores flat (com códigos HEX)

1) Neutros de argila calma

HEX: #f2e9e4 #c9ada7 #9a8c98 #4a4e69 #22223b

Sensação: aterrada, calma, refinada

Melhor para: diretrizes editoriais de marca

Aterrados e com aspecto de galeria, esses neutros de argila lembram papel de linho, sombras suaves e confiança discreta. Funcionam lindamente em páginas de diretrizes de marca, lookbooks e apresentações premium onde a tipografia precisa de espaço. Combine com fundo branco quente e um destaque de tinta profunda nos títulos. Dica: mantenha o texto principal no navy mais escuro e reserve o mauve para destaques, para garantir contraste sem agressividade.

Exemplo de imagem de neutros de argila calma gerado com media.io

Media.io

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

Teste Gratuito Agora

2) Toque de menta

HEX: #e8f9fd #79dae8 #0aa1dd #2155cd #092a5e

Sensação: fresco, nítido, energético

Melhor para: mockup de dashboard 2D

Nítidas e tecnológicas, essas tonalidades de menta a navy lembram água clara, dados limpos e feedback rápido. Brilham em dashboards, painéis de análise e widgets SaaS onde hierarquia é fundamental. Equilibre o ciano brilhante com uma barra lateral navy profunda e deixe as superfícies claras para legibilidade. Dica: use o azul vívido para botões primários e o aqua suave para estados de hover ou secundários.

Exemplo de imagem de toque de menta gerado com media.io

3) Soda de pêssego

HEX: #fff1e6 #ffd7ba #ffb085 #ff7a59 #2d3047

Sensação: divertida, quente, moderna

Melhor para: pôster promocional para redes sociais

Divertida e apetitosamente atraente, essa mistura lembra refrigerante de pêssego, creme suave e um destaque de pôr do sol. Ótima para promoções em redes sociais, anúncios de criadores e gráficos com frases marcantes. Combine o coral com o índigo profundo para contraste forte na tipografia e deixe o pêssego claro como fundo. Dica: mantenha os gradientes fora e use formas ousadas para preservar o visual moderno e limpo.

Exemplo de imagem de soda de pêssego gerado com media.io

4) Notas de campo da floresta

HEX: #f6f4d2 #c8d5b9 #8fc0a9 #68b0ab #4a7c59

Sensação: terrosa, calma, ao ar livre

Melhor para: conceito de embalagem ecológica

Terrosos e restauradores, esses verdes lembram folhas prensadas, papel reciclado e caminhada matinal. Ideais para embalagens ecológicas, rótulos de produtos sustentáveis e branding de bem-estar natural. Combine com texturas de kraft ou fundo creme limpo para manter o visual honesto e respirável. Dica: use o verde mais escuro para texto regulamentar e verdes médios para ícones, garantindo legibilidade em papel claro.

Exemplo de imagem de notas de campo da floresta gerado com media.io

5) Arcade noturno

HEX: #f7b801 #f18701 #f35b04 #3d348b #0e0b16

Sensação: ousada, elétrica, dramática

Melhor para: design de flyer para evento

Elétricas e de alto contraste, essas tonalidades lembram luzes de arcade, lanches noturnos e títulos marcantes. São melhores para flyers de evento, pôsteres de clube e gráficos de campanha que precisam de energia instantânea. Combine laranjas quentes com o violeta profundo para impacto, mantendo o preto como espaço negativo para evitar ruído visual. Dica: limite o texto a dois pesos para que as cores sejam protagonistas.

Exemplo de imagem de arcade noturno gerado com media.io

6) Escritório céu suave

HEX: #f3f8ff #deecff #b1d4e0 #3e7cb1 #1f2f56

Sensação: leve, confiável, calma

Melhor para: UI de landing page SaaS

Leve e confiável, esses azuis de céu lembram onboarding claro e inbox tranquila. Uma paleta flat assim combina com landing pages SaaS, seções de recursos e tabelas de preços, onde a confiança é fundamental. Combine com muito espaço em branco e um navy para navegação para manter a experiência firme. Dica: faça do azul médio seu CTA principal e use os tons claros para fundos de seção, orientando o rolamento.

Exemplo de imagem de escritório céu suave gerado com media.io

7) Damasco do deserto

HEX: #fff4e0 #f2c6a0 #e07a5f #3d405b #81b29a

Sensação: quente, artesanal, equilibrada

Melhor para: convite de casamento moderno

Quente e artesanal, esses tons lembram pedra ao sol, blush de damasco e folhas de sálvia frescas. Ideais para convites de casamento modernos, save-the-dates e papelaria minimalista. Combine o navy com creme para tipografia limpa, usando o damasco como destaque suave. Dica: mantenha os detalhes simples, como linhas finas ou ícones pequenos, para o visual ficar elegante e não rústico.

Exemplo de imagem de damasco do deserto gerado com media.io

8) Biblioteca cítrica

HEX: #fff3b0 #ffcf56 #f29e4c #1b998b #2d3047

Sensação: inteligente, ensolarada, confiante

Melhor para: design de capa de livro

Inteligente e ensolarada, esse conjunto lembra páginas marcadas, casca cítrica e sublinhado teal discreto. Ótima para capas de livros não-ficção, workbooks e capas tipográficas ousadas. Combine o índigo profundo com amarelo para legibilidade acentuada e use o teal como contraponto moderno. Dica: mantenha a imagem mínima e deixe a tipografia grande dominar para cores vivas.

Exemplo de imagem de biblioteca cítrica gerado com media.io

9) Bubbletea de lilás

HEX: #f8e8ee #fcd5ce #d8e2dc #bee1e6 #a0c4ff

Sensação: suave, fofo, relaxante

Melhor para: anúncio de produto de skincare

Suave e reconfortante, esses pastéis lembram espuma de bubbletea, açúcar de lilás e embalagens leves. Ideais para anúncios de skincare, lançamentos delicados e banners de bem-estar em tom calmo. Use fundo branco limpo ou blush claro e tipografia leve com alto contraste. Dica: escolha um pastel dominante para o produto destaque e use os outros como blocos de apoio para evitar aparência desbotada.

Exemplo de imagem de lilac bubbletea gerado usando media.io

10) Sprint monocromático

HEX:#f8f9fa#e9ecef#adb5bd#495057#212529

Sensação:Mínimo, rápido, focado

Melhor para:Conjunto de ícones e componentes da UI

Mínimo e focado, esses cinzas parecem um tabuleiro de sprint limpo e um espaço de trabalho livre de distrações. Eles são perfeitos para conjuntos de ícones, componentes de interface do usuário e documentação onde a consistência vence. Combine com uma única cor de sotaque de marca em outro lugar do seu sistema e mantenha essas cores neutras para estrutura. Dica de uso: reserve o tom mais escuro para texto e bordas e use o mais claro para superfícies para manter o contraste acessível.

Exemplo de imagem de sprint monocromático gerado usando media.io

11) Frete marítimo

HEX:#e0fbfc#98c1d9#3d5a80#293241#ee6c4d

Sensação:Náutico, Ousado, Profissional

Melhor para:Apresentação slide deck

Náuticas e profissionais, essas cores evocam gráficos de envio, ar fresco e um sinal de coral confiante. Use este esquema de cores planas para decks de slides, relatórios e modelos de keynote que precisam de clareza com um pouco de personalidade. Emparelhe o pale aqua com o deep navy para divisores de seção e mantenha o coral apenas para números-chave ou CTAs. Dica de uso: Repita o sotaque de coral em pequenas doses através dos slides para criar um ritmo consistente.

Exemplo de imagem de frete marítimo gerado usando media.io

12) Noite de Sakura

HEX:#ffe5ec#ffb3c6#ff8fab#a4133c#590d22

Sensação:Romântico, Dramático, Luxo

Melhor para:Capa do álbum de música

Romântica com uma borda dramática, esta paleta parece flores de cereja sob as luzes do palco. Ele se encaixa em capas de álbuns pop e R&B, artes individuais e gráficos de artistas que precisam de um coração ousado. Emparelhe o rosa pálido com o tom de vinho profundo para um forte contraste focal e mantenha a tipografia simples. Dica de uso: use o tom mais escuro como uma viñeta ou moldura para fazer com que os rosas mais brilhantes pareçam intencionais, não açucarados.

Exemplo de imagem de sakura night gerado usando media.io

13) Manhã Alpina

HEX:#f1faee#a8dadc#457b9d#1d3557#e63946

Sensação:Crispy, aventureiro, claro

Melhor para:Cabeçalho do herói do blog de viagens

Crispos e aventureiros, esses tons evocam ar frio, lagos de geleiras e um marcador de trilha vermelho brilhante. Eles funcionam bem para cabeçalhos de blogs de viagens, guias de destinos e seções de heróis editoriais. Emparelhe o azul marinho com a menta pálida para uma legibilidade clara e, em seguida, use o vermelho com moderação para apontar para ações-chave. Dica de uso: Mantenha a ilustração do herói simples e geométrica para que as cores sejam lidas instantaneamente em grandes proporções.

Exemplo de imagem de alpine morning gerado usando media.io

14) Café de Terra Cotta

HEX:#f7ede2#f5cac3#f28482#84a59d#2a9d8f

Sensação:Acolhedor, amigável, artesanal

Melhor para:Café menu design

Acolhedores e amigáveis, essas cores parecem leite cozido no vapor, cerâmica de blush e uma planta de hortelã no balcão. Eles são muito adequados para menus de cafés, sinalização de pequenas empresas e inserções de embalagens de alimentos. Emparelhe os rosas quentes com os verdes mais frios para manter o layout equilibrado e use creme como sala de respiração. Dica de uso: Defina os preços no verde mais profundo para que eles permaneçam legíveis contra os tons de fundo mais suaves.

Exemplo de imagem de terra cotta cafe gerado usando media.io

15) Console Retro

HEX:#eae2b7#fcbf49#f77f00#d62828#003049

Sensação:retro, perfurador, nostálgico

Melhor para:Telas de integração de aplicativos

Retro e perfurador, esses tons trazem à mente consoles vintage, tokens de arcade e prompts de tela em negrito. Estas combinações de cores planas são excelentes para telas onboarding onde você deseja compreensão rápida e impulso lúdico. Emparelhe azul marinho com creme para cópia clara, em seguida, use laranja ou vermelho para progresso e destaques. Dica de uso: Mantenha as ilustrações simples e use raios de canto consistentes para que o visual permaneça coeso entre os passos.

Exemplo de imagem de retro console gerado usando media.io

16) Concreto fresco

HEX:#f4f4f4#d9d9d9#b0bec5#546e7a#263238

Sensação:industrial, moderno, discreto

Melhor para:layout do portfólio de arquitetura

Industrial e discreto, este conjunto parece concreto, aço e luz suave e nublada. Ele se adapta a portfólios de arquitetura, estudos de caso e apresentações de estúdio onde o trabalho deve permanecer no centro do palco. Emparelhe o carvão mais escuro com muitas margens cinza claras e mantenha o azul-cinza como uma sutil indicação de seção. Dica de uso: use regras finas e espaçamento generoso em vez de blocos pesados para manter uma estrutura premium e arejada.

Exemplo de imagem de cool concrete gerado usando media.io

17) Mercado de Outono

HEX:#fff1c1#f4d35e#ee964b#f95738#0d3b66

Sensação:Festivo, caloroso, confiante

Melhor para:banner de venda sazonal

Festivos e quentes, esses tons evocam barracas de mercado, luz dourada e uma jaqueta azul marinha nítida. Eles são ótimos para banners de venda sazonal, cabeçalhos de e-mail e promoções de varejo que precisam de urgência amigável. Emparelhe o azul marinho com amarelo para alto contraste e mantenha laranja para crachás ou etiquetas de desconto. Dica de uso: Evite usar todos os tons quentes ao mesmo tempo em áreas grandes; Deixe uma cor quente dominar e use as outras como acentos.

Exemplo de imagem de mercado de outono gerado usando media.io

18) Sorveteria

HEX:#fde2e4#fad2e1#c5dedc#dbe7e4#f0efeb

Sensação:Doce, leve, arejado

Melhor para:Convite para chuveiro de bebê

Doces e arejados, esses cremes pastel e mentas parecem colheres em uma caixa de vidro refrigerada. Eles se encaixam em convites de baby shower, anúncios suaves e papelaria de festa suave. Emparelhe com o tipo serif simples ou sans arredondado e mantenha os fundos principalmente creme para legibilidade. Dica de uso: Adicione uma única cor de texto mais escura, como carvão, para que os tons delicados não reduzam a legibilidade.

Exemplo de imagem de salão de sorvete gerado usando media.io

19) Corte da galáxia

HEX:#f0f3bd#02c39a#00a896#028090#05668d

Sensação:Futurista, limpo, oceânico

Melhor para:UI móvel fintech

Futuristas e oceânicos, esses azuis parecem um painel brilhante em uma sala escura. Eles se encaixam fortemente na UI móvel fintech, nas telas da carteira e nos fluxos de segurança onde a clareza constrói confiança. Emparelhe o cal pálido como uma cor de destaque e mantenha o azul mais profundo para navegação e gráficos. Dica de uso: use o verde-azul mais brilhante apenas para estados de sucesso para tornar o feedback instantaneamente reconhecível.

Exemplo de imagem de corte de galáxia gerado usando media.io

20) Estúdio Sunlit

HEX:#fff8e7#fee440#00bbf9#00f5d4#9b5de5

Sensação:Criativo, otimista, moderno

Melhor para:Página inicial do portfólio do criador

Otimistas e criativas, essas cores parecem a luz do sol em uma mesa com marcadores brilhantes nas proximidades. Eles funcionam bem para portfólios de criadores, homepages de agências e marcas pessoais lúdicas. Emparelhe o amarelo quente com bastante creme para que não sobrecarregue, e use o violeta para botões ou elos de chave. Dica de uso: Escolha duas cores dominantes por seção e mantenha o resto como pequenos sotaques para evitar uma página barulhenta.

Exemplo de imagem de sunlit studio gerado usando media.io

Quais cores combinam bem com flat?

Paletas de cores planas combinam melhor com neutros claros (branco, branco quente, cinza claro, carvão) porque preservam o visual limpo e gráfico e mantêm o contraste previsível.

Experimente uma abordagem "um herói + um sotaque": escolha um tom plano dominante para superfícies grandes, em seguida, um único sotaque de alta energia para CTAs, crachás ou números-chave. Isso mantém o sistema moderno em vez de barulhento.

Se você precisar de mais profundidade sem gradientes, use uma rampa escalonada (clara, média, escura) do mesmo tom, além de um sotaque contrastante (como coral contra azul marinho ou azul contra laranja).

Como usar uma paleta de cores flat em designs reais

Atribua papéis a cada cor antes de projetar: fundo/superfície, ação primária, ação secundária, texto e bordas. As cores planas parecem intencionais quando cada tom tem um trabalho.

Para a interface do usuário, mantenha os tons mais claros para as superfícies e reserve a cor mais escura para texto e divisores para proteger a acessibilidade. Para impressão e pôsteres, use grandes formas planas e menos estilos de tipo para que a paleta permaneça nítida.

Para evitar um visual "brinquedo", limite as cores saturadas a pequenas áreas e deixe que tons mais suaves lidem com a maior parte da tela-especialmente em modelos modernos de marca e layouts de sites.

Crie visuais com paletas flat usando IA

Precisa de um maquete rápido que combine com sua paleta de design plano? Gere visuais consistentes (pôsteres, telas de interface do usuário, capas, embalagens) reutilizando um estilo de prompt e trocando apenas as indicações de cor.

Com o Media.io, você pode colar as instruções acima, ajustar a proporção e criar um conjunto de imagens coesas que combinem com o sistema da sua marca — sem começar do zero todas as vezes.

Depois de gostar de um resultado, salve o prompt como um modelo para que os ativos futuros permaneçam consistentes em campanhas, páginas e plataformas.

Próximo: Paleta de Cores Dente-de-leão