25 Paletas Modernas em Tons Vermelho e Azul com Códigos Hex

Vermelho e azul são uma das combinações mais confiáveis no design moderno: ousada para chamar atenção, mas estruturada o bastante para passar confiança.

Abaixo você encontrará ideias de paletas de cores vermelho e azul com códigos HEX para UI, branding, pôsteres e mais—além de dicas práticas para contraste, destaques e tipografia legível.

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

Vermelho e azul naturalmente criam uma forte hierarquia visual: o azul tende a transmitir estabilidade e "estrutura", enquanto o vermelho é chamativo e incentiva a ação. Juntos, facilitam guiar os usuários do layout para o título e, em seguida, para a chamada à ação.

Como um esquema de vermelho e azul, a dupla também abrange temperatura e emoção. O azul acalma, enquanto o vermelho energiza—você pode ajustar o clima do profissional ao descontraído mudando a saturação, a intensidade e o quanto de espaço neutro deixa.

Do ponto de vista da acessibilidade, muitas combinações de vermelho/azul podem alcançar alto contraste—especialmente quando apoiadas por quase pretos, off-whites e cinzas. Isso torna os tons de vermelho e azul práticos para UI, sinalização e tipografia em pôsteres, quando usados com intenção.

Mais de 20 ideias de paletas vermelho e azul (com códigos HEX)

1) Crimson Navy

HEX: #C1121F #003049 #2B2D42 #EDF2F4 #8D99AE

Clima: ousado, clássico, confiante

Melhor para: branding corporativo e cabeçalhos de sites

Ousados e clássicos como um blazer sob o céu noturno, esses tons transmitem confiança e autoridade. Use o azul-marinho escuro em fundos e o vermelho vivo para chamadas à ação, mantendo o contraste nítido. Combine com cinzas frios e bastante espaço em branco para manter o visual sofisticado, não chamativo. Dica: reserve o vermelho mais intenso para uma ação por tela, evitando fadiga visual.

Exemplo de imagem crimson navy gerado usando media.io

Media.io

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

Experimente grátis agora

2) Cherry Ice

HEX: #E11D48 #1D4ED8 #93C5FD #FCE7F3 #0F172A

Clima: refrescante, divertido, alto contraste

Melhor para: templates para redes sociais e miniaturas de criadores

Refrescante e divertido como um sorvete de cereja com gelo, esta mistura destaca sem ser neon. Deixe o azul brilhante ocupar as formas maiores, enquanto o vermelho cereja destaca selos, preços ou palavras-chave. Rosa suave e azul claro funcionam como fundos neutros sem perder o tema. Dica: adicione um contorno escuro fino para textos sobre tons pastéis, mantendo a legibilidade.

Exemplo de imagem cherry ice gerado usando media.io

3) Retro Athletics

HEX: #D90429 #2B2D42 #4361EE #F7F7FF #FFB703

Clima: enérgico, esportivo, retrô

Melhor para: pôsteres esportivos e gráficos de merchandising de times

Enérgica e esportiva com um clima de placar vintage, essa paleta está pronta para o início do jogo. Use o carvão escuro nos títulos grandes, com vermelho e azul royal como blocos de destaque para contraste. Um amarelo quente é ideal para pequenos detalhes em números, ícones ou costuras. Dica: evite gradientes e preserve bordas sólidas para manter o visual atlético retrô.

Exemplo de imagem retro athletics gerado usando media.io

4) Harbor Lights

HEX: #EF233C #001F54 #034078 #A9D6E5 #F8F9FA

Clima: náutico, limpo, moderno

Melhor para: landing pages de viagens e branding de hotéis

Limpo e náutico como luzes no porto refletindo na água escura, este duo é moderno e elegante. Use os azuis profundos em seções largas e navegação, e o vermelho como pequeno destaque, como em botões de reserva. O azul-aqua pálido ilumina imagens, mantendo o visual costeiro e leve. Dica: escolha um azul para superfícies principais e outro para estados de hover ou painéis secundários.

Exemplo de imagem harbor lights gerado usando media.io

5) Velvet Flag

HEX: #B80C09 #0B1320 #1C77C3 #E5E5E5 #7D8597

