Gerador de tons claros e escuros
Escolha uma cor de partida e obtenha na hora 10 variações mais claras em direção ao branco (tints) e 10 mais escuras em direção ao preto (shades). Clique em qualquer amostra para copiar o código hex dela.
☀️ Tons claros, em direção ao branco
🌑 Tons escuros, em direção ao preto
Por que os tons claros e escuros importam em um design system
Uma única cor nunca basta para construir uma interface: você precisa das variações dela. Os tons claros (a cor misturada com branco) funcionam bem para fundos, etiquetas, estados de hover e superfícies suaves; os tons escuros (a cor misturada com preto) são ideais para textos, bordas, ícones e estados ativos que precisam de um contraste sólido. É a mesma ideia por trás das escalas numeradas de 50 a 900 do Tailwind CSS e do Material Design: com uma única escala coerente você para de inventar cinzas e tons improvisados a cada tela.
Como as variações são calculadas
Cada passo mistura a sua cor de partida com branco ou preto em quantidades crescentes: a primeira amostra contém cerca de 9% de branco (ou de preto) e a última cerca de 91%. A mistura é feita nos canais RGB, o método mais comum nas ferramentas de design, então você obtém uma escala uniforme e previsível com códigos hex prontos para colar no seu CSS, no Figma ou nas variáveis do seu design system.