Variações de cor
Escolha uma cor e veja sombras (preto adicionado), tons (cinza) e matizes (branco) em incrementos de 10%. Clique em qualquer faixa para copiar o HEX.
Sombras
Variações mais escuras criadas adicionando preto à sua cor base.
0%10%20%30%40%50%60%70%80%90%100%
Matizes
Variações mais claras criadas adicionando branco à sua cor base.
0%10%20%30%40%50%60%70%80%90%100%
Tons
Variações mais suaves criadas adicionando cinza à sua cor base.
0%10%20%30%40%50%60%70%80%90%100%
Casos de uso comuns
- • Estados de componentes (hover, ativo, desativado)
- • Profundidade com sombras e destaques
- • Sistemas de cores consistentes
Dica de design system
Essas variações formam a base de uma paleta coesa. Exporte-as para manter consistência em todo o seu projeto.