Clima: sóbrio, sofisticado, dramático

Melhor para: diagramação editorial e capas de livros

Sóbria e sofisticada como cortinas de veludo sob a luz do palco, essa combinação traz drama sem prejudicar a legibilidade. Organize o layout com quase preto e azul para elementos estruturais—como fileiras, legendas e citações destacadas. O vermelho se destaca melhor nos títulos ou em detalhes únicos de ilustrações. Dica: use texto sobre cinza claro, não branco puro, para evitar reflexo em conteúdos longos.

Exemplo de imagem velvet flag gerado usando media.io

6) Winter Sunrise

HEX: #F94144 #277DA1 #1D3557 #F1FAEE #A8DADC

Clima: otimista, leve, calmante

Melhor para: apps de bem-estar e telas de onboarding

Otimista e leve como o nascer do sol no inverno sobre um lago congelado, essa paleta transmite calma e motivação. Use azuis frios nas superfícies de UI principais e reserve o vermelho aquecido para progresso, confirmações ou pequenos selos. Aqua menta e branco suave tornam o onboarding amigável e arejado. Dica de acessibilidade: use texto vermelho apenas sobre branco suave, nunca sobre aqua.

Exemplo de imagem winter sunrise gerado usando media.io

7) Neon Arcade

HEX: #FF0054 #00A6FB #001845 #F7F7FF #FFD60A

Clima: elétrico, jovem, enérgico

Melhor para: flyers de eventos e pôsteres de música

Elétrica e jovem como um sinal de arcade brilhando à meia-noite, essa paleta chama atenção de imediato. O azul vibrante ocupa o fundo e o vermelho neon destaca títulos e datas. Um toque de amarelo ilumina ícones ou divisores, criando um visual marcante. Dica: mantenha blocos de texto sobre o azul-marinho para que as cores vivas fiquem destacadas, sem vibrarem.

Exemplo de imagem neon arcade gerado usando media.io

8) Rose Denim

HEX: #E63946 #457B9D #1D3557 #F1FAEE #FFC6D9

Clima: suave, estiloso, acessível

Melhor para: lookbooks de moda e blogs de lifestyle

Suave e estiloso como um lenço rosado combinado com jeans, essa combinação é acessível e moderna. Use azul jeans na navegação e barras laterais, vermelho nos títulos para guiar o olhar, e rosado leve como fundo para grids de produtos ou cartões de citação sem dominar as fotos. Dica: mantenha a saturação moderada nas imagens para valorizar a paleta.

Exemplo de imagem rose denim gerado usando media.io

9) Marinara Bay

HEX: #D62828 #003049 #1D6A96 #F77F00 #FCBF49

Clima:quente, apetitoso, animado

Melhor para:embalagens de alimentos e cardápios de restaurantes

Quente e apetitoso como um molho marinara fervendo ao lado de uma brisa fresca do mar, as cores transmitem vivacidade e ousadia. Use azul-marinho e azul oceano para estruturar cardápios enquanto o vermelho destaca pratos e preços. Os laranjas funcionam como acentos secundários para níveis de picância, chamadas ou categorias. Dica de uso: testes de impressão são importantes aqui, então ajuste o vermelho um pouco mais escuro se borrar em papel não revestido.

Exemplo de imagem de marinara bay gerado por media.io

10) Rocket Pop

HEX: #FF3B30 #007AFF #0A0F2C #FFFFFF #C7C7CC

Clima:limpo, marcante, tecnológico

Melhor para:conjuntos de ícones de aplicativos e componentes de UI

Limpo e marcante como um picolé no auge do verão, essa combinação é nítida e de leitura instantânea. O azul vibrante e o vermelho formam pares confiáveis para estados como primário, destrutivo e destaque. Mantenha o azul-marinho escuro para textos e use o cinza como espaçamento discreto entre componentes. Dica de uso: mantenha os cantos sempre arredondados para que as cores fortes pareçam coesas, não caóticas.

Exemplo de imagem de rocket pop gerado por media.io

11) Canyon Dusk

HEX: #C81D25 #233D4D #5DA9E9 #EAE2B7 #0B090A

Clima:sólido, cinematográfico, aventureiro

