20 Paletas de Cores Amarelo e Azul: Códigos Hex e Dicas de Design

Uma paleta de cores amarelo-azul é uma das maneiras mais fáceis de obter um contraste instantâneo que ainda se sente amigável. O amarelo traz calor e atenção, enquanto o azul adiciona estrutura calma e confiança.

Abaixo estão 20 novas ideias de paleta amarela e azul (com códigos hexagonais) que você pode usar para branding, interface do usuário, pôsteres, embalagens e impressão — além de dicas rápidas para legibilidade e acessibilidade.

Por que as paletas amarelas e azuis funcionam tão bem

Amarelo e azul naturalmente se equilibram: o amarelo se sente enérgico e otimista, enquanto o azul se sente estável e confiável. Juntos, eles criam uma hierarquia visual clara-perfeita para projetos que precisam de amizade e estrutura.

Do ponto de vista da usabilidade, muitas combinações amarelo/azul proporcionam forte separação entre sotaques e fundações. Isso torna mais fácil destacar chamadas à ação, rótulos e estados importantes da UI sem sobrecarregar a página.

Em impressão e branding, esta dupla também é flexível: pode ler costeira e casual, premium e náutico, ou moderno e avançado em tecnologia, dependendo das escolhas de tons e neutros que você adicionar.

20+ ideias de paleta de cores amarelo azul (com códigos hexagonais)

1) Porto ensolarado

hexagonal:#FFD166#0B4F6C#1B98E0#F6F7EB#2E2D4D

humor:Costeiro, otimista, nítido

Melhor para:banner do herói do site de viagem

Litoral e otimista, parece a luz do sol em um cais com água profunda ao longe. Use o amarelo brilhante para chamadas à ação e mantenha a marinha mais escura para manchetes para travar em legibilidade. Emparelhe-o com muito espaço branco e cores neutras de luz para evitar ruído visual. Dica: reserve o azul vívido para estados de pavimento para que a interface ainda se sinta calma.

Exemplo de imagem de sunlit harbor 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) Denim de limão

hexagonal:#FFE66D#2B59C3#1E2A78#F7F3E3#3A3A3A

humor:casual, Jovem, Confiante

Melhor para:lookbook da marca de streetwear

Casual e jovem, traz à mente camisetas desbotadas pelo sol com jeans escuro e costuras limpas. Essas combinações de cores amarelo-azul funcionam bem para tipos ousados, crachás e contas de preço sem se sentir muito barulhento. Equilibra o contraste com fundos brancos e texto a carvão para um acabamento mais editorial. Dica: Mantenha o amarelo em elementos menores para que os azuis profundos permaneçam no controle.

Exemplo de imagem de lemon denim gerado usando media.io

3) Cartão postal da Riviera

hexagonal:#FFC857#3A86FF#023047#E5F4FF#FFFAE1

humor:Ensolarado, retro, breezy

Melhor para:Folheto para eventos de verão

Ensolarado e um pouco retrô, evoca céus de cartões postais, guarda-sóis de praia e selos de viagem ousados. O azul claro funciona como um pano de fundo arejado, enquanto o azul marinho dá à sua tipografia uma âncora confiante. Emparelhe com formas geométricas simples e uma única fonte de exibição para mantê-lo lúdico, não ocupado. Dica: Adicione uma borda fina azul marinho para enquadrar o panfleto e melhorar a legibilidade.

Exemplo de imagem de cartão postal riviera gerado usando media.io

4) Céu da Hora Dourada

hexagonal:#FFB703#219EBC#8ECAE6#FBF8CC#2B2D42

humor:Quente, arejado, edificante

Melhor para:UI do aplicativo de bem-estar

Quente e arejado, parece a luz do final da tarde a deriva em um céu claro. Use os azuis pálidos para painéis e cartas, em seguida, puxe o tom dourado para anéis de progresso e ações-chave. Combine-o com ícones de linha simples e espaçamento generoso para uma experiência calmante. Dica: Mantenha o texto do corpo na sombra de carvão para atender às necessidades de contraste em superfícies azuis claras.

Exemplo de imagem de golden hour sky gerado usando media.io

5) Citrus náutico

hexagonal:#F9C74F#003049#669BBC#FDF0D5#2F3E46

humor:Clássico, Marítimo, Aterrado

