20 Paletas de Cores Yellow Teal com Códigos Hexa para Inspiração

Uma paleta de cores amarelo e verde-água é uma das maneiras mais fáceis de equilibrar calor e frescor em um único visual. O amarelo traz otimismo e destaque, enquanto o verde-água adiciona profundidade, confiança e um toque moderno e limpo.

Seja para construir uma interface, criar embalagens ou montar materiais impressos, o amarelo e o verde-água podem transmitir uma sensação praiana, retrô, luxuosa ou minimalista dependendo dos tons neutros de apoio e das escolhas de contraste.

Por que as paletas amarelo e verde-água funcionam tão bem

Amarelo e verde-água ficam num ponto ideal de contraste: o amarelo naturalmente chama atenção, enquanto o verde-água transmite estabilidade e controle. Juntos, criam uma hierarquia visual clara — perfeito para títulos, botões e informações importantes.

Essa dupla também se adapta a vários estilos. Com brancos e cinzas fica moderno e tecnológico; com cremes e marrons se torna artesanal e retrô; com azul-marinho escuro pode parecer sofisticado e dramático.

O mais importante: as combinações de amarelo com verde-água são flexíveis e acessíveis. Se o texto principal for colocado em tons neutros escuros e o amarelo for reservado para destaques, a paleta será vibrante e, ao mesmo tempo, legível na tela e no impresso.

20+ ideias de paletas amarelo e verde-água (com códigos HEX)

1) Lagoa Iluminada pelo Sol

HEX: #F9D65C #18A1A6 #0B4F6C #F3F5F7 #2D2A32

Sensação: fresca, limpa, à beira-mar

Melhor para: página inicial de marca de viagem (UI)

Fresca e leve como a luz do meio-dia sobre águas rasas, essas tonalidades transmitem otimismo e nitidez. Use o amarelo vibrante para chamadas de ação e o verde-água para navegação e títulos. Combine com bastante espaço branco e texto escuro para garantir legibilidade. Dica: reserve o azul-verde mais profundo para estados ativos, mantendo a interface calma e não ruidosa.

Exemplo de imagem da lagoa iluminada pelo sol gerada com media.io

Media.io

Media.io é um estúdio online de IA para criação e edição de vídeo, imagem e áudio no seu navegador.

Experimente grátis agora

2) Maré Cítrica

HEX: #FFD84D #00B8B0 #006D77 #F7EFE5 #1F2933

Sensação: cítrica, moderna, energética

Melhor para: telas de onboarding de aplicativo (UI)

Vibrante e animada, traz o toque cítrico sobre tons oceânicos frescos. Deixe o amarelo destacar passos e ícones importantes, enquanto o verde-água serve de base para painéis e progresso. O off-white mantém as telas acolhedoras e reduz o brilho. Dica: mantenha o texto principal no cinza escuro para que os destaques amarelos continuem especiais.

Exemplo de imagem da maré cítrica gerada com media.io

3) Cabana Retrô

HEX: #F6C445 #2AB7A9 #1E6F7A #FFFAF0 #8A5A44

Sensação: retrô, divertida, ensolarada

Melhor para: design de pôster para evento de verão

Divertida e nostálgica, lembra cadeiras listradas de cabana e óculos de sol vintage. Use o amarelo quente para blocos de títulos e o verde-água para formas grandes ou bordas. O branco cremoso mantém o ar fresco, e um toque de marrom traz o clima retrô ao impresso. Dica: utilize padrões geométricos simples para que a paleta conte a história.

Exemplo de imagem da cabana retrô gerada com media.io

4) Oásis do Deserto

HEX: #EFCB68 #1FB6AA #0E5E6F #E9E3D5 #3B3A36

Sensação: terrosa, quente, calmante

Melhor para: layout de folder para spa

Enraizada e relaxante, evoca a areia aquecida pelo sol e água fresca de piscina. O amarelo suave funciona como tom de fundo, enquanto o verde-água dá destaque sereno aos títulos das seções. Combine com texturas naturais como papel linho e ícones minimalistas. Dica: para o texto principal, use o cinza carvão para garantir alto contraste.

Exemplo de imagem do oásis do deserto gerada com media.io

5) Mostarda com Menta

HEX: #D8B23A #35C6B2 #147A78 #F2F2F2 #2B2D42

Sensação: inteligente, jovial, tecnológica

Melhor para: UI de dashboard SaaS

