Gerador de pontos de cor para gradientes

O gerador de pontos de cor para gradientes transforma duas cores das extremidades em uma sequência completa e previsível para CSS, tokens de design, gráficos, canvas e arte programática. Informe uma cor inicial, uma cor final e o número total de pontos. O resultado inclui as duas extremidades e todas as cores intermediárias, cada uma associada à sua posição percentual.

Crie uma lista completa a partir de duas extremidades

Um gradiente costuma começar com uma instrução simples de design: passe de uma cor da marca para outra usando determinado número de etapas. Transformar essa instrução em dados reutilizáveis pode ser trabalhoso quando cada cor intermediária e cada posição precisam ser calculadas de maneira consistente. Este gerador recebe uma cor hexadecimal inicial, uma cor final e o número total de pontos desejado.

Ele inclui o início em zero por cento e o fim em cem por cento, distribuindo todos os demais pontos em intervalos percentuais iguais. Cada resultado é normalizado para a notação hexadecimal de seis dígitos em letras maiúsculas; assim, uma entrada abreviada como #f00 ainda gera o valor estável #FF0000. O array retornado pode ser mapeado diretamente para gradientes CSS, definições SVG, código canvas, configurações de gráficos ou um processo de geração de tokens.

Como a quantidade inclui as duas extremidades, solicitar cinco pontos significa receber posições em 0, 25, 50, 75 e 100 por cento. Essa convenção deixa claro o tamanho da resposta e evita adições ocultas que poderiam quebrar a indexação posterior do array.

Entenda o método de interpolação determinístico

As cores são interpoladas separadamente nos canais vermelho, verde e azul. Em cada posição, o gerador calcula a distância proporcional do valor inicial até o valor final do canal e arredonda o resultado para o inteiro válido mais próximo, de 0 a 255. Esse método é normalmente chamado de interpolação RGB linear.

Ele foi escolhido por ser direto e reproduzível: não há aleatoriedade, consulta a perfil de cor, dependência de renderização do navegador nem serviço externo. As posições percentuais vêm do índice do ponto dividido pelo número de intervalos, e decimais periódicos são arredondados para seis casas. Isso produz posições úteis em uma quantidade como quatro, na qual os pontos centrais aparecem em 33.333333 e 66.666667 por cento, sem exibir artefatos incômodos de ponto flutuante.

O RGB linear não é apresentado como um modelo de cor perceptualmente uniforme; etapas numéricas iguais podem não parecer igualmente claras.

Valide as entradas e integre os pontos retornados

Os dois campos das extremidades aceitam três ou seis dígitos hexadecimais e podem conter uma cerquilha inicial. Espaços ao redor do valor são removidos, mas espaços internos, canais alfa, nomes de cores e caracteres não hexadecimais são rejeitados. A quantidade precisa ser um número inteiro real entre 2 e 256.

Exigir pelo menos dois pontos garante posições significativas para as duas extremidades, enquanto o limite máximo mantém previsíveis o tamanho da saída e o tempo de execução. Uma resposta bem-sucedida repete as extremidades normalizadas, informa a quantidade validada e fornece um array stops cujos registros contêm os campos color e percentage. Você pode combinar esses registros em um valor CSS linear-gradient, armazená-los como tokens de design, inseri-los em uma lista de pontos SVG ou usar os percentuais como marcos normalizados em outro renderizador.

Os registros das extremidades são calculados pelo mesmo algoritmo limitado que trata os valores intermediários, e a aritmética inteira no numerador do canal reduz desvios desnecessários de ponto flutuante.