Scurire colore hex per percentuale

Designer, ingegneri front-end e autori di design system hanno costantemente bisogno di tonalità più scure di un colore di marca per stati hover, bordi, ombre e testo accessibile su sfondi chiari. Indovinare un nuovo hex a occhio è lento e incoerente tra strumenti. Questa capacità accetta un colore hex e una percentuale di scurimento da zero a cento, converte il colore in HSL, moltiplica la luminosità per uno meno tale percentuale, limita il risultato al nero e restituisce l’hex più scuro con dettagli RGB e HSL. Lo zero per cento mantiene il colore originale; il cento per cento produce il nero.

Cosa significa scurire per percentuale in HSL

I colori sul web sono spesso memorizzati come hex o RGB, ma i passi percettivi di tonalità sono più semplici in HSL: la tinta regge il tono, la saturazione la purezza e la luminosità quanto il campione è vicino al nero o al bianco. Scurire di una percentuale significa ridurre la luminosità tenendo fisse tinta e saturazione, così un blu di marca resta blu — solo più profondo.

Questo strumento moltiplica la luminosità corrente per uno meno la percentuale su cento e poi limita il risultato affinché la luminosità non scenda mai sotto zero. Allo zero per cento la luminosità non cambia, quindi l’uscita coincide con l’hex di ingresso normalizzato. Al cinquanta per cento la luminosità è dimezzata.

Al cento per cento la luminosità diventa zero e il risultato è nero puro indipendentemente dalla tinta di partenza. Quel modello relativo corrisponde a come molti token di design scalano gli stati interattivi: un unico token base più un fattore di scurimento per hover o premuto. La sottrazione assoluta di punti di luminosità può sforare su colori già scuri; la scala relativa con limite al nero resta sempre nell’intervallo e non inventa mai una luminosità negativa.

Contratto di ingresso: colori hex e percentuale 0–100

Passi il colore come stringa hex in forma corta o lunga: #RGB o #RRGGBB, con o senza il cancelletto iniziale. Le forme corte si espandono canale per canale, così #F0A diventa #FF00AA prima della conversione. Il campo percent è obbligatorio e deve essere un numero finito tra zero e cento inclusi.

Valori come meno dieci, centouno o testo non numerico vengono rifiutati; la validazione fallita non viene fatturata. In caso di successo la risposta include original come hex normalizzato a sei cifre in maiuscolo, hex come risultato scurito, il percent numerico che Lei ha inviato, rgb con canali interi da zero a duecentocinquantacinque, e hsl con la tinta in gradi e saturazione e luminosità su una scala da zero a cento dopo il passo di scurimento. L’arrotondamento è deterministico, così rieseguire la stessa coppia non deriva.

Usi percent zero per normalizzare ed espandere un hex corto senza cambiare tonalità, o percent cento quando serve un’ancora nera vera derivata dallo stesso percorso di codice degli scurimenti parziali per pipeline di token coerenti.

Per una tinta o tutti gli stati di un pulsante

Per un controllo puntuale — confermare che un blu primario si scurisca in modo pulito per l’hover di un pulsante, o che un passo del venti per cento soddisfi ancora gli obiettivi di contrasto sul bianco — usi lo strumento gratuito nel browser su questa pagina. Non c’è chiamata di rete dentro la trasformazione, né modello, né dipendenza dall’orologio, quindi i risultati sono sicuri al bordo e memorizzabili in cache.

Se già converte i formati con un convertitore di colore separato, lo conservi per i percorsi HEX–RGB–HSL; usi questo scuritore quando l’intento di ricerca è specificamente una tonalità più scura per percentuale. Abbini entrambi in una pipeline se le serve l’export CMYK dopo lo scurimento, ma il passo di scurimento in sé richiede solo hex in ingresso e colore strutturato in uscita con nero limitato al cento per cento.