Caminho da tarefa / da entrada ao resultado
Como gerar uma escala de tons de cor
- 01
Defina a cor base
Insira um valor hexadecimal em Cor base — #RGB, #RGBA, #RRGGBB e #RRGGBBAA funcionam, e o campo abre com #6D5EF8. A cor base sempre fica no meio da escala final. Passo escuro (%) · Passo claro (%) · Etapas por lado · Copiar todas as cores
- 02
Escolha o número de tons
Defina o Número de tons como um inteiro de 3 a 20 — o padrão é 9. Uma contagem ímpar equilibra os lados mais escuros e mais claros uniformemente ao redor da base; uma contagem par ainda centraliza a base e dá ao lado claro uma amostra a mais.
- 03
Gere a rampa
Pressione Gerar tons. A paleta vai de tons profundos, passando pela sua cor base, até tinturas claras, e cada amostra é numerada e rotulada com seu valor hexadecimal, então a posição 1 é sempre o passo mais escuro.
- 04
Confira o comportamento da mescla
Defina separadamente os passos de escurecimento e clareamento entre 1% e 100%. Cada amostra seguinte mistura a base mais um passo em direção ao preto ou branco, até 100%; os extremos podem atingir preto ou branco. O alfa da base é preservado.
- 05
Carregue a escala de exemplo
Pressione Carregar exemplo para gerar sete tons ao redor de #0EA5E9 — uma execução de referência completa que você pode inspecionar antes de inserir a cor da sua marca. Redefinir restaura a base #6D5EF8 e a contagem de 9.
- 06
Copie ou baixe os tokens
Pressione Copiar saída para copiar um bloco :root de custom properties --toolars-shade-1 …, ou Baixar para salvá-lo como toolars-color-shades.css, pronto para colar em uma folha de estilos. Cada cartão de amostra também mostra seu valor hexadecimal para cópias pontuais. Exporte o resultado atual. HEX / RGBA / HSL / JSON.