Gerador de tons e tonalidades
Crie uma escala de cores completa a partir de uma cor de marca, pronta para variáveis Tailwind ou CSS.
- Seus dados nunca saem do seu dispositivo
- 100% grátis
- Sem cadastro
- Funciona offline após a primeira carga
Como fazer tons e matizes
- Escolha ou cole sua cor.
- Escolha o número de passos e o método de mistura.
- Copie qualquer amostra ou exporte a escala como código ou imagem.
Sobre: Tons e matizes de cor
Faça uma escala de cores 50–950 completa de uma cor, além de tonalidades, tons e tons em qualquer número de etapas.
Tudo funciona no seu navegador, por isso é instantâneo e privado. Suas cores e configurações recentes são lembradas neste dispositivo, e a barra de endereço mantém sua cor para que você possa compartilhá-la ou marcá-la.
Ideal para
- Sistemas de design e temas Tailwind
- Passe o cursor e os estados ativos por botões
- Fundos e bordas que correspondem a uma cor de marca
Dica: Use os 50-100 passos para fundos e 700-900 para texto em fundos claros.
Perguntas frequentes
Qual é a diferença entre matizes, tons e tons?
Uma tonalidade é a cor misturada com branco, uma sombra é misturada com preto, e um tom é misturado com cinza.
Como é feita a escala 50-950?
Passos de leveza são definidos em OKLCH, um espaço de cor perceptivo, então os saltos parecem iguais; o croma se aproxima de passos muito claros e muito escuros para ficar na gama. Sua cor é mantida em seu passo mais próximo.
Posso usá-lo com o Tailwind CSS?
Sim. — copie a configuração para o Tailwind v3 ou o bloco theme para o Tailwind v4, e use classes como bg-primário-500.
Qual sombra devo usar para o texto?
Normalmente 700–900 em um fundo claro e 50–200 em um escuro. Verifique o par com o verificador de contraste antes de usá-lo.
Por que a escala é feita em OKLCH?
OKLCH muda de leveza uniformemente, então cada passo parece igualmente diferente do próximo, e as cores não ficam cinza ou mudam de tonalidade à medida que ficam mais escuras.