Strumento gratuito nel browser - nessun upload - nessun account

Trasforma un colore in un sistema di design utilizzabile.

Scegli un colore base, genera palette armoniche per UI, controlla il contrasto WCAG, estrai colori da immagini ed esporta token pronti per la produzione.

Apri lo strumento
EnglishItalianoEspañolFrançaisDeutsch

Palette generata

Clicca un colore per copiare il valore HEX. La scala di tonalità è utile per pulsanti, stati, card e superfici UI.

Scala tonalità

Ispettore colore

Visualizza il colore base nei formati pratici. Copia HEX, RGB, HSL e OKLCH per implementazione e documentazione.

#E24B4A

Anteprima visione colore

Simulazioni approssimative per comuni deficit di visione dei colori. Sono anteprime per controlli di design, non diagnosi mediche.

Controllo contrasto WCAG

AA richiede 4.5:1 per testo normale e 3:1 per testo grande. AAA richiede 7:1.

Controllo manuale

Rapporto
--
Testo di interfaccia leggibile

Migliori combinazioni

Controlli automatici su bianco, nero e colori della palette.

Esporta token

Copia variabili CSS, configurazione Tailwind, SCSS, token JSON e card palette SVG/PNG scaricabili.

Scarica card palette
Esporta una card palette 1200x630 condivisibile come PNG o SVG. Utile per documentazione, anteprime social e brand board.
Generata localmente nel browser.


Estrai colori da immagine
Trascina un PNG, JPG o WebP. L'immagine viene elaborata localmente nel browser.


Generatore gradiente
Crea gradienti CSS dalla palette corrente.


Anteprima UI
Un piccolo mockup di interfaccia per verificare che la palette funzioni anche in un contesto reale.


Checklist produzione
Una checklist breve per usare la palette in un sito reale.
  • Usa la tonalità 500 come colore brand principale e 600/700 per hover e stati attivi.
  • Usa le tonalità 50/100 per le superfici, non colori saturi dietro ai paragrafi.
  • Controlla il testo corpo con rapporto minimo 4.5:1 prima della pubblicazione.
  • Testa gli stati UI importanti: hover, disabilitato, successo, avviso ed errore.
  • Mantieni un solo accento forte per conservare coerenza visiva.


Strumenti e guide colore
Pagine dedicate per contrasto, palette Tailwind, variabili CSS, estrazione immagini e gradienti.
Controllo contrasto WCAGVerifica se testo e sfondo rispettano i rapporti di contrasto WCAG AA e AAA.Generatore colori TailwindCrea una scala Tailwind 50-950 da un colore brand.Generatore variabili colore CSSGenera custom properties CSS e design token da una palette colori.Estrattore colori da immagineEstrai i colori dominanti dalle immagini localmente nel browser.Generatore gradienti CSSCrea gradienti CSS lineari, radiali e conici da una palette.Palette colori accessibileProgetta palette che mantengono il testo leggibile e compatibile con WCAG.Generatore palette colori brandCrea una palette brand da un logo o colore primario ed esporta variabili CSS e design token pronti per UI.Generatore palette colori graficiGenera colori distinti per grafici dashboard e data visualization, poi controlla contrasto e rischio daltonismo.Simulatore daltonismo coloriAnteprima palette per deuteranopia, protanopia e tritanopia per trovare combinazioni rischiose prima del rilascio.Convertitore colori HEX, RGB, HSL e OKLCHConverti colori tra HEX, RGB, HSL e OKLCH e copia valori pronti per CSS e documentazione design.Generatore armonia coloriGenera armonie complementari, analoghe, triadiche, split-complementary, tetradiche e monocromatiche.Generatore di palette coloriGenera palette armoniche da un colore base usando regole complementari, analoghe, triadiche e monocromatiche.Generatore sfumature coloreGenera una scala 50-950 da un colore base per superfici UI, bordi, hover e dark mode.Generatore palette dark modeCrea palette dark mode con foreground leggibili, superfici muted, bordi e accenti accessibili.Generatore design tokenCrea design token colore da una palette ed esporta CSS variables, SCSS map, JSON e valori Tailwind.Generatore tema shadcnMappa una palette su variabili CSS stile shadcn per background, foreground, primary, muted, accent e destructive.Generatore schema colori sito webCrea uno schema colori per sito web con colori primari, neutri e accenti per hero, bottoni, card e form.


Come creare una palette accessibile
Parti da un colore brand, scegli un'armonia, verifica il contrasto del testo ed esporta i token.
Complementare o analoga?
La palette complementare usa colori opposti sulla ruota e dà contrasto forte. L'analoga usa tinte vicine e risulta più morbida, adatta a interfacce dense.
Perché conta il contrasto?
Il testo a basso contrasto sta bene nei mockup e diventa illeggibile sullo schermo di chi lo usa davvero. Per il testo di lettura punta almeno a WCAG AA, cioè 4,5:1.
Funziona con Tailwind?
Sì. L'export Tailwind genera la scala del colore primario da 50 a 950, più il colore accento quando c'è.
Le immagini vengono caricate?
No. L'estrazione dei colori usa canvas nel tuo browser. Nessun file esce dal dispositivo.