20 combinações de amarelo e cinza para usar com códigos hexadecimais

Amarelo e cinza é uma das combinações modernas mais fáceis de trabalhar: o amarelo traz energia e simpatia, enquanto o cinza adiciona estrutura, equilíbrio e um toque premium com um ar “tech-neutro”.

Abaixo estão 20 paletas de cores amarelo e cinza com códigos HEX, além de dicas práticas para UI, branding, impressão e interiores—assim você pode escolher o clima e aplicar imediatamente.

Por que Paletas de Amarelo e Cinza Funcionam Tão Bem

O amarelo naturalmente chama atenção, tornando-se perfeito para destaques—botões, selos, ícones ou pequenos detalhes decorativos. Já o cinza oferece uma base calma que não disputa com o conteúdo.

Juntos, criam uma hierarquia limpa: o cinza cuida da legibilidade e estrutura do layout, enquanto o amarelo direciona o olhar para o que é mais importante. Isso é especialmente útil no design de UI, cartazes e dashboards onde a clareza é essencial.

As paletas amarelo cinza também variam bem do minimalista ao ousado. Você pode manter tudo leve com cinzas claros e amarelos suaves ou criar alto contraste com carvão, quase preto e amarelo vibrante para máximo impacto.

20+ Ideias de Paleta de Cores Amarelo Cinza (com Códigos HEX)

1) Concreto Banhado de Sol

HEX: #F6C945 #D9D9D6 #8A8D8F #2E2F33 #FFF6E0

Clima: brilhante, moderno, sólido

Melhor para: UI de dashboard SaaS

Brilhantes e arejados como a luz da manhã refletindo nas calçadas da cidade, esses tons transmitem confiança sem exagero. Use o branco suave como tela principal, reservando o amarelo para ações-chave e destaques. Os cinzas médios mantêm tabelas e gráficos legíveis, enquanto o quase preto reforça a hierarquia visual. Dica: use amarelo apenas em pequenos elementos da UI para garantir impacto e acessibilidade.

Exemplo de imagem de concreto banhado de sol gerada com media.io

Media.io

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

Experimente Grátis Agora

2) Ardósia Mostarda

HEX: #C9A227 #6E7074 #2C2D30 #E7E2D3 #F3EFE6

Clima: rico, aconchegante, refinado

Melhor para: identidade visual para cafeteria boutique

Quente e um pouco vintage, lembra grãos tostados, café escuro e lousas de ardósia. Essa combinação de amarelo e cinza se destaca em logos, etiquetas e menus onde se busca energia artesanal com um ar premium. Combine com papéis texturizados e uma tipografia serifada simples para um clima artesanal. Dica: imprima o mostarda como ponto de destaque e deixe a ardósia liderar para leitura fácil.

Exemplo de imagem de ardósia mostarda gerada com media.io

3) Névoa de Limão

HEX: #FFE36E #F2F2F0 #B9BCC1 #5A5D63 #1F2024

Clima: suave, fresca, calma

Melhor para: telas de onboarding em app mobile

Suave e otimista, lembra chá de limão numa manhã nublada. Os neutros pálidos mantêm as telas leves, enquanto os cinzas escuros dão contraste limpo ao texto. Use o amarelo para indicadores de progresso, ícones simpáticos e microanimações. Dica: suavize o visual com componentes arredondados e espaçamento generoso.

Exemplo de imagem de névoa de limão gerada com media.io

4) Táxi no Asfalto

HEX: #FFD100 #A8AAAD #3B3D42 #121316 #F5F5F5

Clima: ousado, urbano, energético

Melhor para: cartaz para encontro de tecnologia

Impactante e urbano, remete a reflexos de neon e corridas noturnas pela cidade. Essa paleta funciona melhor com contrastes: preto para tipografia, amarelo vibrante no título e cinza para informações secundárias. Mantenha o layout minimalista para destacar as cores. Dica: coloque blocos cinza atrás dos textos menores para melhorar a legibilidade em fundos claros.

Exemplo de imagem de táxi no asfalto gerada com media.io

5) Duna Dourada

HEX: #E7B93C #CFC8B8 #9A9C9F #4A4D52 #FFF1D1

Clima: quente, relaxante, natural

Melhor para: guia de paleta para quarto aconchegante

