Colori da un URL
Estrattore di colori da sito web
L'Estrattore di colori da sito web legge l'HTML e il CSS di un sito web dal suo URL e restituisce la palette di colori del sito: il colore del brand, gli accenti, gli sfondi, il testo e i bordi, con la variabile CSS e la quota d'uso di ogni colore.
- Gratis, senza registrazione
- Legge il CSS reale e le variabili
- Nulla viene salvato
Sito bloccato? Incolla il suo HTML o CSS
Come funziona l'estrattore di colori da sito web?
L'estrattore di colori da sito web scarica una pagina e i suoi fogli di stile, legge ogni valore di colore nel codice e ordina i colori in base a dove e quanto spesso la pagina li usa.
Inserisci un indirizzo
Digita un dominio come example.com o incolla l'URL completo di qualsiasi pagina pubblica. L'estrattore recupera la pagina e fino a 25 dei suoi fogli di stile.
I fogli di stile vengono analizzati
L'estrattore legge ogni sintassi di colore: hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() e i 148 colori con nome. Le variabili CSS vengono risolte nei loro valori.
I colori ricevono un ruolo
La proprietà CSS stabilisce il ruolo di ogni colore: sfondo, testo, bordo, riempimento o ombra. Le regole che corrispondono a elementi della pagina contano tre volte.
Copia la palette
Il colore del brand viene per primo, seguito da accenti, sfondi e colori del testo. Esporta la palette come CSS, Tailwind o design token.
Come trova l'estrattore il colore del brand di un sito?
Il colore del brand è il colore saturo più usato che compare su pulsanti, link o variabili CSS che portano il nome del brand.
- Saturazione. Solo i colori con una croma OKLCH pari o superiore a 0.05 contano come colori del brand o d'accento. I grigi e i quasi grigi contano come neutri.
- Posizione. I colori in selettori come
.btn,button,ae.ctaacquistano peso. - Nome. Variabili come
--primary,--brande--accentacquistano peso. - theme-color. Un valore
<meta name="theme-color">che corrisponde a un colore CSS aggiunge un forte segnale di brand.
| Ruolo | Proprietà CSS |
|---|---|
| Sfondo | background, background-color, gradienti |
| Testo | color, text-decoration-color, caret-color |
| Bordo | border, outline, column-rule |
| Riempimento | fill, stroke, stop-color, accent-color |
| Ombra | box-shadow, text-shadow (elencati, esclusi dalla palette principale) |
Come distingue i colori usati dal CSS inutilizzato?
L'estrattore assegna un peso triplo alle regole CSS i cui selettori corrispondono a elementi nell'HTML della pagina. I framework CSS includono molti colori che una pagina non usa mai, e la corrispondenza dei selettori impedisce a quei colori di superare il design reale.
- I colori di
:hovere:focuscontano a metà peso, perché compaiono solo durante l'interazione. - Le regole
@media printvengono ignorate. - I colori con opacità inferiore al 35% vengono esclusi come sovrapposizioni e velature.
- I colori più vicini di ΔE_OK 0.02 si uniscono in un unico campione che ne elenca le varianti.
L'estrattore trova i colori della modalità scura?
Sì. Le regole dentro @media (prefers-color-scheme: dark) e le regole sotto selettori come .dark o [data-theme="dark"] formano una palette separata per la modalità scura.
Quando l'estrattore risolve una regola scura, i valori scuri delle variabili CSS sostituiscono i valori chiari, quindi la palette scura mostra i colori che un visitatore vede in modalità scura.
Quali colori non può leggere l'estrattore di colori da sito web?
L'estrattore di colori da sito web legge il codice che un server invia, quindi tre tipi di colore restano fuori portata.
- Stili in fase di esecuzione. Le librerie CSS-in-JS inseriscono gli stili dopo il caricamento della pagina in un browser.
- Colori delle immagini. I colori dentro foto, loghi raster e video sono pixel, non CSS. L'estrattore legge separatamente i colori del logo e dell'icona del sito.
- Siti protetti. I siti dietro una protezione anti-bot rifiutano le richieste automatiche.
In questi casi, incolla l'HTML o il CSS della pagina nel riquadro del codice, oppure fai uno screenshot e trascinalo nell'Estrattore di palette di colori. La guida Come trovare i colori usati da un sito web tratta anche i metodi con i DevTools del browser.
Chi usa un estrattore di colori da sito web?
Designer
Analizza i colori del brand attuali di un cliente prima di un redesign, oppure studia la palette di un sito di riferimento.
Sviluppatori
Recupera i token colore e i nomi delle variabili di un sito per ricostruire un tema.
Marketer
Allinea landing page, annunci ed email ai colori del sito web principale.
Revisori dell'accessibilità
Verifica le coppie di testo e sfondo del sito rispetto alle soglie di contrasto WCAG nella scheda Contrasto.
Domande frequenti sull'estrattore di colori da sito web
Perché mancano alcuni colori del sito?
I colori applicati da JavaScript in fase di esecuzione, i colori dentro le immagini e i colori delle pagine protette da login non compaiono nell'HTML e nel CSS che il server invia.
Posso estrarre i colori da un sito che blocca i bot?
Sì, con un'alternativa. Apri il sito nel tuo browser e incolla il suo HTML o un foglio di stile nel riquadro del codice, oppure carica uno screenshot nell'estrattore da immagine.
L'estrattore memorizza i siti web che controllo?
No. Il server recupera la pagina e i suoi fogli di stile per la tua richiesta e non ne conserva alcuna copia. L'analisi dei colori avviene nel tuo browser.
Cosa significa la percentuale accanto a un colore?
La percentuale è la quota del colore nell'uso CSS ponderato della pagina. Misura quanto spesso il codice usa il colore, non quanta area dello schermo il colore copre.
Posso controllare una pagina diversa dalla homepage?
Sì. Inserisci l'URL completo di qualsiasi pagina pubblica, per esempio example.com/pricing.