20 combinações de paletas modernas de tons de tempestade com códigos hexadecimais

As paletas de tempestade misturam tons profundos de azul-marinho, cinzas ardósia e acentos de alto contraste para criar designs que transmitem um visual moderno, ousado e instantaneamente cinematográfico.

Abaixo estão 20 combinações de cores de tempestade cuidadosamente selecionadas com códigos HEX, além de dicas práticas de combinação para branding, UI, cartazes e embalagens.

Por Que Paletas de Tempestade Funcionam Tão Bem

As cores de tempestade criam hierarquia naturalmente: bases escuras (marinho, carvão, ardósia) ancoram tipografia e componentes de UI, enquanto tons de névoa mais claros trazem respiro e legibilidade.

Elas também transmitem um clima instantâneo. Azuis tempestuosos e neutros frios passam confiança e profissionalismo, enquanto um único acento de relâmpago (amarelo, ciano, âmbar ou dourado) oferece um contraste marcante sem precisar de muitas cores.

Por serem paletas entre neutro e saturado, adaptam-se a diversos meios — de dashboards SaaS elegantes a cartazes cinematográficos — mantendo-se sempre modernas e atemporais.

Mais de 20 Ideias de Paleta de Cores de Tempestade (com Códigos HEX)

1) Relâmpago Sobre Ardósia

HEX: #0B1320 #1F2A44 #3E4C66 #8A94A6 #F2D14B

Clima: dramático, elétrico, moderno

Melhor para: hero de landing page de startup de tecnologia

Azuis meia-noite dramáticos e cinzas-ardósia de tempestade evocam nuvens se abrindo para um lampejo de relâmpago. Use esta paleta de tempestade em seções de destaque, manchetes e CTAs ousados que precisam de contraste imediato. Combine o amarelo com muito espaço negativo e deixe os tons frios dominarem o fundo. Dica de uso: restrinja o amarelo relâmpago a um único elemento principal para evitar poluição visual.

Exemplo de imagem de relâmpago sobre ardósia gerada no media.io

Media.io

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

Experimente Gratuito Agora

2) Concreto Lavado pela Chuva

HEX: #101820 #2B2F36 #5B6672 #A7B0BA #E6E9ED

Clima: minimalista, frio, sóbrio

Melhor para: dashboard minimalista de UI

Cinzas de concreto frio evocam ruas urbanas após um longo aguaceiro: calmas e focadas. Esses tons funcionam perfeitamente em dashboards, tabelas de dados e painéis administrativos onde a leitura é prioridade. Combine com um só acento saturado em caso de alertas ou status. Dica de uso: reserve o cinza mais claro para cartões e superfícies, mantendo a hierarquia clara.

Exemplo de imagem de concreto lavado pela chuva gerada no media.io

3) Lavanda de Nuvem de Tempestade

HEX: #1A1B2A #2D2B3F #5B4E70 #A49AB8 #E9E4F0

Clima: sonhador, introspectivo, editorial

Melhor para: editorial de revista

Índigos esfumaçados e lavanda suave evocam nuvens ao anoitecer sobre o horizonte silencioso. A combinação é perfeita para revistas, páginas de poesia e lookbooks sofisticados, trazendo suavidade sem perder profundidade. Combine com margens off-white e tipografia serifada discreta para um ar editorial. Dica de uso: utilize o lilás claro para destacar citações e divisores de seção.

Exemplo de imagem de lavanda de nuvem de tempestade gerada no media.io

4) Verde-azulado Cabeça de Trovão

HEX: #081C1E #0E3B43 #1B6B73 #7FB7B5 #D8F3F1

Clima: fresco, aquático, confiante

Melhor para: identidade visual de bem-estar

O verde-azulado oceânico profundo com espuma do mar suave lembra chuva rolando por penhascos costeiros. Essas combinações brilham em marcas de bem-estar, embalagens de spa e visuais de apps calmantes que inspiram confiança. Combine com neutros macios e fontes sans arredondadas para um toque moderno e acolhedor. Dica de uso: use o tom de espuma do mar como fundo principal e deixe os tons escuros ancorarem logotipos e títulos.

Exemplo de imagem de verde-azulado cabeça de trovão gerada no media.io

5) Guarda-chuva Noir

HEX: #050608 #14161A #2A2D34 #6B707A #D1D5DB

