Transforme uma cor em escalas completas de matizes, sombras e tons e exporte tudo como variáveis CSS, no seu navegador.
Um design system raramente precisa de uma cor: ele precisa de uma família. Matizes, sombras e tons são as três formas clássicas de construir essa família a partir de um único matiz de base. Um matiz claro é a cor misturada com branco, gerando versões mais claras e suaves usadas em fundos, superfícies de hover e estados desabilitados. Uma sombra é a cor misturada com preto, gerando versões mais escuras usadas em texto sobre fundos claros, bordas e estados pressionados. Um tom é a cor misturada com cinza, o que reduz a saturação sem mudar tanto a luminosidade — o menos conhecido dos três e o que produz aquele visual sóbrio e editorial que matizes e sombras puros não alcançam.
A matemática aqui é deliberadamente simples e previsível: cada passo é uma interpolação linear dos canais RGB entre a sua cor base e o destino (branco #ffffff, preto #000000 ou cinza médio #808080), em incrementos de 10%, de modo que o décimo passo cai exatamente no destino. É a mesma convenção usada pelos geradores clássicos de tints e shades, e ela deixa todo valor reproduzível — você pode recalcular qualquer amostra na mão. Vale conhecer o custo dessa escolha: como a interpolação acontece em sRGB e não num espaço perceptual como o OKLCH, os passos de luminosidade percebida não ficam perfeitamente uniformes, sobretudo em amarelos e cianos muito saturados. Para escalas de interface isso costuma ser suficiente e até preferível, já que os resultados ficam próximos do matiz original.
A exportação é o que torna isso prático. Um clique copia a paleta como propriedades personalizadas CSS, prontas para colar num bloco :root, ou como uma lista pura de códigos hexadecimais para uma ferramenta de design. Ativar os nomes no estilo Tailwind remapeia a paleta para a familiar escala de 50 a 900 — 50 a 400 clareando, 500 como a sua cor base, 600 a 900 escurecendo — que cai direto num tema Tailwind ou em qualquer arquivo de tokens que siga a mesma convenção. Você também pode baixar a paleta como um arquivo .css. Todo cálculo e o próprio arquivo são produzidos 100% no seu navegador; a cor que você escolhe nunca é enviada a um servidor.
Um matiz claro é a sua cor misturada com branco, uma sombra é a sua cor misturada com preto e um tom é a sua cor misturada com cinza. Matizes e sombras mudam a luminosidade; os tons reduzem principalmente a saturação, dando um resultado mais sóbrio com luminosidade parecida.
Cada passo é uma mistura linear direta dos canais RGB entre a sua cor base e o branco, o preto ou o cinza 50%, em incrementos de 10% — então o décimo matiz é branco puro e a décima sombra é preto puro. Os valores são totalmente reproduzíveis.
Sim. Ative os nomes no estilo Tailwind e a exportação usa a escala de 50 a 900, com 500 como a sua cor base, pronta para colar na configuração do seu tema ou num arquivo de variáveis CSS.
Não automaticamente. A escala é matematicamente uniforme, não perceptualmente uniforme, então você ainda precisa conferir os pares de texto e fundo contra os limiares de contraste da WCAG — como regra de bolso, combine os matizes mais claros com as sombras mais escuras.
Não. A paleta, a exportação em CSS e o arquivo baixado são todos gerados localmente em JavaScript no seu dispositivo — nada é transmitido nem armazenado em nenhum servidor.
O Vai.la transforma qualquer URL em um link curto com estatísticas de cliques, QR Code e seu próprio biolink.
O Vai.la não se responsabiliza pelo uso das ferramentas nem por decisões tomadas com base nos seus resultados.