Sobre esta ferramenta
Sombras e tons claros são a base de um sistema de cores de UI utilizável. Uma única cor de marca raramente basta sozinha: você precisa de tons mais claros para fundos, estados de hover e preenchimentos sutis, e sombras mais escuras para texto, bordas e estados que precisam permanecer legíveis sobre fundos claros. "Sombra" (shade) e "tom claro" (tint) têm significados precisos na terminologia de design — uma sombra mistura a cor base com preto, um tinte a mistura com branco — diferente de um "tom" (tone), que a mistura com cinza e que esta ferramenta não gera.
Escolha uma cor base e um número de etapas para gerar uma progressão completa do escuro ao claro: a sombra mais escura primeiro, sua cor original no meio e o tom mais claro por último. Clique em qualquer amostra para copiar seu código hexadecimal para a área de transferência, para usar em variáveis CSS, tokens de design ou configuração do Tailwind. Tudo acontece localmente no seu navegador enquanto você ajusta a cor ou o número de etapas; nada é enviado.
Perguntas frequentes
Qual é a diferença entre um tom e um matiz?
Um tom é sua cor base misturada em direção ao preto (mais escura), enquanto um matiz é sua cor base misturada em direção ao branco (mais clara). Ambos mantêm o mesmo matiz (hue).
Quantos passos devo gerar para uma paleta de sistema de design?
A maioria dos sistemas de design usa 5-10 passos (semelhante à escala 50-900 do Tailwind) — suficiente para cobrir fundos, bordas, texto e estados hover sem muitas cores quase duplicadas.