Melhor para:design de cardápio de restaurante

Clássico e marítimo, sugere detalhes de latão, aventais azul marinho e enfeites cítricos no bar. O neutro cremoso mantém a página com uma sensação premium, enquanto o amarelo destaca especiais e títulos de seções. Emparelhe-o com cabeçalhos serifes e linhas divisórias mínimas para um menu polido. Dica: Limite o azul médio a pequenos ícones ou balas para que a Marinha permaneça a âncora principal.

Exemplo de imagem de citrus nautical gerado usando media.io

6) Projeto de Buttercup

hexagonal:#FDE74C#1D4E89#0B132B#EAF2FF#5BC0BE

humor:Energético, técnico, moderno

Melhor para:Página de destino SaaS

Energético e técnico, parece notas adesivas brilhantes sobre uma grade de projeto. Esta paleta de cores amarelo-azul é ideal para chamadas de recursos, ícones e crachás de confiança onde você deseja clareza rápida. Combine-o com brancos frescos e sombras sutis para uma sensação liderada pelo produto. Dica: use o azul com moderação como sotaque secundário para que o contraste primário permaneça consistente.

Exemplo de imagem de blueprint de buttercup gerado usando media.io

7) Surf de açafrão

hexagonal:#F6BD60#2D6CDF#00A6FB#F7EDE2#1B1B3A

humor:Esportivo, brilhante, otimista

Melhor para:Cartaz de esportes

Esportivo e otimista, traz a energia de pranchas de surf, camisas e areia aquecida pelo sol. Os azuis elétricos dão movimento e impacto, enquanto o açafrão quente mantém o visual amigável. Emparelhe com formatos condensados em negrito e formas de alto contraste para legibilidade instantânea a distância. Dica: Defina o fundo em branco e deixe o índigo mais escuro lidar com todo o texto pequeno.

Exemplo de imagem de saffron surf gerado usando media.io

8) tinta de canário

hexagonal:#FFEA00#1F2A44#3E5C76#F8F9FA#0D1321

humor:Alto contraste, editorial, Elegante

Melhor para:Modelo de newsletter de notícias

De alto contraste e editorial, parece um marcador brilhante em uma página de tinta escura. Use o tom canário para etiquetas, etiquetas de quebra e links chave para que a digitalização permaneça fácil. Emparelhe com o tipo sans-serif limpo e espaçamento rigoroso para manter o layout nítido. Dica: evite grandes blocos amarelos; Um pequeno sotaque é suficiente para guiar a atenção.

Exemplo de imagem de tinta canária gerada usando media.io

9) Ardósia de narciso

hexagonal:#FFD500#4A6FA5#166088#E8EDF2#3A3F44

humor:Prático, calmo, confiável

Melhor para:deck de Apresentação Corporativa

Prático e calmo, sugere um espaço de trabalho confiante com um toque de otimismo. Os tons de ardósia mantêm gráficos e tabelas fáceis de ler, enquanto o sotaque de narciso destaca os takeaways. Combine-o com visualizações de dados simples e iconografia restrita para um deck polido. Dica: use o cinza mais escuro para a cópia do corpo e reserve o azul para cabeçalhos e séries de gráficos.

Exemplo de imagem de daffodil slate gerado usando media.io

10) Manga Cobalto Pop

hexagonal:#FFBE0B#3F37C9#4361EE#F3F0FF#1B263B

humor:Ousado, brincalhão, de alto impacto

Melhor para:Anúncio de lançamento do produto

Ousado e brincalhão, parece uma sinalização de neon contra um céu noturno. Combinações de cores amarelas e azuis como estas são ótimas para anúncios de lançamento onde você precisa de contraste imediato e uma borda moderna. Emparelhe com grandes tipos, formas simples e muito espaço negativo para que as cores façam a fala. Dica: Mantenha as sombras sutis e confie na marinha profunda para estrutura.

Exemplo de imagem de mango cobalt pop gerado usando media.io

11) areia quente e mar

hexagonal:#F4D35E#2E86AB#0A2342#FFFBEA#7A7A7A

humor:Descontraído, natural, Convidativo

Melhor para:branding de hotéis boutique

