Palette della pagina
Con i colori ordinati in base a quante volte vengono usati: sfondi, testi, bordi e pulsanti. Ognuno in HEX, RGB e HSL.
Colore
Estrai la palette di colori di qualsiasi sito
Smart Design Inspector estrae la palette di colori di un sito ordinata per utilizzo, con un contagocce per qualsiasi pixel e il contrasto WCAG di ogni coppia di testo e sfondo.
Palette, contagocce e contrasto WCAG: gratis per sempre
Colori · iltuocliente.example
- #FFFFFFrgb 255 255 255Sfondo214
- #0B0B0Brgb 11 11 11Testo188
- #2563EBrgb 37 99 235Pulsanti46
- #E5E7EBrgb 229 231 235Bordi39
- #6B7280rgb 107 114 128Testo27
- #16A34Argb 22 163 74Accento8
- Aa#0B0B0B / #FFFFFF19,68:1AAA
- Aa#FFFFFF / #2563EB5,17:1AA
- Aa#6B7280 / #FFFFFF4,83:1AA
- Aa#16A34A / #FFFFFF3,30:1Solo testo grande
- Aa#9CA3AF / #FFFFFF2,54:1Non conforme
01
Cosa ottieni
3 strumentiContagocce
Per prelevare il colore di qualsiasi punto, anche dalle immagini.
Contrasto WCAG
Di ogni testo con il suo sfondo, con il livello raggiunto (AA o AAA) e un avviso per quelli non conformi.
Il contagocce più usato di Chrome non viene aggiornato da maggio 2024. Questo sta insieme a font, CSS e SEO nella stessa estensione.
02
Provalo in questa pagina
Senza installareUn sito di esempio e il pannello dei colori, senza installare nulla. Vedi la sua palette in HEX, RGB e HSL. Passa il mouse su un testo, o sceglilo dall’elenco, e vedi il suo contrasto con lo sfondo e il livello WCAG raggiunto.
Scegli un elemento
Smart Design Inspector · Colorih1.hero-title
- Testo
- —
- Sfondo
- —
- RGB
- —
- HSL
- —
- Contrasto
- —
- Dimensione
- —
- AA
- —
- AAA
- —
Palette della pagina
—
Sito di esempio · i valori vengono letti da questa pagina
03
Perché il contrasto conta
WCAG 2.2 · AAUn testo grigio chiaro su bianco può sembrare leggibile sul tuo schermo e non leggersi su uno smartphone al sole. Le linee guida WCAG chiedono un contrasto minimo di 4,5:1 per il testo normale (livello AA). L’estensione segnala ogni testo non conforme.
04
Porta la palette nel tuo progetto
Pro · accesso anticipatoCon la Pro esporti i colori insieme alla tipografia e alle spaziature in Tailwind v4 @theme, variabili CSS o DESIGN_SPECS.md. Estrarre il design system
| Gratis0 €per sempre | Pro49 €pagamento unico | |
|---|---|---|
| Palette della pagina ordinata per utilizzo, in HEX, RGB e HSL | ||
| Contagocce per qualsiasi punto, anche dalle immagini | ||
| Contrasto WCAG di ogni coppia di testo e sfondo | ||
| Esportare la palette come variabili CSS o token Tailwind (con la tipografia e le spaziature) | — | Accesso anticipato gratis |
È gratis?
Sì. La palette, il contagocce e il contrasto WCAG sono gratis per sempre.
Estrae i colori dalle immagini?
La palette usa i colori del CSS della pagina. Per prelevare il colore di un’immagine c’è il contagocce.
In quali formati copia i colori?
HEX, RGB e HSL. Con la Pro, anche come variabili CSS o token Tailwind.
Di che livello di contrasto ho bisogno?
Per il testo normale, 4,5:1 (AA). Per il testo grande, 3:1. Per AAA, 7:1 e 4,5:1.
Su quali browser e sistemi funziona?
Su Chrome, Edge, Brave, Arc, Opera e Vivaldi, su Windows, Mac e Linux, dalla 1.0. Funziona allo stesso modo ovunque perché è il browser a eseguire l’estensione, non il sistema. Il codice è pronto per portarla su Firefox e Safari senza riscriverla. Durante lo sviluppo potrebbero esserci cambiamenti.
07
Continua con
Funzioni correlateFont
Famiglia, pesi, origine, licenza e scala tipografica di tutta la pagina.
Font di un sito →Design system
Colori, spaziature e tipografia in Tailwind v4 @theme, variabili CSS o DESIGN_SPECS.md.
Estrarre il design system →Confrontare siti
Salva la scheda di ogni concorrente e confrontale in una tabella esportabile.
Confrontare siti →Lista d’attesa
Sii tra i primi a provarlo
Smart Design Inspector è in fase di sviluppo. Lasciaci la tua email e ti avviseremo il giorno in cui arriverà sul Chrome Web Store, con le 7 funzioni Pro gratis in accesso anticipato.
Un’email il giorno del lancio e poche altre · Disiscrizione con un clic