Gerador de paleta Material Design
Escolha uma cor base e obtenha instantaneamente suas dez tonalidades, da mais clara (50) à mais escura (900), no espírito das paletas tonais popularizadas pelo Material Design. O cálculo é feito inteiramente no seu navegador.
Como funciona
A ferramenta considera sua cor base como a tonalidade 500 e depois calcula as tonalidades mais claras (50 a 400) misturando-a progressivamente com branco, e as mais escuras (600 a 900) misturando-a com preto, em proporções crescentes à medida que se afasta do 500. O resultado é uma paleta tonal coerente, pronta para entrar em um design system ou em uma biblioteca de componentes.
É exatamente o algoritmo oficial do Material Design?
Não, o Google calcula suas paletas oficiais com um algoritmo proprietário, mais complexo, baseado no espaço de cores HCT. Esta ferramenta oferece uma aproximação por mistura linear em direção ao branco e ao preto, que dá um resultado visualmente próximo e diretamente utilizável, sem pretender reproduzir ao pixel as paletas oficiais do Material.
Como usar essa paleta no meu projeto?
Clique em uma tonalidade para copiar seu código HEX e use-a como variável CSS ou token de design (por exemplo, --primary-500): as tonalidades claras costumam servir para fundos e estados desativados, a tonalidade 500 para a cor principal, e as escuras para texto ou estados ativos de alto contraste.
Todos os cálculos de cor acontecem diretamente no seu navegador, sem nenhuma chamada a um servidor externo.