Clima: elegante, urbano, alto contraste

Melhor para: layout de lookbook de moda

Pretos intensos e cinzas grafite lembram um passeio noturno sob postes de luz e guarda-chuvas. A paleta realça fotografia de produto, editoriais de moda e tipografia luxuosa sem competir por atenção. Em impressão, combine com um acento metálico para acabamento sofisticado. Dica de uso: mantenha os textos em cinza claro para conforto visual e use preto quase total nos títulos.

Exemplo de imagem de guarda-chuva noir gerada no media.io

6) Brilho de Asfalto Molhado

HEX: #0A0D12 #232A34 #3D4B63 #9AA4B2 #FFB000

Clima: energético, cru, noturno

Melhor para: cartaz de evento noturno

Azuis asfalto e aço escuro evocam o clima de cinema, como néon refletido em pavimento molhado. É ideal para shows, cartazes de eventos noturnos e meetups de tecnologia que exigem destaque visual. Combine com tipografia condensada e grades fortes para energia contida. Dica de uso: use o âmbar como efeito de holofote em detalhes-chave como data e local.

Exemplo de imagem de brilho de asfalto molhado gerada no media.io

7) Verde Oliva Trovão Distante

HEX: #10130F #2A3522 #4D5E3B #A3B18A #E9EDC9

Clima: terroso, robusto, calmo

Melhor para: embalagem de vestuário outdoor

Verde-oliva musgoso e cáqui suave evocam nuvens de chuva sobre trilhas da floresta: firme e robusto. Esses tons funcionam para moda outdoor, produtos sustentáveis e linhas de herança onde a natureza deve ser autêntica. Combine com textura de kraft ou acabamentos foscos para clima ainda mais terroso. Dica de uso: utilize o cáqui claro em painéis de fundo para facilitar a leitura das informações do produto.

Exemplo de imagem de verde oliva trovão distante gerada no media.io

8) Rosa de Carga Estática

HEX: #1B0F17 #3B1E2D #6B3A4D #C48A9B #F4E3E7

Clima: romântico, irreverente, noturno

Melhor para: design de capa de álbum

Sombras de frutas escuras e rosas empoeirados lembram trovões distantes com um pulsar suave. A mistura é ótima para capas de álbuns, livros de poesia e campanhas boutique que querem emoção sem clichê. Combine com tipografia de alto contraste e textura granulada para acabamento moderno e atmosférico. Dica de uso: use o blush mais claro como borda ou etiqueta fina para emoldurar a arte.

Exemplo de imagem de rosa de carga estática gerada no media.io

9) Cobre Cortado por Raio

HEX: #1A1512 #3A2C23 #6D4C3D #C08B5C #F1E2CF

Clima: quente, rústico, refinado

Melhor para: menu de café impresso

Marrons de espresso esfumaçados e o calor do cobre evocam luz de lamparina em noite chuvosa. Esses tons funcionam muito bem para menus de café, marcas artesanais de alimentos e papelaria aconchegante. Combine com papel creme e fontes clássicas serifadas para visual premium acolhedor. Dica de uso: destaque itens assinatura em cobre e mantenha o corpo do texto no marrom escuro para equilíbrio.

Exemplo de imagem de cobre cortado por relâmpago gerado com media.io

10) Harbor Storm Blue

HEX: #071821 #0E2A3A #164A63 #4D7C8A #C7DDE2

Clima: náutico, estável, profissional

Melhor para: interface de site de viagens

Azuis portuários e toques de vidro do mar evocam ondas sob céus pesados, confiáveis e calmos. A paleta apoia plataformas de viagem, fluxos de reserva e páginas com muito conteúdo que precisam de seções claras. Combine com fotografia quente e deixe o azul médio para botões e links. Dica de uso: use o aqua claro como fundo para filtros e painéis secundários para suavizar o peso visual.

Exemplo de imagem de harbor storm blue gerado com media.io

11) Hailstone Mint

HEX: #0A1A18 #0F3D3A #2D6A63 #9DD9D2 #E6FFFA

Clima: refrescante, limpo, revigorante

Melhor para: telas de onboarding de app mobile

