Guia de paletas de cores — copie cores padrão da Web e do Material Design
Uma coleção de referência com as paletas de design mais consultadas: cores padrão da Web, o sistema de cores do Material Design e uma rampa de cinzas, cada uma com seu código HEX e um botão de cópia com um clique.
Cores padrão da Web
Paleta do Material Design
Escala de cinza (cores neutras)
Dicas
- Clique no botão "Copiar" abaixo de qualquer amostra para copiar instantaneamente o código HEX (ex.: #F44336) para a área de transferência.
- Cole o código copiado diretamente no CSS ou em ferramentas de design como Figma e Adobe XD, sem precisar reformatar nada.
- As cores do Material Design são nomeadas como "cor + número de tonalidade" (ex.: Red 500): quanto maior o número, mais escuro o tom.
- A rampa de cinzas é útil quando você precisa de um conjunto consistente de tons para texto, fundo e bordas em uma mesma interface.
- Se estiver em dúvida sobre qual cor escolher, começar pelas 16 cores padrão da Web costuma gerar uma paleta legível e com bom contraste.
Perguntas frequentes
color: #F44336;. A mesma notação também funciona sem alterações na maioria das ferramentas de design e linguagens de programação.
Curiosidade — Por que designers evitam escolher cores "no olho"
Quando o Google apresentou o "Material Design" em 2014, não era apenas um guia de estilo visual, mas um sistema de design completo criado para unificar cor, tipografia, movimento e layout sob um único conjunto coerente de regras. A paleta de cores em particular foi projetada com um rigor incomum: cada matiz (Red, Blue, Green e assim por diante) vem com números de tonalidade de 50 a 900, permitindo que os designers construam um esquema de cores coeso em todo o aplicativo sem depender apenas do "olho".
Escolher cores de forma improvisada, uma a uma, tende a espalhar pelo aplicativo tons parecidos, porém sutilmente diferentes, resultando em um design que parece inconsistente. Escolher a partir de uma paleta sistemática pronta, em vez disso, mantém o esquema de cores coerente e ainda permite expressar naturalmente os diferentes estados de um botão (padrão, hover, pressionado) apenas subindo ou descendo na escala de tonalidade dentro do mesmo matiz.
A forma de especificar cores em CSS foi ampliada muitas vezes ao longo dos anos. O CSS1, lançado em 1996, suportava apenas 16 cores nomeadas básicas e códigos HEX. Hoje também é possível especificar cores em espaços mais próximos da percepção humana, como HSL, HWB e LAB. Mesmo assim, o código HEX continua sendo, de longe, a notação mais usada na prática — ainda é a língua comum compartilhada entre designers e engenheiros.