Gerador de Tonalidades
Gere tonalidades mais claras e mais escuras a partir de qualquer cor base. Construa uma escala de cores para seu sistema de design.
Sobre esta ferramenta
O gerador de tintes e sombras cria variantes mais claras e escuras a partir de qualquer cor base. Os tintes sao feitos misturando a cor base com branco (adicionando luminosidade), enquanto as sombras sao feitas misturando com preto (reduzindo luminosidade).
A ferramenta gera ate 5 niveis de tintes e 5 de sombras, mais a cor base original, fornecendo uma paleta de 11 passos centrada no matiz escolhido. Clique em qualquer amostra para copiar seu codigo hex.
Como usar
- Escolha uma cor base usando o seletor de cor ou digite um codigo hex.
- Use os botoes de amostra para testar cores predefinidas rapidamente.
- Ajuste o numero de niveis (3-5) para controlar a largura da paleta.
- Clique em qualquer amostra para copiar seu codigo hex. Use Copiar tudo para copiar a escala completa.
Casos de uso
Sistemas de design precisam de uma escala de cores sistematica para cada cor de marca. Designers de UI geram estados hover, ativo e desativado de uma unica cor de acao. Desenvolvedores frontend criam variantes de cor consistentes.
Perguntas frequentes
- Qual e a diferenca entre tinte e sombra? — Um tinte mistura a cor com branco (mais claro); uma sombra mistura com preto (mais escuro). Um tom mistura com cinza e nao e gerado aqui.
- Como os niveis sao calculados? — Cada nivel mistura a cor base com branco ou preto nas proporcoes de 10%, 30%, 50%, 70% e 90%, fornecendo passos visuais consistentes.
- Posso obter variaveis CSS disso? — A saida sao codigos hex. Voce pode cola-los no seu CSS como --color-500, --color-400, etc.