Tons verdes-azulados frescos parecem chuva gelada e ar puro após a tempestade. São ideais para fluxos de onboarding, apps de saúde e UX de produto limpo onde transmitir confiança é essencial. Use com ícones simples e bastante espaço em branco para uma experiência leve. Dica de uso: use o menta como cor principal da superfície e reserve o teal mais escuro para navegação e estados ativos.

Exemplo de imagem de hailstone mint gerado com media.io

12) Midnight Downpour

HEX: #050A12 #0B1A2A #1E3347 #556B7A #B9C3CC

Clima: cinematográfico, intenso, dramático

Melhor para: cartaz de filme cinematográfico

Azuis da meia-noite cinematográficos e cinzas de aço sugerem chuva escorrendo no vidro e uma cidade pulsando no escuro. Essa paleta de tempestade combina para cartazes de filmes, capas de livros e artes dramáticas. Combine com um único detalhe quente na imagem se precisar de foco, mas mantenha a tipografia fria e nítida. Dica de uso: use o cinza claro para créditos e letras miúdas para manter a leitura fácil sem quebrar o clima.

Exemplo de imagem de midnight downpour gerado com media.io

13) Charged Indigo

HEX: #0C1024 #1B1F4A #343A8C #7C7FE3 #E8E9FF

Clima: ousado, futurista, energético

Melhor para: interface de overlay de stream de jogos

Indigos intensos e pervinca elétrica trazem a sensação de relâmpagos distantes iluminando nuvens espessas. Essas combinações de cores da tempestade ficam ótimas para overlays de streaming, painéis de e-sports e interfaces impactantes que precisam de profundidade e brilho. Combine com formas geométricas limpas e mantenha o texto principalmente claro para contraste. Dica de uso: foque o pervinca mais brilhante apenas para estados ativos e notificações para preservar a hierarquia.

Exemplo de imagem de charged indigo gerado com media.io

14) Foggy Pier Neutrals

HEX: #0D0F12 #202329 #3C4048 #8D949E #F5F6F7

Clima: neutro, elegante, corporativo

Melhor para: template para apresentação corporativa

Cinzas de névoa suaves e acentos quase pretos lembram um píer silencioso desaparecendo no nevoeiro. A gama neutra é perfeita para apresentações, relatórios e templates empresariais limpos que dependem de estrutura. Use uma cor de marca única para gráficos e métricas importantes para dar vida aos slides. Dica de uso: use o cinza mais claro como fundo base dos slides e reserve os tons escuros para títulos e divisórias.

Exemplo de imagem de foggy pier neutrals gerado com media.io

15) Electric Horizon Cyan

HEX: #06141B #0B2B35 #0E5666 #29B6C8 #D8FBFF

Clima: brilhante, tecnológico, limpo

Melhor para: infográfico explicativo SaaS

Ciano brilhante contra azul esverdeado profundo lembra uma tempestade abrindo para um horizonte luminoso. É uma ótima escolha para infográficos de SaaS, explicações de recursos e diagramas que precisam de grupos visuais fáceis. Combine com ícones de linha fina e bastante espaço para leveza. Dica de uso: reserve o ciano para números-chave e destaques, e use tons mais escuros para estrutura e legendas.

Exemplo de imagem de electric horizon cyan gerado com media.io

16) Storm Lantern Gold

HEX: #0E1116 #1F2A33 #394B57 #8796A5 #D8B15A

Clima: luxuoso, com acento quente, confiante

Melhor para: anúncio de relógio premium

Grafite profundo e aço frio criam um clima de luxo, enquanto o dourado da lanterna adiciona um calor controlado como luz na tempestade. Este mix funciona para anúncios de produtos premium, tecnologia de ponta e banners elegantes de e-commerce. Combine com texto mínimo e tipografia forte para manter a sofisticação. Dica de uso: use o dourado com moderação para o logo, preço ou um detalhe-chave para sinalizar qualidade.

Exemplo de imagem de storm lantern gold gerado com media.io

17) Rainy Day Pastels

HEX: #1A2330 #2F3D4F #6C7A89 #C7CED6 #F7F2E8

Clima: suave, discreto, elegante

Melhor para: conjunto de convite de casamento

Azuis acinzentados suaves e marfim quente evocam uma garoa suave do lado de fora de um cômodo à luz de vela. A paleta combina com papelaria moderna de casamento, convites minimalistas e cartões refinados. Combine com arte de linha delicada e uma fonte serifada clássica para manter a atemporalidade. Dica de uso: imprima o tom mais escuro para nomes e títulos, e use os cinzas claros para bordas e detalhes.