Inteligente e marcante, lembra gráficos limpos com personalidade. Use verde-água para áreas principais da interface e amarelo-mostarda para alertas, destaques e métricas essenciais. Cinza claro mantém o dashboard neutro e profissional. Dica: aplique amarelo com moderação para sinalizar prioridade, não para ser ruído constante.

Exemplo de imagem da mostarda com menta gerada com media.io

6) Surf de Festival

HEX: #FFE066 #00C2B3 #007C91 #0B1320 #F8F3E7

Sensação: ousada, vibrante, alto contraste

Melhor para: gráfico de ingresso de festival de música

Ousada e elétrica, lembra pulseiras neon sob noite escura. Use amarelo vivo para preços e datas, deixando o verde-água para formas e divisores de apoio. O quase preto traz drama e faz os destaques saltarem. Dica: mantenha a tipografia espessa e simples para máxima legibilidade em tamanhos pequenos.

Exemplo de imagem do surf de festival gerada com media.io

7) Porto Nórdico

HEX: #F2D96B #4CB7A5 #2D6A78 #E8EEF2 #243B4A

Sensação: fria, minimalista, refinada

Melhor para: página de diretrizes de marca

Fria e organizada, faz lembrar um porto tranquilo sob luz tênue. Use o cinza-azulado suave como base, depois aplique verde-água para blocos e navegação da marca. O amarelo funciona melhor como destaque secundário para chamadas e ícones. Dica: combine com tipografia sans-serif limpa e margens generosas para um toque escandinavo.

Exemplo de imagem do porto nórdico gerada com media.io

8) Toque Divertido

HEX: #FFDA57 #19B7B0 #0E7C86 #FFFFFF #FF6B6B

Sensação: divertida, jovial, animada

Melhor para: UI de aplicativo educativo infantil

Alegre e energética, lembra adesivos, cartões e pôsteres coloridos de sala de aula. O verde-água mantém a interface estável, enquanto o amarelo e o coral trazem energia amigável para botões e recompensas. Espaço em branco ajuda a manter a legibilidade para crianças. Dica: use o coral só para celebrações, evitando competir com ações principais.

Exemplo de imagem do toque divertido gerada com media.io

9) Terraço Botânico

HEX: #F4D35E #2EC4B6 #1B7F79 #F6F7EB #3D405B

Sensação: fresca, cheia de plantas, iluminada pelo sol

Melhor para: conjunto de ilustrações botânicas de primavera

Fresco e ensolarado, evoca novas folhas, jardineiras pintadas e luz quente da tarde. A gama azul lê-se lindamente para caules e sombras, enquanto o amarelo adiciona centros de flores suaves e destaques. Emparelhe com textura de papel macio e bordas de aquarela soltas. Dica: Mantenha o fundo branco para que os verdes e amarelos permaneçam naturais.

Exemplo de imagem de terraço botânico gerado usando media.io

10) Pátio de meio do século

HEX:#E7C24F#3AB7B0#2B6777#F3EFEA#C65D39

Sensação:midcentury, Quente, Curado

Melhor para:home Decoração moodboard

Curado e aconchegante, lembra azulejos de meados do século, móveis de teca e uma porta de pátio ensolarada. O azul funciona bem para superfícies grandes, como paredes ou blocos, enquanto os sotaques amarelos e argila trazem calor. Combine com materiais naturais como madeira, rattan e cerâmica fosca. Dica: Repita o tom de argila em pequenas doses para amarrar o visual.

Exemplo de imagem de midcentury patio gerado usando media.io

11) Mercado costeiro

HEX:#FFE08A#25B7B1#0F6674#F9F6F0#5A3E2B

Sensação:acolhedor, artesanal, brilhante

Melhor para:Folheto do Mercado dos Agricultores

Acolhedor e feito à mão, parece sinais pintados, frutas frescas e ar marinho. Use o amarelo pálido como base quente e, em seguida, adicione azul para cabeçalhos e setas direcionais. O marrom lê-se como papel kraft e funciona muito bem para textos pequenos e bordas. Dica: Adicione ícones simples desenhados à mão para se inclinar na vibração artesanal.

Exemplo de imagem de mercado costeiro gerado usando media.io

12) veludo azul ouro

HEX:#F2C14E#0FB9B1#0B7285#102A43#EAE2B7

Sensação:Luxo, moody, Dramático

Melhor para:design de menu de bar de coquetel

