Gerador de tons de cor

Um gerador de tons de cor recebe um hex CSS base e um número de passos e devolve uma escada completa de sombras mais escuras e claros mais luminosos movendo apenas o canal de luminosidade no espaço HSL. O matiz e a saturação permanecem fixos, de modo que azuis de marca continuam azuis e vermelhos de marca continuam vermelhos enquanto as superfícies avançam suavemente do quase preto, passando pela base, até o quase branco. Cadeias hex inválidas e contagens de passos fora do intervalo inteiro permitido são rejeitadas com um erro de validação claro em vez de recorte silencioso.

Como claros e sombras escalonam a luminosidade

Comece com uma cor hex CSS como hash três três seis seis c c ou a forma curta hash três seis c. O analisador expande códigos de três dígitos, coloca os dígitos em minúsculas e converte cada par em inteiros de vermelho, verde e azul de zero a duzentos e cinquenta e cinco.

Esses canais mapeiam para matiz, saturação e luminosidade com as fórmulas padrão CSS e W3C: a luminosidade é a média das frações máxima e mínima do canal, a saturação depende dessa luminosidade e o matiz é medido em graus ao redor da roda de cores, com cinzas acromáticos reportando matiz zero. As sombras não misturam em direção ao preto em RGB; elas apenas reduzem o percentual de luminosidade enquanto matiz e saturação permanecem fixos.

Para o índice de passo k de um até a contagem de passos escolhida, cada sombra usa luminosidade igual à luminosidade base vezes um menos k sobre passos, de modo que a sombra mais distante chega ao preto puro com luminosidade zero e a mais próxima fica logo abaixo da base. Os claros elevam a luminosidade em direção ao branco da mesma forma: a luminosidade torna-se a luminosidade base mais a distância restante até cem, escalada por k sobre passos, de modo que o claro mais distante é branco puro.

Depois de conhecida cada nova luminosidade, o mesmo caminho CSS de matiz para RGB converte HSL de volta a canais inteiros e um código hex de seis dígitos em minúsculas. Não há sementes aleatórias, carimbos de relógio nem chamadas de rede, de modo que as mesmas entradas sempre geram a mesma escala ordenada. Formas hex com alfa de quatro ou oito dígitos são rejeitadas porque este contrato é apenas RGB opaco.

Passos não inteiros ou valores fora de um a vinte falham a validação para que os clientes não ultrapassem em silêncio o intervalo permitido.

O que você envia e o que recebe de volta

Envie dois campos: color como string hex e steps como inteiro entre um e vinte inclusive. Cada amostra inclui role, index, step, hex, inteiros r g b, números de matiz saturação luminosidade e strings imprimíveis rgb e hsl. Role é shade para passos mais escuros, base para o original e tint para passos mais claros; step é negativo para sombras, zero para a base e positivo para claros, para que os clientes ordenem ou filtrem sem rederivar a luminosidade.

Uma string formula curta documenta as regras de escalonamento de L para documentação e suporte. Verificações típicas: três passos em hash três três seis seis c c, cinco passos no vermelho puro e confirmar que hex inválido falha a validação. Use o formulário gratuito do navegador para revisões de design e rampas rápidas; chame o contrato idêntico a partir de scripts quando precisar de geração em massa de escalas de tokens.

Mantenha steps no intervalo documentado em vez de confiar em recortes silenciosos — esta ferramenta falha de forma explícita para que sistemas de design permaneçam previsíveis.

Onde as escalas de sombra aparecem no trabalho real

Designers de produto montam rampas completas de UI gerando estados active mais escuros e fundos hover mais claros a partir de um primário de marca sem deslocar o matiz, de modo que uma escada de CTA azul-marinho permanece azul-marinho do pressionado à superfície suave. Revisores de acessibilidade exploram companheiros de cores de texto ou ícones ao longo de uma escada de luminosidade e entregam candidatos a um verificador de contraste em vez de adivinhar meios-tons a olho.

Equipes de marketing produzem pastéis de campanha e acentos profundos a partir de logotipos saturados para banners sociais e cabeçalhos de e-mail preservando a identidade de matiz da marca. Engenheiros frontend programam rampas de sombra em integração contínua para que uma única cor de marca renda uma escada documentada para gráficos, chips, distintivos e botões secundários.

Se mais adiante você precisar apenas de um passo de clareamento, converter HSL para RGB, montar uma paleta análoga ou verificar contraste WCAG, trate-os como intenções de busca e páginas de destino separadas em vez de sobrecarregar esta página de tons.