Aconchegante e terroso, lembra dunas, linho e luz suave de tarde. Use o branco cremoso em paredes e roupas de cama, insira cinzas em tecidos e móveis para equilíbrio. O dourado é ideal para mantas, abajures ou quadros, aquecendo sem gritar. Dica: escolha acabamentos foscos para manter o clima calmo e convidativo.

Exemplo de imagem de duna dourada gerada com media.io

6) Mica Suave

HEX: #F2D06B #E5E6E8 #B3B6BB #70737A #2B2D31

Clima: limpo, delicado, premium

Melhor para: design de embalagem de skincare

Sedosa e discreta, lembra o brilho mineral e toalhas de spa. Os tons de cinza claro criam base clínica e limpa, enquanto o amarelo dá um leve brilho em destaques e lacres. Combine com tipografia sem serifa e muito espaço em branco para um ar moderno e aprovado por dermatologistas. Dica: use o tom mais escuro apenas para textos pequenos, como ingredientes e instruções.

Exemplo de imagem de mica suave gerada com media.io

7) Mel Industrial

HEX: #F5B800 #D0D2D4 #8E9196 #3A3C40 #0F1012

Clima: elegante, estruturado, confiante

Melhor para: UI de home page de e-commerce

Nítida e técnica, lembra metal polido com toque de luz dourada. Essa combinação é ideal para e-commerce que exige confiança e rapidez: cinzas neutros nos grids de produtos, quase preto para textos, e amarelo para chamadas à ação. Combine com fotos de produtos limpas e espaçamento regular para evitar poluição visual. Dica: teste hovers com amarelo mais claro para manter a interface coesa.

Exemplo de imagem de mel industrial gerada com media.io

8) Ônibus Escolar Retrô

HEX: #FFCC00 #7A7D81 #4B4E53 #1C1D20 #FFF8D8

Clima: divertido, ousado, nostálgico

Melhor para: flyer para equipe esportiva

Energética e nostálgica, sugere quadras de ginásio, ônibus escolares e uniformes clássicos. O amarelo intenso serve para nomes da equipe e datas principais, enquanto o carvão escuro deixa o layout forte e legível. Combine com tipografia robusta e ícones simples para valorizar o visual retrô. Dica: use o creme claro para dar espaço e deixar o flyer leve.

Exemplo de imagem de ônibus escolar retrô gerada com media.io

9) Névoa de Primavera

HEX: #F9D77A #E9E7E1 #BFC2C7 #6B6E75 #2E3035

Clima: romântico, leve, delicado

Melhor para: convite de casamento botânico

Leve e sonhadora, remete a flores de primavera sob um céu nublado. Use o amarelo quente como detalhe delicado para monogramas ou bordas, enquanto os neutros suaves compõem o fundo. Combine com flores em aquarela e tipografia caligráfica para manter o visual atemporal. Dica: imprima o texto cinza um tom mais escuro do que o esperado para garantir boa leitura no papel texturizado.

Exemplo de imagem de névoa primaveril gerada usando media.io

10) Citrine Graphite

HEX: #F4C83A #C9CBD0 #9EA1A8 #3C3E45 #15161A

Clima: marcante, editorial, contemporâneo

Melhor para: layout de matéria de revista

Polido e moderno, lembra impressão brilhante, lápis grafite e um destaque de citrino. Use preto e cinza escuro para títulos e frases de destaque, deixando o amarelo guiar o olhar para marcadores de seção ou dados importantes. Combine com fotografia marcante e layout em grade para manter o visual premium. Dica: limite o uso do amarelo a 5 a 10 por cento da página para não sobrecarregar o tom editorial.

Exemplo de imagem de citrine graphite gerada usando media.io

11) Harvest Steel

HEX: #DFAF2B #D8D4CA #A2A4A7 #5D6066 #2A2B2F

Clima: estável, acolhedor, profissional

Melhor para: template de apresentação em slides

Equilibrado e pronto para negócios, lembra ouro da colheita combinado com aço escovado. Use amarelo quente para divisores de seção e números-chave, enquanto os cinzas são usados para gráficos, legendas e notas de rodapé. Combine com ícones simples e espaçamento consistente para um visual confiante e executivo. Dica: mantenha os planos de fundo dos slides claros e use o cinza mais escuro apenas para títulos.

