Gere uma gama completa de tintes e tons a partir de uma única cor — escolha o passo de escurecimento/clareamento e o número de tons, depois copie qualquer valor instantaneamente.

Cor base
Passo
%
Quanto mais claro/escuro fica cada tom, por passo (1–25%).
Número de tons
Quantos tintes e tons gerar de cada lado da cor base.
Gradiente
Tons gerados

Escolha uma cor base, uma percentagem de passo e um número — cada tinte e tom é calculado instantaneamente no seu browser.


Sobre Gerador de Tons de Cor

O Color Shades Generator expande uma única cor numa gama completa de tons claros e escuros. Indique uma cor base e a ferramenta produz tons progressivamente mais claros de um lado e progressivamente mais escuros do outro — a clássica escala de 50 a 900 usada em sistemas de design modernos.

Dois controlos moldam o resultado: a percentagem de passo define quanto cada tom clareia ou escurece (1–25% por passo), e a contagem define quantos tons claros e escuros aparecem de cada lado da base, até dez. Uma faixa de gradiente pré-visualiza toda a escala num relance.

A geração acontece instantaneamente no seu navegador enquanto escreve — nada é enviado a um servidor. Copie qualquer valor individual, a lista completa, ou toda a escala como variáveis CSS, prontas a colocar num ficheiro de tokens de design ou numa escala de cores ao estilo Tailwind.

Como usar Gerador de Tons de Cor

  1. Escolha uma cor base com o seletor ou digite um valor; clique em "Cor aleatória" para inspiração.
  2. Defina a percentagem de passo para controlar quanto cada tom clareia ou escurece.
  3. Escolha a contagem de tons para decidir quantos tons claros e escuros aparecem de cada lado.
  4. Clique numa amostra para a copiar, ou use "Copiar tudo" e "Copiar variáveis CSS" para toda a escala.

Perguntas frequentes

Sim, completamente. Todos os tons claros e escuros são calculados em tempo real no seu navegador, pelo que não há custo, conta ou limite quanto ao número de escalas que gera.

Um tom claro é a sua cor base misturada em direção ao branco (mais clara), enquanto um tom escuro é a base misturada em direção ao preto (mais escura). O gerador produz ambas as direções em simultâneo, identificadas como "Tons claros" e "Tons escuros" em torno da sua cor base.

Defina a contagem para 4 ou 5 de cada lado, para obter entre nove e onze amostras no total, com a sua base ao centro. Um passo de cerca de 8–10% costuma dar um espaçamento semelhante às escalas 50–900 usadas por frameworks populares.

Passos pequenos (3–6%) dão variações subtis para estados hover e limites; passos médios (8–12%) servem escalas completas de sistemas de design; passos grandes (15–25%) criam conjuntos de alto contraste, estilo cartaz. Observe a pré-visualização do gradiente — uma boa escala deve escurecer de forma uniforme, sem bandas.

Sim. "Copiar variáveis CSS" produz toda a escala como propriedades personalizadas CSS com nome, e "Copiar tudo" dá-lhe uma lista simples de valores que pode colar em qualquer lugar, desde mapas SCSS a objetos de tema em JavaScript.


Pesquisas populares
gerador de tons de cor matizes e tons clarear e escurecer cor tons de uma cor gerador de matiz de cor gerar tons de cor
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.
Relatar um problema

Adicione esta ferramenta gratuita ao seu próprio site — copie e cole o código abaixo.