Estrattore di variabili di colore CSS
Trova ogni colore nel tuo CSS e convertilo in proprietà personalizzate riutilizzabili.
Estrattore di variabili di colore CSS
Incolla un foglio di stile e questo strumento scansiona ogni dichiarazione alla ricerca di valori di colore scritti in hex, rgb()/rgba() o hsl()/hsla(), quindi riscrive le regole per fare riferimento a proprietà personalizzate invece di ripetere lo stesso valore ovunque. È stato costruito per ripulire un foglio di stile che è cresciuto organicamente — un restyling, una fusione di librerie di componenti o CSS estratto da uno strumento di progettazione — dove lo stesso blu finisce per essere scritto una dozzina di modi leggermente diversi.
L'opzione di denominazione controlla come viene denominata ogni variabile: per ordine di prima apparizione (--color-1, --color-2…), per tonalità approssimativa e luminosità (--color-blu-scuro, --color-grigio-chiaro), o per la proprietà su cui appare per la prima volta (--color-background, --color-border). Attiva "combina colori identici scritti diversamente" per unire #ff0000, rgb(255, 0, 0) e hsl(0, 100%, 50%) in una singola variabile anche se il testo sorgente differisce; i valori identici vengono sempre uniti indipendentemente. Il cursore di somiglianza va oltre e unisce le tonalità che sono vicine ma non identiche — utile quando una tavolozza ha accumulato grigi o blu quasi duplicati che nessuno intendeva creare. Scegli se il blocco generato si trova sotto :root o un selettore personalizzato, seleziona la notazione in cui le variabili vengono stampate, o passa a un semplice elenco di colori e conteggi di occorrenza quando vuoi solo un audit invece di una riscrittura.
Lo scanner guarda solo all'interno dei valori di dichiarazione effettivi, quindi non confonde mai un selettore ID come #abcabc con un colore, e lascia commenti, stringhe tra virgolette e contenuti url() completamente intatti. Funzionano sia i terminali di riga Windows che Unix, e lo strumento non viene ingannato da funzioni nidificate come un colore all'interno di un elenco di gradienti.
Tutto viene eseguito localmente nel tuo browser — il tuo foglio di stile non viene mai caricato da nessuna parte, quindi è sicuro incollare codice da un progetto privato. Copia il risultato, scaricalo come file .txt, o reinvia l'output all'input per perfezionarlo con un altro passaggio.