CodeKitHubO que é esta ferramenta?
Uma rampa de tons é uma série de variações de uma cor em diferentes níveis de luminosidade, usada no design de interfaces para coisas como estados de hover, estados desabilitados, bordas e fundos que precisam se relacionar com uma cor de marca sem serem idênticos a ela.
Esta ferramenta converte sua cor base para HSL, mantém o matiz e a saturação fixos, e varia a luminosidade de cerca de 95% (matiz quase branco) até cerca de 10% (tom quase preto), com sua cor original posicionada em seu lugar natural no meio da rampa.
Por que usar?
- Gera uma rampa no estilo de sistema de design (como a escala 50/100/200.../900 do Tailwind) a partir de uma única cor, não apenas de uma paleta predefinida fixa.
- Escolha 7, 9 ou 11 etapas conforme o quão detalhada você precisa que a rampa seja.
- Cada etapa mostra seu código HEX exato e porcentagem de luminosidade — clique para copiar.
- Mantém o matiz e a saturação constantes em toda a rampa, então todos os tons se leem claramente relacionados à cor base em vez de derivar para o cinza.
- Grátis, instantâneo e totalmente local.
Como usar
- Escolha sua cor base usando o seletor de cor ou digitando um código HEX.
- Escolha quantas etapas você quer na rampa (7, 9 ou 11).
- Leia o código HEX e a porcentagem de luminosidade de cada tom diretamente na amostra.
- Clique em qualquer amostra para copiar seu código HEX.
Exemplo
Entrada
#3B82F6 (um azul médio), 9 etapasResultado
9 tons de um matiz quase branco (~95% de luminosidade) até um tom quase preto (~10% de luminosidade), com o próprio #3B82F6 posicionado como a etapa do meioO matiz e a saturação permanecem fixos nas 9 etapas — só a luminosidade muda — então cada tom se lê claramente como parte da mesma família de cor.
Perguntas frequentes
Este é o mesmo sistema que o Tailwind CSS usa para suas escalas de cor?
É a mesma ideia subjacente (matiz/saturação fixos, luminosidade variável) mas não uma réplica exata da paleta específica do Tailwind — as escalas 50-900 do Tailwind foram ajustadas manualmente por designers, não geradas por uma única fórmula. Esta ferramenta dá a você uma estrutura comparável gerada a partir de qualquer cor que escolher, útil quando sua cor base não é uma das predefinidas do Tailwind.
Por que minha cor parece quase igual em duas etapas adjacentes?
Isso pode acontecer perto das extremidades muito claras ou muito escuras da rampa, onde a luminosidade percebida muda mais devagar do que a porcentagem numérica sugere (uma propriedade conhecida da percepção humana de cores, não específica desta ferramenta). Escolher menos etapas (7 em vez de 11) espalha mais os valores de luminosidade e reduz amostras quase duplicadas.
Posso usar esses tons diretamente como propriedades personalizadas do CSS?
Sim — copie cada código HEX e cole nas suas variáveis CSS (por exemplo, --color-brand-100 até --color-brand-900), combinando a posição na rampa com a escala de nomenclatura que seu projeto usa.
Devo usar esta ferramenta ou o Misturador de Cores?
Se você está criando versões mais claras e mais escuras de uma única cor — estados de hover, fundos sutis, bordas relacionadas a uma cor de marca — use este gerador de tons. Se em vez disso precisar da cor entre duas cores diferentes (digamos, uma etapa entre seu azul primário e um laranja secundário), use o Misturador de Cores, que interpola os canais RGB de duas cores em qualquer proporção em vez de variar a luminosidade de uma única cor.
O que acontece se minha cor base já é muito clara ou muito escura?
A cor base sempre fica na linha do meio, com matizes subindo até cerca de 95% de luminosidade acima e tons descendo até cerca de 10% abaixo. Se sua base já é quase branca, a metade de matizes da rampa fica comprimida em uma faixa estreita de luminosidade (linhas quase duplicadas) enquanto a metade de tons se espalha amplamente — e vice-versa para uma base muito escura. Para a rampa mais uniformemente espaçada, comece com uma versão de luminosidade média da sua cor (aproximadamente 40-60% de luminosidade).
Ele também pode gerar tonalidades (a cor misturada com cinza)?
Não — esta ferramenta só varia a luminosidade mantendo a saturação fixa, o que produz matizes e tons, mas não tonalidades. Se quiser uma rampa mais suave, dessature primeiro sua cor base (escolha uma versão mais acinzentada no seletor de cor) e gere a rampa a partir dela; cada etapa herdará a saturação mais baixa.