Melhor para:identidades de marca de aventura e anúncios externos

Sólida e cinematográfica como as sombras dos cânions ao entardecer, a paleta passa robustez e refinamento. Use o cinza-ardósia profundo e o preto para logotipos e tipografia, depois traga o azul claro como realce de céu e formas secundárias. O bege arenoso serve como fundo natural que suaviza o vermelho. Dica de uso: combine com papel texturizado ou sobreposições de textura para um efeito mais aventureiro.

Exemplo de imagem de canyon dusk gerado por media.io

12) Studio Contrast

HEX: #E10600 #0057B8 #111827 #F9FAFB #6B7280

Clima:afiado, moderno, profissional

Melhor para:páginas de apresentação de produtos e sites SaaS

Afiado e moderno como uma foto de produto com luz de estúdio, o contraste transmite profissionalismo e controle. Use o azul como cor principal de ação e o vermelho para avisos, tags de tempo limitado ou um único detalhe de destaque. Carvão, branco e cinza médio criam um sistema tipográfico forte para páginas longas. Dica de uso: evite os dois tons mais intensos na mesma linha de botões para não competir por atenção.

Exemplo de imagem de studio contrast gerado por media.io

13) Botanical Tide

HEX: #E63946 #1E6091 #184E77 #D8F3DC #2D6A4F

Clima:fresco, botânico, equilibrado

Melhor para:ilustrações em aquarela e campanhas de primavera

Fresco e botânico como folhas após a chuva com um toque de flor silvestre, os tons transmitem equilíbrio e leveza. Use os verdes e o menta clara para lavagens amplas, depois adicione azul para profundidade de sombra e estrutura. O vermelho funciona melhor em pequenos toques florais, para manter a composição natural. Dica de uso: em trabalhos em estilo aquarela, mantenha o menta como valor mais claro para garantir a leitura dos detalhes.

Exemplo de imagem de botanical tide gerado por media.io

14) Opera House

HEX: #B5172E #14213D #3A86FF #F1F1F1 #C0C0C0

Clima:dramático, elegante, teatral

Melhor para:pôsteres de teatro e branding de eventos culturais

Dramático e elegante como um holofote sobre cortina de veludo, esses tons parecem prontos para uma estreia. Use o azul-marinho profundo no fundo do pôster, depois traga o azul mais vibrante para blocos de informação. Um manchete restrita em vermelho adiciona intensidade sem sobrecarregar a tipografia. Dica de uso: aumente o espaçamento das letras em texto claro sobre fundo azul-marinho para um efeito mais sofisticado.

Exemplo de imagem de opera house gerado por media.io

15) Signal System

HEX: #DC2626 #2563EB #0F172A #E5E7EB #22C55E

Clima:claro, funcional, sistematizado

Melhor para:sistemas de design e UI com acessibilidade em primeiro lugar

Claro e funcional como um painel de controle bem identificado, a paleta é de leitura imediata. Como esquema vermelho e azul, suporta semântica forte de UI: azul para ações primárias, vermelho para estados destrutivos e verde para sucesso. Use quase-preto para texto e cinza-claro como base para destacar componentes. Dica de uso: teste contraste para daltonismo usando formas de ícones além da cor.

Exemplo de imagem de signal system gerado por media.io

16) Picnic Nautical

HEX: #F03E3E #1971C2 #0B1F3A #FFF5F5 #FFE066

Clima:alegre, de verão, amigável

Melhor para:convites para festas e panfletos de piquenique

Alegre e de verão como uma toalha de piquenique à beira-mar, os tons transmitem simpatia e convite. Use o azul para tipografia principal e estrutura do layout, depois adicione o vermelho para destacar nome do evento ou linha de RSVP. Rosa-creme e amarelo-sol mantêm o visual leve e infantil sem parecer pastel. Dica de uso: em convites impressos, mantenha o amarelo como um pequeno acento para legibilidade em diversos papéis.

Exemplo de imagem de picnic nautical gerado por media.io

17) Night Shift

HEX: #FF2D55 #0A84FF #1C1C1E #2C2C2E #F2F2F7

Clima:moderno, noturno, alto contraste

Melhor para:dashboards dark mode e UI de análises

