Gerador de paleta em gradiente
Crie uma escala de cores suave a partir de uma cor base ou entre várias cores. Copie qualquer amostra, pegue o CSS do gradiente e exporte em CSS, Tailwind, SCSS ou JSON.
Carregando Gerador de paleta em gradiente…
Seus arquivos nunca saem do seu dispositivo
Como usar Gerador de paleta em gradiente
- 1
Abra Gerador de paleta em gradiente nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Sobre esta ferramenta
Design systems precisam de mais de um tom de cada cor: tons claros para fundos, tons médios para botões e tons escuros para texto e estados de hover. Este gerador de paleta em gradiente cria uma escala de cores suave a partir de uma cor base, ou uma série de passos misturados entre cores que você escolher, e exporta direto para o seu código.
Como criar uma escala de cores
- Escolha uma cor base.
- Escolha o modo: scale para tons do claro ao escuro de uma cor, ou steps para misturar várias cores que você adicionar.
- Adicione ou remova cores e defina o número de passos.
- Dê um nome à paleta, clique em qualquer amostra para copiar o código HEX e copie o CSS do gradiente.
- Exporte a paleta como variáveis CSS, cor do Tailwind, variáveis SCSS ou JSON.
Usando uma escala em um design system
Uma convenção comum, usada pelo Tailwind, nomeia os tons de 50 (o mais claro) a 900 ou 950 (o mais escuro):
- 50 a 100: fundos de página e de cards.
- 200 a 300: bordas e preenchimentos sutis.
- 500 a 600: botões principais e links.
- 700 a 900: estados de hover e texto sobre fundos claros.
Dicas
- Verifique o contraste de qualquer tom usado atrás de texto com o verificador de contraste.
- Mantenha passos uniformes para que os estados de hover e ativo pareçam consistentes.
- Misture matizes próximos para gradientes naturais; matizes distantes podem passar pelo cinza.
- Nomeie as cores pela função no código (primary, accent), para que uma mudança de marca altere um único lugar.
Para combinações harmoniosas de cores diferentes, use o gerador de paleta de cores. Para criar um único fundo em gradiente, experimente o gerador de gradiente CSS.
Perguntas frequentes
O que é uma escala de cores?
Uma série de tons de uma cor, do claro ao escuro, usada de forma consistente em fundos, bordas, botões e texto.
Posso exportar uma escala de cores para o Tailwind?
Sim. Escolha a exportação Tailwind para receber uma entrada de cor que você cola na configuração do Tailwind.
Qual a diferença entre os modos scale e steps?
Scale cria tons mais claros e mais escuros de uma cor base. Steps mistura várias cores que você escolhe, em quantos passos definir.
Como copio uma cor só?
Clique em qualquer amostra para copiar o código HEX dela.
Quais formatos posso exportar?
Variáveis CSS, configuração do Tailwind, variáveis SCSS e JSON, além do CSS do gradiente.
É grátis?
Sim, sem cadastro.