palette Gerador de Escala de Tons e Sombras star

Como a Escala É Construída

A teoria das cores define três formas de alterar sistematicamente um matiz base no modelo HSL: tint (misturar em direção ao branco, aumentando a Luminosidade — a cor parece mais pálida), shade (misturar em direção ao preto, reduzindo a Luminosidade — a cor parece mais escura e intensa), e tone (misturar em direção ao cinza, reduzindo a Saturação com a Luminosidade praticamente inalterada — a cor parece opaca ou "empoeirada"). Este gerador produz a metade tint/shade desse trio: partindo da sua cor base, ele desloca a Luminosidade para cima em direção ao branco nos degraus mais claros e para baixo em direção ao preto nos degraus mais escuros, produzindo a escala de dez degraus 50-900 usada por design systems como Tailwind e Material, com a cor de marca original ancorada por volta do degrau 500.

Um exemplo concreto: partindo de um azul em torno de hsl(217, 91%, 60%), o degrau 50 cai perto de hsl(217, 91%, 97%) — quase branco, restando apenas um sopro do matiz — enquanto o degrau 900 cai perto de hsl(217, 60%, 20%) — muito escuro, com a saturação comprimida à medida que a cor se aproxima do preto. Cada degrau recebe tanto um código hex quanto uma variável CSS pronta para uso; clicar em qualquer amostra a copia.

O ganho prático de gerar uma escala completa em vez de estimar a olho algumas sombras é a consistência: cada degrau é derivado do mesmo matiz base com a mesma regra de mistura, então uma borda de cartão no degrau 200 e um estado de hover no degrau 100 sempre parecem pertencer à mesma família de cores, mesmo meses depois, quando um designer diferente ou um componente diferente precisa de uma nova sombra da mesma cor de marca.

O Que Saber

• Tint, shade e tone não são a mesma operação: esta ferramenta realiza apenas tint e shade — mudanças de Luminosidade. Um tone verdadeiro reduz a Saturação mantendo a Luminosidade praticamente fixa, produzindo uma versão opaca da cor em vez de uma mais clara ou mais escura; essa manipulação separada não é o que este gerador aplica.
• Onde cada degrau é usado: 50-100 para fundos de página e preenchimentos de hover, 200-300 para bordas e divisores, 500-600 para botões e links (a própria cor de marca), 700-900 para texto de corpo sobre fundos claros.
• O contraste não é automático: combinar um degrau ≥700 com um ≤100 geralmente atinge o contraste WCAG AA, mas "geralmente" não é "sempre" — verifique o par exato que você planeja publicar com um verificador de contraste dedicado.
• Não é idêntico às paletas próprias do Tailwind: as cores integradas do Tailwind são ajustadas manualmente por matiz, propositalmente, enquanto este gerador aplica uma fórmula de mistura consistente a qualquer entrada — previsível para cores de marca personalizadas, próxima o suficiente para interfaces reais.
• O modo escuro geralmente inverte a escala: um fundo que usa o degrau 50 no modo claro costuma corresponder a algo perto do degrau 900 no modo escuro, e vice-versa — gerar a escala completa de antemão significa que ambos os temas já estão cobertos.