Moderno e noturno como as luzes da cidade num turno da madrugada, esse conjunto é feito para clareza no modo escuro. Use os dois tons de cinza-escuro como base, depois escolha azul ou vermelho como destaque principal de acordo com o tipo de dado. O branco-gelo deve ser reservado para números e etiquetas-chave, garantindo "respiro" ao painel. Dica de uso: limite gráficos a duas cores de destaque para evitar ruído visual.

Exemplo de imagem de night shift gerado por media.io

18) Coral Blueprint

HEX: #FF4D6D #2F5DFF #0B2545 #F8F9FA #48CAE4

Clima:criativo, limpo, enérgico

Melhor para:branding de startups e apresentações de pitch

Criativo e limpo como tinta coral em papel de projeto, a paleta transmite energia com organização. Essas combinações de vermelho e azul funcionam bem em apresentações que pedem hierarquia visual: azul para estrutura e coral para destaques. Use o aqua de maneira pontual para diagramas ou detalhes secundários, evitando excessos visuais. Dica de uso: mantenha um acento por métrica em gráficos em toda a apresentação para consistência.

Exemplo de imagem de coral blueprint gerado por media.io

19) Glacier Cherry

HEX: #C81E1E #1E3A8A #60A5FA #F3F4F6 #111827

Clima:frio, nítido, confiante

Melhor para:anúncios de produtos tecnológicos e banners web

Frio e nítido como o ar glaciar com punch de cereja, o contraste transmite confiança e modernidade. Use o azul-médio para formas grandes e o azul-claro como brilho em torno dos produtos. O vermelho destaca melhor preço, tags de recurso ou ícone único. Dica de uso: adicione sombras sutis em cinza-escuro para separar elementos sem perder a limpeza visual.

Exemplo de imagem de glacier cherry gerado por media.io

20) Minimal Patriot

HEX: #D00000 #003566 #001D3D #EDEDED #FFFFFF

Clima:minimalista, forte, atemporal

Melhor para:campanhas de ONGs e anúncios cívicos

Minimalista e forte como um banner nítido em um dia claro, essas cores soam atemporais e diretas. Mantenha os azuis escuros como base para títulos e barras, use o vermelho somente em chamadas urgentes ou doações. Muito espaço em branco dá sensação de confiança e facilita a leitura. Dica de uso: se desejar contraste mais suave, troque o branco puro do fundo pelo cinza-claro e mantenha o peso das fontes consistente.

Exemplo de imagem de minimal patriot gerado por media.io

21) Festival Badge

HEX: #E01E37 #1F7A8C #022B3A #E1E5F2 #FF9F1C

Clima:festivo, artesanal, animado

Melhor para:crachás de eventos e pacotes de adesivos

Festivo e artesanal como pins de esmalte em jaqueta jeans, a paleta transmite animação e colecionismo. O azul petróleo traz um frescor que evita que o vermelho fique demasiado clássico. Use o laranja como detalhe mínimo em estrelas, bordas ou etiquetas exclusivas. Dica de uso: mantenha os contornos dos crachás em azul-marinho profundo para manter a legibilidade em papéis adesivos claros.

Exemplo de imagem de festival badge gerado por media.io

22) Ceramic Coast

HEX: #D7263D #1B3A57 #4EA8DE #F4F1DE #9A8C98

Clima:artístico, praiano, suavemente moderno

Melhor para:branding de decoração para casa e embalagens de produtos

Artístico e praiano como cerâmica vitrificada na prateleira ensolarada, os tons transmitem modernidade suave. Use o creme como base de embalagem, depois equilibre tipografia azul-marinho escura com padrões em azul-claro. Um toque controlado de vermelho deixa logos e lacres com aspecto artesanal, nunca corporativo. Dica de uso: mantenha o padrão em uma escala para o detalhe vermelho não se perder entre motivos muito complexos.

Exemplo de imagem de ceramic coast gerado por media.io

23) Code and Cherry

HEX: #F43F5E #2563EB #111827 #F3F4F6 #A1A1AA

Clima:tecnológico, amigável, energético

Melhor para:ferramentas de desenvolvedor, UI e sites de documentação

