Gerador de paleta Material Design

O gerador mantém a cor informada no nível 500 e calcula os níveis claros de 50 a 400 e os escuros de 600 a 900. Cada resultado é fornecido como texto #RRGGBB em letras maiúsculas, pronto para copiar em CSS, arquivos de tema ou sistemas de tokens. O cálculo é imediato, repetível e não depende de serviços de rede nem de escolhas subjetivas de cor.

Comece com uma cor-base confiável

Informe uma cor hexadecimal de seis dígitos com o sinal de cerquilha inicial, como #3F51B5. Esse valor se torna o tom 500, a referência visual da escala gerada. Um formato de entrada rígido elimina ambiguidades entre notações abreviadas, códigos com canal alfa e valores hexadecimais sem cerquilha. Antes de escolher a base, considere onde ela será usada com maior frequência. Uma cor de destaque da marca aplicada a botões pode precisar de contraste suficiente em superfícies claras e escuras, enquanto uma cor decorativa de gráfico talvez precise se separar das séries vizinhas. O gerador não altera discretamente a referência para atender metas de contraste; preservar o nível 500 mantém a paleta vinculada à cor escolhida. Os níveis de número menor ficam progressivamente mais claros, e os de número maior, mais escuros. A saída usa valores de seis dígitos em maiúsculas para entrar diretamente em propriedades CSS, arquivos JSON de tokens, temas de componentes ou documentação. Entradas inválidas são recusadas, em vez de serem adivinhadas ou analisadas parcialmente.

Entenda como a escala de tons é produzida

A paleta segue os rótulos conhecidos do Material: 50, 100, 200, 300, 400, 500, 600, 700, 800 e 900. O nível 500 é exatamente a base enviada. No lado claro, cada canal vermelho, verde e azul é misturado ao branco em proporções fixas, e o tom 50 recebe o clareamento mais forte. No lado escuro, os mesmos canais são misturados ao preto, com o maior escurecimento no tom 900. Cada canal é arredondado para o inteiro mais próximo e convertido novamente em hexadecimal. A interpolação RGB fixa torna o algoritmo transparente e determinístico: a mesma entrada sempre gera os mesmos dez valores na mesma ordem. Ela também evita dependências ocultas de perfis de tela, gerenciamento de cores do navegador, API de rede ou padrões variáveis de programas de design. A escala resultante é uma família tonal prática no estilo Material, mas não afirma que todos os intervalos tenham a mesma luminosidade percebida. A visão humana reage de maneira diferente a cada matiz; se houver requisitos perceptuais rigorosos, use o resultado como ponto de partida estável e avalie-o no contexto de uso.

Aplique a paleta sem perder a acessibilidade

Associe os valores retornados a tokens semânticos, em vez de espalhar números de tons por toda a aplicação. Um tema pode, por exemplo, atribuir um tom ao fundo interativo, outro ao estado de passagem do ponteiro e um mais claro à superfície selecionada. Manter esse mapeamento em uma única camada de tokens permite ajustar o sistema visual sem editar cada componente. Sempre teste as combinações de primeiro plano e fundo no tamanho e no peso de fonte que serão publicados. O rótulo do tom não garante uma taxa específica de contraste, e duas cores-base podem produzir resultados de acessibilidade muito diferentes no mesmo nível. Avalie separadamente indicadores de foco, controles desabilitados, visualizações de dados, modo escuro e configurações de alto contraste. A paleta gerada é valiosa durante a exploração por oferecer opções coerentes rapidamente, mas a seleção final ainda deve considerar contexto e significado. Não use a cor como único sinal de erro ou estado. Quando as equipes de design e desenvolvimento compartilharem a paleta, registre a base original junto dos valores gerados para que alterações futuras sejam reproduzíveis, sem depender de ajustes manuais não documentados.