Gerador de tons de uma cor
Escolha a cor base. A ferramenta monta 11 tons, do quase branco ao quase preto, mantendo o matiz. Toque em um tom para copiar o código.
Como usarTons de uma cor
Disponível em: 
Gerador de tons de uma cor: para que serve
Escolha uma cor e a ferramenta gera 11 tons, do quase branco ao quase preto, calculados no espaço de cor OKLCH: o matiz fica igual e a luminosidade muda a cada degrau. A cor base entra no degrau de luminosidade mais parecida, sem alteração.
Toque em um tom para copiar o HEX, ou copie todas as variáveis CSS ou o objeto para o tailwind.config com o nome que você escolher.
Como usar
- Escolha a cor base no seletor ou digite o HEX.
- Dê um nome para a cor.
- Copie um tom, as variáveis CSS ou a escala para o Tailwind.
Quando usar
- Criar a paleta de um site ou de um sistema de design.
- Ter tons claros para fundos e escuros para texto da mesma cor.
- Montar a cor da marca no Tailwind.
Perguntas frequentes
Como os tons são calculados?
No espaço de cor OKLCH, que segue a percepção do olho: a ferramenta mantém o matiz da cor base, muda a luminosidade de cada degrau e reduz a saturação nas pontas para os tons claros e escuros não ficarem berrantes.
Onde a minha cor fica na escala?
A cor base é colocada no degrau com a luminosidade mais parecida com a dela, e esse degrau usa exatamente a sua cor. Ele aparece marcado.
Como usar no Tailwind ou no CSS?
Copie as variáveis CSS (--cor-50 a --cor-950) ou o objeto para o tailwind.config. Troque o nome da cor no campo nome.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.