← Todas as ferramentas de texto

Gerador de tons claros e escuros

Tons mais claros, mais escuros e mais suaves de qualquer cor, com variáveis CSS.

  • Grátis
  • Sem cadastro
  • Funciona em qualquer dispositivo

Cerca de Gerador de tons claros e escuros

Comece com uma cor e obtenha tons mais claros (misturados com branco), sombras mais escuras (misturadas com preto) e tons mais suaves (misturados com cinza). As etapas vêm como variáveis CSS prontas para uma folha de estilo. Essas famílias são a base dos estados de hover, bordas, fundos e botões desativados.

Como usar: Gerador de tons claros e escuros

  1. Informe sua cor base como um código HEX ou escolha-a.
  2. Veja os tons mais claros, os mais escuros e os mais suaves.
  3. Copie cores individuais ou as variáveis CSS do conjunto completo.

Por que usar esta ferramenta?

Também conhecido como

Perguntas frequentes

Qual é a diferença entre tint e shade?

Um tint é uma cor misturada com branco, então fica mais clara. Um shade é a cor misturada com preto, então fica mais escura. Um tone é misturado com cinza.

Como nomeio variáveis CSS para as minhas tonalidades?

Use uma escala numerada, como de 100 a 900, em que números pequenos são claros e grandes são escuros. Isso mantém os nomes curtos e fáceis de estender.

Para que servem os tons mais suaves?

Os tons misturam a cor com cinza, reduzindo sua intensidade. Servem para fundos, bordas e elementos de interface discretos, em que uma cor pura seria forte demais.

Gerador de tons claros e escuros é grátis?

Sim. Gerador de tons claros e escuros no Toolipedia é de uso gratuito, sem cadastro e sem marca d'água.

É seguro usar?

Sim. Tudo é calculado no seu navegador, e nada do que você digita é enviado ao nosso servidor.

Funciona no meu celular?

Sim. Funciona em qualquer navegador moderno no Android e no iPhone, além de tablets e computadores. Não é preciso instalar nada.

Preciso de uma conta?

Não. É só abrir a página e usar a ferramenta. Sem cadastro e sem e-mail.

Posso colocar Gerador de tons claros e escuros no meu próprio site?

Sim. Use o botão «Incorporar no seu site» abaixo da ferramenta para copiar um trecho curto de código e colá-lo na sua página. É grátis, não precisa de conta e a ferramenta continua funcionando dentro da sua página.

Ferramentas relacionadas