Tons de uma cor de marca
Informe a cor principal da sua marca e obtenha uma paleta de dez tons (de 50 a 900), no estilo design system, para montar um guia de cores coerente. Cálculo 100% local no seu navegador.
Como funciona
Um design system sólido nunca se limita a um único matiz: é preciso variantes mais claras para fundos e estados desativados e variantes mais escuras para textos ou estados de hover. Esta ferramenta converte sua cor para HSL, mantém o matiz original e varia apenas a luminosidade (e levemente a saturação nos extremos) para gerar dez tons numerados de 50 (muito claro) a 900 (muito escuro), seguindo o modelo das paletas do Tailwind CSS.
Qual tom corresponde melhor à minha cor original?
O tom 500 é calculado para ficar o mais próximo possível da cor que você informou; os tons inferiores clareiam progressivamente em direção ao branco e os tons superiores escurecem progressivamente em direção ao preto.
Posso copiar um único tom ou a paleta inteira?
Clique em uma amostra para copiar seu código HEX individualmente ou use o botão "Copiar toda a paleta" para obter a lista completa no formato numéro: #hex, pronta para colar em um arquivo de configuração CSS ou Tailwind.
O cálculo dos tons é feito inteiramente no seu navegador; a cor da sua marca nunca é enviada a um servidor.