Generatore di ombre colore

Un generatore di ombre colore riceve un hex CSS base e un numero di passi, poi restituisce una scala completa di ombre più scure e chiarori più luminosi muovendo solo il canale di luminosità nello spazio HSL. Tonalità e saturazione restano fisse, così i blu di marca restano blu e i rossi di marca restano rossi mentre le superfici avanzano con dolcezza dal quasi nero, passando per la base, fino al quasi bianco. Le stringhe hex non valide e i conteggi di passi fuori dall'intervallo intero consentito vengono rifiutati con un errore di convalida chiaro invece di un ritaglio silenzioso.

Come chiarori e ombre scalano la luminosità

Parta da un colore hex CSS come hash tre tre sei sei c c o la forma breve hash tre sei c. Il parser espande i codici a tre cifre, porta le cifre in minuscolo e converte ogni coppia in interi di rosso, verde e blu da zero a duecentocinquantacinque.

Quei canali si mappano a tonalità, saturazione e luminosità con le formule standard CSS e W3C: la luminosità è la media delle frazioni massima e minima del canale, la saturazione dipende da quella luminosità e la tonalità si misura in gradi intorno alla ruota dei colori, con i grigi acromatici che riportano tonalità zero. Le ombre non si mescolano verso il nero in RGB; abbassano solo la percentuale di luminosità mentre tonalità e saturazione restano fisse.

Per l'indice di passo k da uno al conteggio di passi scelto, ogni ombra usa luminosità uguale alla luminosità base moltiplicata per uno meno k su passi, così l'ombra più lontana arriva al nero puro con luminosità zero e la più vicina resta appena sotto la base. I chiarori alzano la luminosità verso il bianco allo stesso modo: la luminosità diventa la luminosità base più la distanza restante fino a cento, scalata per k su passi, così il chiarore più lontano è bianco puro.

Dopo ogni nuova luminosità nota, lo stesso percorso CSS da tonalità a RGB riconverte HSL in canali interi e in un codice hex a sei cifre in minuscolo. Non ci sono semi casuali, timestamp di orologio né chiamate di rete, così gli stessi input producono sempre la stessa scala ordinata. Le forme hex alpha a quattro o otto cifre vengono rifiutate perché questo contratto è solo RGB opaco.

Passi non interi o valori fuori da uno a venti falliscono la convalida affinché i client non superino in silenzio l'intervallo consentito.

Cosa invia e cosa riceve in risposta

Invii due campi: color come stringa hex e steps come intero tra uno e venti inclusi. Ogni campione include role, index, step, hex, interi r g b, numeri di tonalità saturazione luminosità e stringhe stampabili rgb e hsl. Role è shade per i passi più scuri, base per l'originale e tint per i passi più chiari; step è negativo per le ombre, zero per la base e positivo per i chiarori così i client possono ordinare o filtrare senza ricalcolare la luminosità.

Una breve stringa formula documenta le regole di scalatura di L per documentazione e supporto. Controlli tipici: tre passi su hash tre tre sei sei c c, cinque passi sul rosso puro e conferma che un hex non valido fallisce la convalida. Usi il modulo gratuito del browser per le revisioni di design e le rampe rapide, poi richiami lo stesso contratto dagli script quando serve generazione massiva di scale di token.

Mantenga steps nell'intervallo documentato invece di affidarsi a ritagli silenziosi: questo strumento fallisce in modo esplicito affinché i sistemi di design restino prevedibili.

Dove le scale d'ombra compaiono nel lavoro reale

I designer di prodotto costruiscono rampe UI complete generando stati active più scuri e sfondi hover più chiari da un primario di marca senza spostare la tonalità, così una scala di CTA blu navy resta blu navy dallo stato premuto alla superficie morbida. I revisori di accessibilità esplorano compagni di colori di testo o icone lungo una scala di luminosità e consegnano i candidati a un verificatore di contrasto invece di indovinare le mezze tinte a occhio.

I team di marketing producono pastelli di campagna e accenti profondi da loghi saturi per banner social e intestazioni e-mail preservando l'identità di tonalità del brand. Gli ingegneri frontend automatizzano rampe d'ombra in integrazione continua così un solo colore di marca rende una scala documentata per grafici, chip, badge e pulsanti secondari.

Se in seguito le serve solo un passo di schiarimento, convertire HSL in RGB, costruire una palette analoga o verificare il contrasto WCAG, li tratti come intenti di ricerca e landing distinte invece di sovraccaricare questa pagina delle ombre.