Luxuoso e temperamental, sugere cabines de veludo, detalhes de latão e iluminação azul baixa. Use o azul marinho profundo como fundo principal e, em seguida, traga amarelo dourado para os destaques do menu e preços. Teal adiciona um sotaque refinado para divisores e ícones. Dica: Escolha um serif de alto contraste para cabeçalhos para que a base escura permaneça elegante, não pesada.

Exemplo de imagem de teal velvet gold gerado usando media.io

13) Baía de berçaria macia

HEX:#F7DE7A#5ED6C4#2E9C98#FFF7EE#6D6875

Sensação:Suave, suave, reconfortante

Melhor para:Convite para chuveiro de bebê

Suave e confortável, sente-se como o sol através das cortinas e um calmo cochilo da tarde. O amarelo pastel e azul-aquático sentam-se agradavelmente em papel creme quente sem se sentir excessivamente doce. Pair com tipografia arredondado e ilustrações de linha simples. Dica: Mantenha o texto em cinza-amarelo silenciado para um acabamento suave e legível.

Exemplo de imagem de soft nursery bay gerado usando media.io

14) Azulejos de Café

HEX:#F1CF4A#22B8A8#1B5E6A#FAF3E0#3D2C2E

Sensação:Acolhedor, editorial, Artesanal

Melhor para:design de embalagem de café

Confortável e artesanal, traz à mente azulejos estampados, doces cítricos e uma xícara de café expresso azul. Use o creme como base principal do rótulo e, em seguida, coloque blocos azul para informações sobre o nome da marca e a origem. O amarelo funciona bem para notas de assado ou pequenos crachás. Dica: Adicione um padrão geométrico sutil no tom mais escuro para um visual de café premium.

Exemplo de imagem de café tilework gerado usando media.io

15) Destaque do estúdio

HEX:#FFD24A#00B4A6#005B66#F5F7FA#111827

Sensação:Limpo, confiante, profissional

Melhor para:UI da seção de heróis da agência criativa

Limpo e confiante, parece um estúdio brilhante com sombras nítidas e tipografia nítida. Faça do azul a cor dominante da marca para cabeçalhos e links, em seguida, use o amarelo para uma única ação de destaque. O cinza claro mantém a página moderna e reduz a fadiga do contraste. Dica: Combine com tipografia negra ousada e iconografia simples para uma primeira impressão polida.

Exemplo de imagem de studio highlight gerado usando media.io

16) Pop de dia chuvoso

HEX:#FFE169#2EC4B6#2B6F7E#D9E2EC#334E68

Sensação:Alegre, equilibrado, cotidiano

Melhor para:UI do aplicativo weather

Alegre mas equilibrado, é como um guarda-chuva brilhante em um dia cinzento e chuvoso. Use os cinzas frios para fundos e cartas, em seguida, traga azul para os controles primários. O amarelo funciona perfeitamente como um destaque para estados ensolarados e notificações-chave. Dica: Mantenha os preenchimentos de ícones consistentes para que as cores de sotaque sejam lidas claramente à primeira vista.

Exemplo de imagem de rainy day pop gerado usando media.io

17) Papelaria Tropical

HEX:#F9D34A#27C3AE#0E7A7C#FFFDF7#FF8C61

Sensação:Brilhante, amigável, criativo

Melhor para:Conjunto de papelaria mockup

Luminoso e amigável, ele canaliza cartões postais tropicais e sinalização limpa do resort. O azul mantém o layout unido em cabeçalhos, enquanto o amarelo e o coral adicionam carimbos alegres, bordas ou pequenos motivos. Mantenha a base quase branca para que as peças impressas permaneçam nítidas. Dica: Escolha papel não revestido no maquete para suavizar os sotaques ousados.

Exemplo de imagem de artigos de papelaria tropicais gerados usando media.io

18) Etiqueta do museu

HEX:#E9C95B#2AB3A6#1F5F6B#F0F4F8#2D3142

Sensação:Tranquilo, informativo, refinado

Melhor para:layout do catálogo da exposição

Tranquilo e refinado, parece uma galeria bem iluminada com etiquetas cuidadosamente impressas. Use o fundo de ardósia pálida para a sala de respiração e, em seguida, defina azul como a cor do sistema para cabeçalhos e legendas. O amarelo é melhor para chamadas sutis, como marcas de edição ou guias de seção. Dica: alinhe tudo para uma grade rigorosa para manter o layout museu-limpo.

Exemplo de imagem de etiqueta de museu gerada usando media.io

19) Energia esportiva

HEX:#FFD000#00BFAE#00707A#0B132B#F1F5F9