Exemplo de imagem de harvest steel gerada usando media.io

12) Urban Marigold

HEX: #FFC93C #BFC1C4 #7C7F86 #34363B #FAFAF7

Clima: animado, moderno, acessível

Melhor para: design de menu de restaurante

Animado como cravos-de-defunto contra o concreto, transmite simpatia, contemporaneidade e fácil leitura. Para paletas cinza e amarela em cardápios, use o quase preto para nomes dos pratos, cinza médio para descrições e amarelo para destacar especiais ou indicações picantes. Combine com divisões limpas de seção e bastante espaço em branco para um toque casual premium. Dica: evite texto corrido em amarelo, mantendo essa cor para rótulos e ícones pela clareza.

Exemplo de imagem de urban marigold gerada usando media.io

13) Butterstone

HEX: #F7DA7C #F4F1E8 #C6C7C9 #8A8C90 #3E4045

Clima: suave, acolhedor, familiar

Melhor para: moodboard para quarto infantil

Aconchegante e suave, remete a biscoitos de manteiga, cobertores macios e cochilos tranquilos. Use o creme claro para paredes e móveis maiores; inclua cinza em tapetes, organizadores e cortinas para estruturar sem pesar. O amarelo funciona bem em pequenos detalhes como pôsteres ou pelúcias. Dica: opte por lâmpadas de luz quente, mantendo a paleta aconchegante e não fria.

Exemplo de imagem de butterstone gerada usando media.io

14) Brass Pebble

HEX: #D8B34B #D4D5D7 #9A9DA3 #585B61 #1B1C20

Clima: elegante, tecnológico, premium

Melhor para: anúncio de produto smartwatch

Elegante e discreto, lembra latão escovado contra pedras polidas. Deixe os cinzas dominarem o fundo para realçar o produto, usando o amarelo quente como destaque da marca em chamadas ou selos de características. Combine com luzes marcantes e texto mínimo para manter a modernidade do anúncio. Dica: evite saturação excessiva do amarelo na impressão, usando-o apenas como realce controlado.

Exemplo de imagem de brass pebble gerada usando media.io

15) Neon Safety

HEX: #FFEA00 #B7B9BC #6C6F75 #2D2F34 #0B0C0E

Clima: alerta, alto contraste, utilitário

Melhor para: conjunto de sinalização de segurança

Direto e chamativo, evoca coletes de alta visibilidade e faixas de perigro recém-pintadas. Combinações amarelo e cinza como esta funcionam melhor quando o contraste é prioridade: preto para ícones, amarelo para alertas e cinzas neutros para informações complementares. Combine com fonte sem serifa ousada e formas simples para manter a leitura clara à distância. Dica: margens generosas ajudam a manter a sinalização legível em ambientes movimentados.

Exemplo de imagem de neon safety gerada usando media.io

16) Cozy Wool

HEX: #E6C15A #E2E0DA #B0B1B4 #6A6C71 #2F3034

Clima: quente, calmo, tátil

Melhor para: capa de lookbook de tricô

Tátil e convidativo, lembra suéteres de lã e luz de café aconchegante. Use neutros suaves para valorizar fotografias e, depois, adicione amarelo como destaque sazonal em títulos ou traços gráficos sutis. Combine com tipografia editorial e margens generosas para um lookbook premium. Dica: mantenha contraste alto no texto da capa para leitura perfeita em miniatura.

Exemplo de imagem de cozy wool gerada usando media.io

17) Modern Bauhaus

HEX: #F3C300 #E6E6E6 #9C9FA6 #2E3036 #111214

Clima: gráfico, limpo, modernista

Melhor para: pôster de arte geométrica de parede

Gráfico e disciplinado, remete a cartazes modernistas e geometria limpa. Use amarelo em formas ousadas, ancorando a composição com carvão e cinzas médios equilibrados. Combine com círculos simples, linhas e layouts assimétricos para um visual de galeria. Dica: deixe uma borda generosa para que a impressão pareça intencional ao ser emoldurada.

Exemplo de imagem de modern bauhaus gerada usando media.io

18) Desert Road

HEX: #EAC24A #D6D2C7 #9B9DA1 #4E5056 #1E1F23