Tecnológico e amigável como um código limpo com um destaque cereja, este conjunto transmite energia sem ser barulhento. Use azul para links e botões principais, depois adicione vermelho para notificações e estados críticos. Os tons de cinza criam uma base de leitura tranquila para documentações longas e tabelas. Dica de uso: mantenha blocos de código em cinza claro com texto escuro, para que os destaques sigam sendo significativos.

Exemplo de imagem de código e cereja gerado usando media.io

24) Cartaz de Show Aéreo

HEX: #D00000 #1D4ED8 #0A122A #F8FAFC #94A3B8

Clima:dinâmico, ousado, com tema de céu

Melhor para:cartazes de aviação e banners promocionais

Dinâmico e ousado como jatos cortando um céu claro, a paleta transmite velocidade e decisão. Use o fundo claro para dar respiro, depois sobreponha azul marinho para títulos fortes e azul para linhas de movimento ou formas. Um único destaque em vermelho faz os detalhes importantes se sobressaírem, especialmente datas e informações de ingressos. Dica: limite a paleta a duas cores dominantes por layout para manter a tipografia sob controle.

Exemplo de imagem de cartaz de show aéreo gerado usando media.io

25) Lanterna da Biblioteca

HEX: #B91C1C #1E40AF #0F172A #FAFAF9 #D6D3D1

Clima:acadêmico, acolhedor, confiável

Melhor para:branding educacional e páginas de cursos

Acadêmico e acolhedor como o brilho de uma lanterna numa biblioteca silenciosa, estes tons transmitem confiança e foco. Use azul marinho para cabeçalhos e navegação, criando uma estrutura estável, e adicione vermelho para destacar botões de inscrição ou prazos importantes. Branco suave e cinza pedra tornam a leitura de páginas longas mais confortável. Dica: aplique o vermelho de destaque consistentemente para apenas um tipo de ação, evitando sinais mistos.

Exemplo de imagem de lanterna de biblioteca gerada usando media.io

Quais cores combinam com vermelho e azul?

Os tons neutros são as combinações mais fáceis para vermelho e azul: brancos nítidos, brancos suaves e cinzas frios reduzem o ruído visual e mantêm a paleta legível. Para layouts escuros, tons quase pretos e carvão ajudam os destaques em vermelho/azul a parecerem intencionais, e não agressivos.

Destaques quentes como amarelo, laranja ou coral podem dar um “toque” e ajudar a separar camadas de informação—especialmente em cartazes, menus e selos de destaque. Mantenha os destaques quentes discretos para não competir com a paleta principal de vermelho e azul.

Verdes (especialmente teal, menta e floresta) funcionam bem quando você busca um visual fresco, equilibrado ou precisa de cores de status na UI (sucesso vs. destrutivo). Use verde como coadjuvante e conte também com formas/ícones, não apenas cor.

Como usar uma paleta vermelho e azul em designs reais

Comece com funções, não só amostras: escolha um azul para superfícies principais/links, um vermelho para momentos de destaque (CTA, promoção, alerta) e complete com neutros para espaçamento e tipografia. Isso torna seu esquema vermelho-azul escalável entre telas.

Controle a intensidade evitando “brilhante em brilhante”. Se vermelho e azul forem saturados, coloque-os sobre blocos escuros/neutros ou separe com espaços em branco para não vibrarem visualmente—especialmente no mobile.

Para texto legível, mantenha o corpo em fundo branco suave ou cinza claro e reserve vermelho/azul saturado para títulos, tags e botões. Sempre teste o contraste para textos pequenos e ícones finos na UI.

Crie visuais com paletas vermelho e azul usando IA

Se você já tem códigos HEX preferidos, a maneira mais rápida de validar o visual é gerar mockups realistas—cartazes, telas de UI, embalagens e templates sociais—antes de partir para a produção.

Com o Media.io, você pode transformar um prompt curto em visuais alinhados à marca e iterar rapidamente ajustando palavras-chave de estilo (minimalista, vintage, editorial, neon), mantendo a mesma base vermelha e azul.

Gere múltiplas variações por paleta (modo claro, escuro, alto contraste) para encontrar a composição mais legível para seu público e plataforma.

Próximo: Paleta de Cores de Ilha