Descontraído e convidativo, lembra areia iluminada pelo sol, vidro do mar e águas profundas da noite. O amarelo quente se lê como hospitalidade e boas-vindas, enquanto o azul marinho adiciona um tom premium para logotipos e papelaria. Combine-o com papel texturizado ou grãos sutis para se inclinar na sensação de boutique. Dica: use o cinza para cópia secundária para que a paleta permaneça macia e equilibrada.

Exemplo de imagem de areia quente e mar gerado usando media.io

12) Ônibus escolar e Oxford

hexagonal:#FFD60A#001D3D#003566#E9ECEF#212529

humor:Autoritário, esportivo, atemporal

Melhor para:Pôster do Clube Universitário

Autoritário e atemporal, ele canaliza banners de universidades e sinalização nítida do campus. A forte marinha faz com que os títulos pareçam oficiais, enquanto o amarelo brilhante aumenta a visibilidade para datas e locais. Emparelhe com fontes bloqueadas sans-serif e uma grade simples para um layout confiante. Dica: Evite linhas finas em amarelo; use traços mais grossos para que ele permaneça legível de longe.

Exemplo de imagem de school bus & oxford gerado usando media.io

13) Ceruleano com mel

hexagonal:#FFC145#2D9CDB#1B4F72#FDF6E3#2C3E50

humor:Amigável, brilhante, polido

Melhor para:Página da categoria de comércio eletrônico

Amigável e polido, sente-se como chover de mel sobre cerâmica limpa com um respiro brilhante do céu. O cerulean é perfeito para links, filtros e estados de navegação, enquanto o tom de mel chama a atenção para ofertas. Combine-o com fundos quentes e brancos para manter as fotos do produto parecendo naturais. Dica: use o azul profundo para o texto de preço para manter o contraste em seções pálidas.

Exemplo de imagem de ceruleano de mel gerado usando media.io

14) Piquenique Pastel

hexagonal:#FFF3B0#A9D6E5#2C7DA0#FAFAFA#6C757D

humor:Suave, arejado, acessível

Melhor para:Convite para chuveiro de bebê

Suave e arejado, evoca um cobertor de piquenique, céu claro e sol suave da tarde. Use o amarelo pastel para bordas e pequenos motivos, em seguida, apoie-se no azul médio para nomes e detalhes principais. Pair com arte de linha delicada e tipografia arredondado para um tom quente e acolhedor. Dica: Mantenha o cinza para informações secundárias para que o texto principal permaneça nítido.

Exemplo de imagem de pastel piquenique gerado usando media.io

15) Tecnologia Solar

hexagonal:#FFE45E#00509D#003F88#F5F7FF#2D3142

humor:Limpo, futurista, confiante

Melhor para:UI do aplicativo móvel fintech

Limpo e futurista, traz à mente luzes de status brilhantes contra um painel de controle profundo. Uma paleta de cores amarelo-azul como esta se adapta a telas fintech onde a clareza e a confiança são importantes. Combine-o com brancos frescos, divisores finos e pesos de ícones consistentes para um sistema arrumado. Dica: use o amarelo apenas para estados de sucesso e ações primárias para manter a UI disciplinada.

Exemplo de imagem de tecnologia solar gerada usando media.io

16) Porcelana de girassol

hexagonal:#FFDD57#4D96FF#1E3A8A#FFFDF7#374151

humor:Fresco, arrumado, moderno-clássico

Melhor para:Embalagem de utensílios de cozinha

Fresco e arrumado, parece girassóis brilhantes ao lado de porcelana brilhante. Use o branco e o amarelo suave para limpar o espaço de embalagem e traga os azuis mais fortes para rótulos e nomes de produtos. Emparelhe com padrões mínimos e hierarquia clara para que leia premium, não ocupado. Dica: Mantenha códigos de barras e texto legal em cinza escuro para evitar blocos de contraste ásperos.

Exemplo de imagem de porcelana girassol gerada usando media.io

17) Misty Marina

hexagonal:#FEEA5A#5BC0EB#145DA0#E6F6FF#22333B

humor:Fresco, Aragado, Refrescante

Melhor para:Brochura do Clube de Vela

Fresco e arejado, sugere névoa no início da manhã sobre docas e água clara além. O azul pálido é ideal para painéis de folhetos grandes, enquanto o azul mais profundo mantém as manchetes e legendas legíveis. Combine-o com muitos espaços em branco e ícones náuticos simples para uma leitura fácil. Dica: use o amarelo como sinal de navegação para seções e números de página.