Exemplo de imagem de rainy day pastels gerado com media.io

18) Thunder Alley Burgundy

HEX: #12070B #2C0F17 #5A1C2B #9B4A5D #E7C7CE

Clima: marcante, romântico, atmosférico

Melhor para: branding de livraria e ecobag

Burgundy profundo e rosado empoeirado evocam trovão ecoando por um beco estreito iluminado por vitrines. É ideal para branding de livraria, eventos literários e embalagens que buscam personalidade e profundidade. Combine com papel creme e tipografia vintage para um visual acolhedor e curado. Dica de uso: mantenha o blush como fundo e use burgundy em logos e carimbos para um toque rico e intencional.

Exemplo de imagem de thunder alley burgundy gerado com media.io

19) Afterstorm Sunrise

HEX: #0B1D2A #143B4D #2C6E7B #F2B880 #F7E7C8

Clima: esperançoso, equilibrado, fresco

Melhor para: kit de templates para redes sociais

Azuis frios de tempestade combinados com pêssego suave do amanhecer evocam o momento em que as nuvens se dissipam e a luz retorna. Esse equilíbrio funciona bem para posts sociais, carrosséis e branding de estilo que quer contraste sem dureza. Combine com fontes sem serifa limpas e formas simples para deixar as cores contarem a história. Dica de uso: use pêssego para destaques e adesivos, e mantenha os azuis para estrutura e consistência.

Exemplo de imagem de afterstorm sunrise gerado com media.io

20) Calm After Rain

HEX: #0E1821 #1F3240 #3E5C6B #A3B7C2 #EAF0F2

Clima: calmo, arejado, contemporâneo

Melhor para: mood board de design de interiores

Azuis acinzentados frios e tons de névoa leve evocam céus tranquilos após os últimos pingos desaparecerem. A paleta serve para mood boards de interiores, portfólios de arquitetura e branding de estilo de vida calmo. Combine com texturas de madeira quente ou bege suave se quiser mais conforto sem perder leveza. Dica de uso: deixe o tom mais claro dominar a tela e use azuis mais profundos para legendas e amostras.

Exemplo de imagem de calm after rain gerado com media.io

Quais cores combinam bem com tempestade?

Tons de tempestade combinam melhor com neutros frios limpos (cinza nevoeiro, off-white, aço) para manter os layouts legíveis e modernos. Eles sustentam fundos, cartões e grandes áreas de texto sem diluir o clima.

Para acentos, escolha uma cor de "relâmpago": âmbar/amarelo para urgência e chamadas, ciano para destaque tecnológico, ou dourado para branding premium. Use com parcimônia para que a paleta continue controlada e não caótica.

Se precisar de calor, traga pêssego claro, cobre ou blush—especialmente para estilo de vida, editorial ou embalagem—mantendo os azuis/cinzas tempestuosos como estrutura principal.

Como Usar uma Paleta de Tempestade em Projetos Reais

Comece com uma base escura (azul-marinho/cinza-chumbo) para títulos, hero sections ou navegação, depois use um médio ardósia/aço para painéis e divisores secundários. Isso cria profundidade sem depender de sombras pesadas.

Reserve o tom mais claro para fundos e superfícies de conteúdo para manter a tipografia confortável de ler. Em UI, mantenha os estados interativos consistentes mapeando um tom médio para botões e um acento para "ativo/principal".

No impresso (posters, menus, embalagens), paletas de tempestade ficam especialmente sofisticadas com acabamento fosco, granulação sutil ou gradientes suaves—mas evite usar muitos acentos no mesmo layout.

Crie Visuais de Paleta de Tempestade com IA

Se quiser ver como os tons de tempestade se comportam em composições reais, gere mockups rápidos (seções hero, posters, embalagens ou telas de onboarding) antes de definir um sistema final.

Com o texto para imagem do Media.io, você pode testar contrastes de tipografia, posição de acentos e o clima geral em minutos—bastando ajustar os prompts para combinar com o estilo da sua marca.

Use seu conjunto favorito de HEX acima, descreva o layout e escolha uma cor de destaque como ponto focal para um visual limpo de tempestade.

Próximo: Paleta de Cores Mansão Assombrada