Como escolher a paleta de cores ideal para seu projeto
A cor é uma das ferramentas mais poderosas no design. Uma paleta bem escolhida pode aumentar o reconhecimento da marca em até 80% e impactar significativamente a conversão. Esta ferramenta oferece esquemas de cores testados para diferentes tipos de projetos.
Paletas de marcas brasileiras e internacionais
Nubank revolucionou o mercado financeiro brasileiro com seu roxo icônico (#8A05BE). A cor transmite inovação e modernidade, diferenciando-se completamente dos bancos tradicionais. iFood usa vermelho (#EA1D2C) para estimular o apetite e criar urgência — perfeito para um app de delivery.
Mercado Livre combina amarelo (#FFE600) com azul (#3483FA), criando alto contraste e reconhecimento imediato. Essas paletas foram testadas por milhões de usuários e podem servir como base sólida para seus projetos.
Cores em tendência
Peach Fuzz — tom pêssego quente que transmite aconchego e otimismo. Ideal para marcas de lifestyle, apps de bem-estar e e-commerce de moda.
Lavanda Digital — tons calmantes que associam tecnologia com suavidade. Perfeito para fintechs, healthtechs e produtos digitais focados em experiência do usuário.
Luxo Discreto — tons neutros de bege e marrom para marcas premium. Minimalismo e elegância sem cores chamativas.
Escolha por tipo de projeto
Site corporativo: paletas monocromáticas (Escala de Cinza, Azul Mono) ou Material Design. Visual profissional, boa legibilidade, versatilidade.
Portfólio criativo: Moderno & Ousado (Noites Neon, Synthwave). Contrastes vibrantes que chamam atenção e demonstram criatividade.
E-commerce: paletas quentes (Recife de Coral, Hora Dourada) estimulam compras por impulso. Paletas frias (Oceano Profundo, Menta Fresca) para decisões mais racionais.
Aplicativo móvel: Material Design ou paletas de marcas (Figma, Nubank). Testadas em acessibilidade, funcionam em temas claro e escuro.
Acessibilidade e contraste WCAG
O padrão WCAG 2.1 exige contraste mínimo de 4.5:1 entre texto e fundo. Isso não é apenas formalidade — cerca de 8% dos homens e 0.5% das mulheres têm algum tipo de daltonismo. Sempre verifique cada combinação antes de usar.
Nível AA — mínimo para projetos comerciais. Nível AAA — recomendado para sites governamentais, serviços de saúde e financeiros.
Formatos de exportação
CSS Variables — abordagem moderna. Cores declaradas uma vez e usadas via var(). Fácil trocar temas sem editar centenas de linhas de código.
SCSS — para projetos com pré-processadores. Variáveis compiladas em CSS puro.
Tailwind — config pronto para o framework utility-first. Cores disponíveis imediatamente como classes (bg-primary, text-accent).