Trasforma un colore in un sistema 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.
Palette generata
Clicca un colore per copiare il valore HEX. La scala di tonalita e utile per pulsanti, stati, card e superfici UI.
Scala tonalita
Ispettore colore
Visualizza il colore base nei formati pratici. Copia HEX, RGB, HSL e OKLCH per implementazione e documentazione.
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
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 tonalita 500 come colore brand principale e 600/700 per hover e stati attivi.
- Usa le tonalita 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.
Come creare una palette accessibile
Parti da un colore brand, scegli un'armonia, verifica il contrasto del testo ed esporta i token.