Exemplo de imagem de misty marina gerado usando media.io

18) Retro Primário Punch

hexagonal:#FFD23F#2E55FF#0A1F44#FFFCF2#E76F51

humor:retro, punchy, Brincalhão

Melhor para:Pôster de festival de música

Retro e perfurador, parece cartazes serigrafados e neon noturno. Amarelo azul combinações de cores brilham aqui quando você quer hierarquia alta e rápida identificação de estágios e tempos. Pair com tipo grosso, texturas de meio tom e um conjunto limitado de formas para mantê-lo coeso. Dica: use o laranja como um terceiro sotaque apenas para headliners para que ele permaneça especial.

Exemplo de imagem de retro primary punch gerado usando media.io

19) Raio de sol da hora azul

hexagonal:#FFCC33#1D3557#457B9D#A8DADC#F1FAEE

humor:Cinematográfico, calmo, atencioso

Melhor para:design de capa de livro

Cinematográfica e calma, evoca o momento logo após o pôr do sol, quando um último feixe quente atravessa o ar fresco. Use o azul profundo para o título e o nome do autor, em seguida, adicione o amarelo como um pequeno elemento focal ou emblema. Combine com gradientes suaves e ilustração discreta para uma sensação literária. Dica: Mantenha a menta clara para o espaço de fundo para que a capa não pareça pesada.

Exemplo de imagem de raio solar de hora azul gerado usando media.io

20) Costeira mínima

hexagonal:#F7D154#0F4C81#3B82F6#FFFFFF#111827

humor:Minimalista, moderno, brilhante

Melhor para:Logotipo de startup e kit de marca

Minimalista e moderno, parece um estúdio branco limpo com um respiro afiado de sol e mar. O azul marinho e quase preto fornecem uma base sólida para logotipos, enquanto o azul mais brilhante pode alimentar links e ativos sociais. Combine com marcas geométricas e muito espaço livre para uma identidade confiante e escalável. Dica: Teste o amarelo em pequenos tamanhos para garantir que ele permaneça distinto do branco.

Exemplo de imagem de coastal minimal gerado usando media.io

Quais cores combinam bem com o azul amarelo?

As cores neutras são a terceira cor mais fácil: branco, creme e cinza claro mantêm o amarelo e o azul limpos, enquanto o carvão ou quase preto melhora o contraste do texto em azuis pálidos e amarelos quentes.

Para um visual mais rico, adicione azul marinho profundo ou índigo como uma cor de "estrutura" e, em seguida, use o amarelo como o sotaque. Essa abordagem é comum no design da UI porque mantém os CTAs brilhantes sem tornar toda a interface barulhenta.

Se você quer personalidade extra, pequenos hits de coral/laranja, azul ou hortelã podem funcionar bem-apenas mantê-los limitados para que o relacionamento amarelo-azul permaneça a estrela.

Como usar uma paleta de cores amarelo-azul em desenhos reais

Comece atribuindo funções: escolha um azul como base primária (cabeçalhos, navegação, texto do corpo) e reserve o amarelo para momentos de atenção (botões, crachás, números de chave). Isso evita que o amarelo sobreponha o layout.

Para acessibilidade, evite texto amarelo em fundos brancos ou claros. Em vez disso, use amarelo como fundo ou realce com texto escuro na parte superior e teste pares de teclas para garantir que seu texto pequeno atenda às diretrizes de contraste.

Na impressão, observe a saturação: os amarelos brilhantes podem mudar dependendo do papel e da tinta. Use um azul marinho ligeiramente mais profundo para o tipo e considere brancos quentes para manter a paleta sem sentir frio.

Crie visuais de paleta amarela e azul com IA

Se você está apresentando um conceito de marca ou construindo um moodboard, gerar visuais rápidos ajuda você a validar a paleta antes de se comprometer com um sistema de design completo. Também é uma maneira fácil de testar como o amarelo se lê em pequenos tamanhos e como o azul se comporta em grandes fundos.

Com o Media.io, você pode transformar uma ideia de paleta em pôsteres, maquetes de interface do usuário, embalagens ou banners de heróis em minutos — e depois repetir o estilo, a iluminação e o layout, mantendo a mesma direção de cores.

Próximo: Paleta de Cores Verde e Roxo