Paleta de Cores

Paletas de cores para aplicativo

Em um app, as cores indicam o que pode ser tocado, o que está ativo e o que deu certo ou errado. Estas 12 paletas trazem fundo, superfícies, uma cor principal e texto, de acordo com o tipo de aplicativo, com códigos HEX que você pode levar para o Figma, Flutter, SwiftUI ou React Native.

Fintech azul e verde

Azul para confiança e verde para saldos e operações concluídas.

Delivery laranja

O laranja destaca os botões de pedido e as promoções.

Saúde e bem-estar

Tranquila; para apps de consultas, hábitos ou acompanhamento.

Modo escuro roxo

Fundo cinza bem escuro em vez de preto puro, com destaque roxo-claro.

Social rosa e roxo

Para redes sociais, namoro ou criadores de conteúdo.

Produtividade minimalista

Muito legível; para gerenciadores de tarefas e ferramentas de trabalho.

Educação amarela

Alegre e clara; para apps de idiomas ou aprendizado.

Fitness energético

Verde-limão e vermelho sobre escuro; para treinos e métricas.

Meditação lavanda

Suave e calma; para sono, meditação ou diário pessoal.

Viagens turquesa e areia

Lembra praia e sol; para reservas e guias de viagem.

Comida fresca verde

Para supermercados, receitas ou nutrição.

Compras premium

Neutra e elegante; deixa as fotos dos produtos em destaque.

Toque em uma cor para copiar o código HEX. O ícone de lápis abre a paleta no editor para você alterá-la.

Defina as cores de estado desde o início

Todo app precisa de cores para erro, sucesso, alerta e informação. Escolha tons que combinem com a sua paleta e não use a cor de erro para outras coisas, como botões da marca. Acompanhe a cor com um ícone ou texto para que a mensagem não dependa só dela.

Crie também o modo escuro

A maioria dos celulares tem modo escuro e muitos usuários deixam ativado. Não basta inverter as cores: use cinzas bem escuros em vez de preto puro e reduza um pouco a saturação dos destaques para que não vibrem sobre o fundo.

Confira contraste e áreas de toque

O texto deve ter pelo menos 4,5:1 de contraste com o fundo, segundo a WCAG. Os botões devem parecer diferentes quando estão ativos, pressionados ou desativados. Teste o app ao ar livre e com o brilho baixo, que é como muita gente usa.

Cores destas paletas

Branco-fumaçaBrancoLinhoLaranjaPreto-carvãoOff-whiteVerde-pinhoÉbanoBranco-nevePlatinaAzul-da-prússiaMarfimÂmbarAmarelo fluorescenteChampanheAzul Tiffany

Perguntas frequentes

Quantas cores um aplicativo deve ter?

O normal é uma cor principal, uma secundária opcional, neutros para fundos e textos, e quatro cores de estado: erro, sucesso, alerta e informação.

Qual cor usar no botão principal de um app?

A cor principal da sua marca, desde que contraste bem com o fundo. Use só na ação mais importante de cada tela.

Mais paletas: design

Continue explorando