Em um site, cada cor tem uma função: fundo, texto, botões, links e avisos. Estas 12 paletas foram pensadas para isso, com um fundo claro ou escuro, uma cor de texto legível e um destaque para os botões. Copie os códigos HEX direto para o seu CSS ou para o seu criador de sites.
SaaS azul limpo
Fundo quase branco, texto azul bem escuro e botões em azul vivo.
Corporativo sóbrio
Para escritórios de advocacia, consultorias ou indústrias.
E-commerce quente
O laranja destaca os botões de compra sobre um fundo quente.
Modo escuro com verde
Fundos escuros em camadas, texto claro e destaque verde para ações.
Natural e orgânico
Para lojas de produtos naturais, hortas ou bem-estar.
Pastel amigável
Acolhedora; o cinza-azulado escuro garante texto legível.
Editorial com vermelho
Para blogs, revistas e portais; o vermelho marca links e manchetes.
Roxo tecnológico
Comum em produtos digitais, cursos online e ferramentas de IA.
Turquesa e coral
Dois destaques complementares: um para botões e outro para avisos.
Luxo escuro
Para hotéis, restaurantes ou marcas premium com fotos em destaque.
Saúde e bem-estar
Limpa e tranquila; boa para clínicas e terapias.
Areia e verde-azulado
Quente e séria ao mesmo tempo; para turismo, imobiliárias ou cafés.
Toque em uma cor para copiar o código HEX. O ícone de lápis abre a paleta no editor para você alterá-la.
Aplique a regra 60-30-10
Use a cor dominante (normalmente o fundo) em cerca de 60% da página, uma cor secundária em 30% (seções, cards, cabeçalho) e o destaque nos 10% restantes. Reserve o destaque para botões e links, assim o usuário sabe onde clicar.
Confira o contraste do texto
As diretrizes de acessibilidade WCAG pedem contraste mínimo de 4,5:1 para texto normal. Cinza-claro sobre branco parece elegante, mas é difícil de ler, principalmente no celular sob o sol. Use um verificador de contraste antes de publicar.
Defina cores para estados e avisos
Além da paleta da marca, um site precisa de cores para erro (vermelho), sucesso (verde) e alerta (amarelo ou laranja). Escolha versões que combinem com a sua paleta e use sempre do mesmo jeito em formulários e mensagens.