Clima: cinematográfico, ensolarado, aventureiro

Melhor para: banner principal de blog de viagem

Cinematográfico e ensolarado, lembra uma longa estrada se estendendo no calor. Use bege arenoso e cinzas claros no fundo, aplicando amarelo como destaque em botões ou marcadores de categoria. Combine com imagens de paisagem amplas e texto mínimo para um toque moderno de viagem. Dica: aplique um leve overlay cinza nas fotos para que os títulos brancos se mantenham legíveis.

Exemplo de imagem de desert road gerada usando media.io

19) Saffron Smoke

HEX: #F1B12C #D3D4D6 #A1A3A8 #61646B #202227

Clima: sombrio, dramático, estiloso

Melhor para: pôster de filme noir/thriller

Sombrio e estiloso, remete à luz esfumaçada, postes nas ruas e brilho de açafrão na noite. Use quase preto como base e para textos, deixando o amarelo fazer o ponto focal no título ou em um elemento gráfico. Combine com texturas granuladas e fotografia de alto contraste para acabamento cinematográfico. Dica: textos de apoio em cinza claro mantêm a legibilidade sem roubar a atenção.

Exemplo de imagem de saffron smoke gerada usando media.io

20) Yellowed Newspaper

HEX: #F0D46A #E8E3D6 #B5B7BB #6E7177 #26282D

Clima: reflexivo, vintage, confiável

Melhor para: infográfico de relatório de sustentabilidade

Reflexivo e levemente vintage, lembra papel de arquivo e tinta. Use bege claro como base da página, organizando seções com cinzas frios para estrutura e gráficos. O amarelo é ótimo para destacar métricas importantes, chamadas e barras de progresso sem tornar o visual excessivamente corporativo. Dica: use no máximo duas cores de dados e deixe o cinza liderar nos gráficos.

Exemplo de imagem de yellowed newspaper gerada usando media.io

Quais Cores Combinam com Amarelo Cinza?

Amarelo e cinza combinam bem com neutros definidos como branco e quase preto, pois aumentam o contraste e mantêm layouts legíveis. Em UI, isso ajuda a reservar o amarelo para CTAs enquanto os cinzas cuidam das superfícies, divisores e textos secundários.

Para uma direção mais quente, adicione bege, creme ou tons de camurça para suavizar a paleta e torná-la mais acolhedora em ambientes internos. Para um visual mais frio e moderno, adicione azul acinzentado ou tons metálicos para um toque de tecnologia limpa.

Se quiser um destaque além do amarelo, tente um toque controlado (verde-água, azul cobalto ou blush) em pequenas doses—ícones, tags ou realces de gráfico—assim o amarelo continua como principal cor de atenção.

Como Usar uma Paleta de Cores Amarelo Cinza em Projetos Reais

Comece pelos papéis e não só pelas cores: escolha um neutro claro para fundo, um cinza médio para superfícies, um cinza escuro/quase preto para texto e mantenha o amarelo como cor de “ação”. Esse mapeamento simples gera designs consistentes entre páginas e componentes.

Para acessibilidade, evite amarelo em textos longos e garanta bom contraste em botões e rótulos. Uma abordagem comum é texto escuro em superfícies claras, com amarelo em ícones, destaques e botões preenchidos que mantenham contraste suficiente acompanhados de tipografia escura.

Em impressão e interiores, use cinza como “base silenciosa” (paredes, grandes blocos, áreas negativas) e posicione amarelo onde quiser calor e foco (títulos, sinalização, almofadas, iluminação).

Crie Visuais de Paleta Amarelo Cinza com IA

Depois de definir uma paleta, a forma mais rápida de validá-la é no contexto real—como um dashboard, pôster, embalagem ou ambiente. Aí os mockups por IA ajudam: dá para testar layouts e iluminação sem reconstruir tudo.

Use seus códigos HEX como referência e descreva o tipo de design, clima e composição (por exemplo: “telas minimalistas de onboarding”, “grid editorial” ou “quarto acolhedor”). Gere algumas variações e escolha a de hierarquia e contraste mais limpos.

O Media.io facilita transformar essas ideias de paleta em visuais para compartilhar com clientes ou equipe.

Próximo: Paleta de Cores Black Pink