Schiaritore di colore

Uno schiaritore di colore prende un codice hex CSS e una percentuale, poi restituisce una versione più chiara alzando solo il canale di luminosità nello spazio HSL. Tonalità e saturazione restano uguali, così i blu di marca restano blu e i rossi restano rossi, mentre la superficie si ammorbidisce per stati hover, sfondi e tinte accessibili. La quantità è una percentuale del margine residuo tra la luminosità attuale e il bianco puro: zero per cento lascia il campione invariato, cento per cento produce bianco puro e i valori intermedi scalano in modo fluido. Le stringhe hex non valide e le percentuali fuori da zero a cento vengono rifiutate con un errore di validazione chiaro anziché essere ritagliate in silenzio.

Come funziona lo schiarimento in HSL

Parta da un colore hex CSS come #3366cc o la forma breve #36c. Il parser espande i codici a tre cifre, mette le cifre in minuscolo e converte ogni coppia in interi rosso, verde e blu da zero a duecentocinquantacinque.

Quei canali sono mappati 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. Schiarire non mescola il colore verso il bianco in RGB; alza solo la percentuale di luminosità mentre tonalità e saturazione restano fisse.

La nuova luminosità è la vecchia più la distanza residua fino a cento, scalata dalla quantità su cento. Con amount zero la formula è identità pura; con amount cento il risultato è bianco puro con luminosità cento; con amount venti un blu di tono medio avanza del venti per cento dalla luminosità attuale verso il bianco. Nota la nuova luminosità, lo stesso percorso CSS da tonalità a RGB riconverte HSL in canali interi e un codice hex a sei cifre in minuscolo.

Non ci sono semi casuali, timestamp né chiamate di rete, quindi gli stessi ingressi danno sempre la stessa uscita. Le forme hex con alfa a quattro o otto cifre sono rifiutate perché questo contratto è solo RGB opaco. Le percentuali sotto zero o sopra cento falliscono la validazione così i client non superano in silenzio l'intervallo consentito.

Cosa invia e cosa riceve in risposta

Invii due campi: color come stringa hex e amount come numero finito tra zero e cento inclusi. In caso di successo la risposta riecheggia il colore normalizzato a sei cifre e l'amount ripulito, poi fornisce i campioni original e result. Ogni campione include role, hex, interi r g b, numeri di tonalità saturazione luminosità e stringhe stampabili rgb e hsl.

Una breve stringa formula documenta la regola L prime per documentazione e supporto. Controlli tipici: schiarire #3366cc del venti per cento, schiarire il rosso puro del cinquanta per cento e confermare che amount zero restituisce l'hex originale. Usi il modulo gratuito del browser per revisioni di design e tinte rapide, poi chiami lo stesso contratto dagli script quando serve generazione massiva di token hover o scale di tema.

Tenga amount nell'intervallo documentato invece di affidarsi a ritagli silenziosi — questo strumento fallisce in modo esplicito affinché i design system restino prevedibili.

Dove gli schiaritori di colore compaiono nel lavoro reale

I product designer costruiscono stati hover e active schiarendo i primari di marca senza spostare la tonalità, così uno schiarimento del venti per cento di un CTA navy resta navy invece di sbiadire verso grigio o ciano. I revisori di accessibilità esplorano compagni più chiari di colori di testo o icona con sfondi scuri, poi passano i candidati a un verificatore di contrasto invece di indovinare i mezzitoni a occhio.

I team marketing producono campioni pastello di campagna da loghi saturi per banner social e intestazioni e-mail preservando l'identità di tonalità del marchio. Gli ingegneri frontend programmano rampe di ombra in integrazione continua così un solo colore di marca produce una scala documentata di passi più chiari per grafici, chip e pulsanti secondari.

Se in seguito ha bisogno di scurire un colore, convertire HSL in RGB, costruire una palette analoga o verificare il contrasto WCAG, li tratti come intenti di ricerca e landing separati invece di sovraccaricare questa pagina di schiarimento.