Sensação:Rápido, robusto, competitivo

Melhor para:banner promocional de esportes

Rápido e forte, parece luzes de estádio refletindo um campo azul. Use o amarelo para o título principal e os destaques da pontuação, enquanto o azul suporta texto secundário e listras gráficas. O azul marinho escuro adiciona intensidade e mantém os sotaques brilhantes nítidos. Dica: Adicione formas diagonais e espaçamento apertado para amplificar o senso de movimento.

Imagem Exemplo de energia esportiva gerada usando media.io

20) Coquetel da noite

HEX:#F6C85F#1BB6AF#0D5C63#1F1B24#F7F1E3

Sensação:Sofisticado, íntimo, chique

Melhor para:design de etiqueta de gin premium

Sofisticado e íntimo, evoca a luz de velas, casca de cítricos e um copo azul fresco. Para embalagens premium, deixe o quase preto carregar a maior parte do rótulo e use azul para linhas decorativas ou selos. O amarelo lê-se como um sotaque metálico quente para pequenos momentos tipográficos. Dica: Estas combinações de cores azul amarelo parecem melhor com layout restrito e muito espaço negativo.

Exemplo de imagem de coquetel da noite gerado usando media.io

21) Alga dourada

HEX:#F2D15C#20B7A8#0A7B83#E6F2F0#124559

Sensação:Oceânico, natural, Restaurador

Melhor para:Anúncio de Produto para Cuidados com a Pele

Oceânica e restauradora, traz à mente florestas de algas com raios de sol cortando a água. Use a água pálida como um pano de fundo limpo e, em seguida, adicione azul para reivindicações e estrutura do produto. O amarelo funciona melhor como um destaque quente em crachás como novos ou ricos em vitaminas. Dica: Em uma paleta de cores azul amarelo como esta, mantenha os gradientes sutis para que ainda pareça botânico e calmo.

Exemplo de imagem de alga dourada gerada usando media.io

Que cores combinam com amarelo e verde-água?

As cores neutras são a combinação mais fácil: branco, branco, cinza claro, carvão e quase preto ajudam o amarelo a permanecer brilhante e o azul a permanecer nítido. Eles também tornam a tipografia mais legível, especialmente em layouts de interface do usuário.

Para mais calor, adicione argila, terracota, ferrugem ou marrom quente para empurrar a paleta em direção a vibrações retrô ou artesanais. Para uma direção mais fresca, introduza espuma do mar, hortelã e água pálida-apenas mantenha um azul como âncora para evitar "muitos verdes".

Se você quiser um pop mais ousado, coral ou vermelho suave pode funcionar como um terceiro sotaque, mas use-o com moderação. Com o amarelo já atuando como um destaque, seu design geralmente precisa de apenas uma cor "faísca" adicional.

Como usar uma paleta de amarelo e verde-água em projetos reais

Comece por decidir qual cor é dominante. Na maioria dos layouts modernos, o azul funciona melhor como a cor primária da marca/sistema (navegação, cabeçalhos, componentes da interface do usuário), enquanto o amarelo se torna o sotaque para CTAs, crachás e pontos de dados principais.

Controle o contraste com os neutros de apoio. Se o seu azul for escuro, combine-o com fundos brancos; Se o seu amarelo for brilhante, mantenha-o longe de blocos de texto longos e use ardósia/carvão escuro para a cópia do corpo.

Para impressão, considere o tom do papel e a cobertura da tinta. O caldo cremoso pode suavizar os amarelos brilhantes, e as bases escuras (azul marinho/quase preto) podem fazer com que o azul e o amarelo pareçam mais premium-apenas certifique-se de que o texto pequeno permaneça de alto contraste.

Crie visuais com paletas amarelo e verde-água com IA

Quando você já tiver códigos hexagonais, você pode gerar maquetes da marca mais rapidamente, descrevendo o layout e, em seguida, especificando onde o amarelo e o azul devem aparecer (botões, cabeçalhos, emblemas, divisores e fundos). Isso ajuda você a testar várias direções sem reconstruir ativos do zero.

Tente criar algumas variações: uma interface de usuário mínima, um pôster e um maquete de embalagem. Você verá rapidamente se o seu amarelo é melhor como um CTA brilhante ou um tom de fundo mais suave, e se o seu azul deve ser verde ou azul para o seu nicho.

Use a ferramenta de texto em imagem do Media.io para transformar sua paleta em visuais consistentes para branding, web e impressão.

Próximo: Paleta de Cores Rust