Question 1

O que é uma escala de cores em design systems?

Accepted Answer

Uma escala de cores é um conjunto sistemático de tons derivados de um único matiz, variando do muito claro (tint) ao muito escuro (shade). Design systems como Tailwind CSS usam escalas de 10 passos (50 a 950) para que você possa aplicar variações de cores consistentes em toda a sua interface.

Question 2

Quantos passos minha escala de cores deve ter?

Accepted Answer

A maioria dos design systems usa 10–11 passos. O Tailwind usa 11 (50, 100, 200...900, 950). O Material Design usa 12. Para um sistema personalizado leve, 7–8 passos geralmente cobrem todas as suas necessidades, de fundos a texto escuro.

Question 3

Posso exportar a escala como configuração Tailwind?

Accepted Answer

Sim. A ferramenta gera um objeto de configuração de cores Tailwind pronto para colar. Adicione-o ao seu tailwind.config.js sob a chave colors para usar sua escala personalizada em todos os utilitários Tailwind.

Question 4

Qual a diferença entre um tint e um shade?

Accepted Answer

Um tint é sua cor base misturada com branco (mais clara), e um shade é sua cor base misturada com preto (mais escura). Uma escala de cores completa geralmente inclui tanto tints (extremo claro) quanto shades (extremo escuro) da sua cor base.

Gerador de Escala de Cores para Design System

Configurações de escala de cores

Como usar

Related Tools

Gerador de Escala de Cores para Design System

Configurações de escala de cores

Como usar

Related Tools