Scurisci un colore hex in percentuale

Designer, sviluppatori front-end e autori di design system hanno costantemente bisogno di tonalità più scure di un colore del brand per stati hover, bordi, ombre e testo accessibile su sfondi chiari. Indovinare un nuovo hex a occhio è lento e incoerente tra gli 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 quella percentuale e restituisce l'hex più scuro con le scomposizioni in RGB e HSL. Zero percento mantiene il colore originale; cento percento produce il nero.

Cosa significa scurire in 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 (hue) conserva il colore, la saturazione la purezza e la luminosità quanto il campione è vicino al nero o al bianco. Scurire di una percentuale significa ridurre la luminosità mantenendo fisse tinta e saturazione, così un blu del brand resta blu, solo più profondo. Questo strumento moltiplica la luminosità attuale per uno meno quantità su cento.

A zero percento la luminosità è invariata, quindi l'output coincide con l'hex di input normalizzato. A cinquanta percento la luminosità è dimezzata. A cento percento la luminosità diventa zero e il risultato è nero puro indipendentemente dalla tinta di partenza.

Questo modello relativo rispecchia il modo in cui molti token di design scalano gli stati interattivi: un unico token base più un fattore di scurimento per hover o pressed. La sottrazione assoluta di punti di luminosità può eccedere su colori già scuri; la scala relativa resta sempre nell'intervallo e non inventa mai una luminosità negativa.

Contratto d'ingresso: colori hex e la quantità 0–100

Passi il colore come stringa hex in forma breve o lunga: #RGB o #RRGGBB, con o senza il cancelletto iniziale. Le forme brevi si espandono canale per canale, quindi #F0A diventa #FF00AA prima della conversione. Il campo quantità è 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 a sei cifre maiuscolo normalizzato, hex come risultato scurito, la quantità numerica inviata, rgb con canali interi da zero a duecentocinquantacinque, e hsl con tinta in gradi e saturazione e luminosità su scala da zero a cento dopo il passo di scurimento. L'arrotondamento è deterministico, così rieseguire la stessa coppia non produce derive.

Usi quantità zero per normalizzare ed espandere l'hex breve senza cambiare tonalità, oppure quantità cento quando Le serve un vero nero d'ancoraggio derivato dallo stesso percorso di codice degli scurimenti parziali.

Per una prova veloce o una palette intera

Per un controllo una tantum — confermare che un blu primario si scurisca in modo pulito per l'hover di un pulsante, o che un passo del venti percento rispetti ancora gli obiettivi di contrasto sul bianco — usi lo strumento gratuito nel browser in questa pagina. Non c'è alcuna chiamata di rete all'interno della trasformazione, nessun modello e nessuna dipendenza dall'orologio, quindi i risultati sono sicuri sul margine e memorizzabili in cache.

Quando converte già i formati con un convertitore di colori a parte, lo tenga per i round-trip HEX–RGB–HSL; usi questo scurificatore quando l'intento di ricerca è specificamente una tonalità più scura in percentuale. Abbini entrambi in una pipeline se Le serve l'esportazione CMYK dopo lo scurimento, ma il passo di scurimento in sé richiede solo hex in ingresso e colore strutturato in uscita.