Generatore di stop colore per gradienti

Il generatore di stop colore per gradienti trasforma due colori estremi in una sequenza completa e prevedibile per CSS, token di design, grafici, canvas e opere programmatiche. Lei indica un colore iniziale, uno finale e il numero complessivo di stop. Il risultato comprende entrambe le estremità e tutti i colori intermedi, ciascuno abbinato alla propria posizione percentuale.

Crei un elenco completo da due colori estremi

Un gradiente nasce spesso da una semplice indicazione grafica: passare da un colore del marchio a un altro mediante un determinato numero di passaggi. Trasformare tale indicazione in dati riutilizzabili può diventare laborioso quando ogni colore intermedio e ogni posizione devono essere calcolati in modo coerente. Questo generatore riceve un colore esadecimale iniziale, un colore finale e il numero complessivo di stop desiderato.

Inserisce l’inizio allo zero per cento e la fine al cento per cento, quindi distribuisce tutti gli altri stop a intervalli percentuali uguali. Ogni risultato viene normalizzato nella notazione esadecimale maiuscola a sei cifre; pertanto, anche una forma abbreviata come #f00 produce il valore stabile #FF0000. L’array restituito è pronto per essere convertito in gradienti CSS, definizioni SVG, codice canvas, configurazioni di grafici o processi di generazione dei token.

Poiché il conteggio comprende entrambe le estremità, richiedere cinque stop significa ottenere le posizioni 0, 25, 50, 75 e 100 per cento. Questa convenzione rende evidente la dimensione della risposta ed evita aggiunte nascoste che potrebbero alterare gli indici usati successivamente.

Comprenda il metodo di interpolazione deterministico

I colori vengono interpolati separatamente sui canali rosso, verde e blu. Per ogni posizione, il generatore calcola la distanza proporzionale dal valore iniziale a quello finale del canale e arrotonda il risultato al numero intero valido più vicino, compreso tra 0 e 255. Questo procedimento è comunemente chiamato interpolazione RGB lineare.

È volutamente diretto e riproducibile: non intervengono casualità, consultazioni di profili colore, dipendenze dal rendering del browser o servizi esterni. Le posizioni percentuali derivano dall’indice dello stop diviso per il numero di intervalli, mentre i decimali periodici vengono arrotondati a sei cifre. Con quattro stop, ad esempio, le posizioni centrali risultano 33.333333 e 66.666667 per cento, senza mostrare fastidiosi artefatti in virgola mobile.

L’RGB lineare non viene presentato come un modello cromatico percettivamente uniforme: passaggi numerici uguali possono non apparire altrettanto luminosi.

Convalidi l’input e integri gli stop restituiti

Entrambi i campi delle estremità accettano tre o sei cifre esadecimali e possono includere un cancelletto iniziale. Gli spazi intorno al valore vengono rimossi, mentre spazi interni, canali alfa, nomi di colori e caratteri non esadecimali vengono rifiutati. Il numero di stop deve essere un vero intero compreso tra 2 e 256.

Il minimo di due garantisce che entrambe le estremità abbiano posizioni significative, mentre il limite superiore mantiene prevedibili la dimensione dell’output e il tempo di esecuzione. Una risposta valida ripete le estremità normalizzate, riporta il conteggio convalidato e fornisce un array stops i cui record contengono i campi color e percentage. Lei può unire tali record in un valore CSS linear-gradient, salvarli come token di design, inserirli in un elenco di stop SVG o usare le percentuali come riferimenti normalizzati in un altro renderer.

Lo stesso algoritmo limitato calcola i record estremi e quelli intermedi, mentre l’aritmetica intera nel numeratore del canale riduce derive in virgola mobile non necessarie.