Generatore di palette di colori
Estrai i colori da un’immagine o componi armonie.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
Clicca su un colore per copiarne il codice
Una palette professionale in pochi secondi
Ogni identità visiva comincia da una palette. Due strade ci portano: partire da un’immagine che porta già l’atmosfera cercata (foto, moodboard, screenshot) ed estrarne i colori dominanti, oppure partire da un colore del brand e costruirne le armonie secondo la teoria del colore.
-
Immagine → palette
Trascina l’immagine: l’algoritmo k-means raggruppa i pixel e rivela i 6 colori dominanti con il loro peso.
-
Colore → armonie
Scegli il colore di base: complementare, analoghi, triade e sfumature si generano all’istante.
-
Esporta
Clicca su un colore per copiarne il codice, o copia l’intero blocco di variabili CSS / Tailwind.
Le armonie in breve
| Armonia | Costruzione | Effetto |
|---|---|---|
| Complementare | 2 colori a 180° | Contrasto massimo, energia |
| Analoghi | 3 colori a ±30° | Morbidezza, coerenza naturale |
| Triadica | 3 colori a 120° | Equilibrio vivace e colorato |
| Sfumature | Stessa tinta, 5 luminosità | Profondità monocroma, gerarchia |
Regola 60-30-10: circa 60 % di colore dominante, 30 % di secondario, 10 % di accento. Verifica anche il contrasto testo/sfondo con il nostro verificatore WCAG.
Domande frequenti
Come vengono estratti i colori dall’immagine?
Con un algoritmo di clustering k-means eseguito nel tuo browser: i pixel vengono raggruppati in 6 famiglie di colori simili, e il centro di ogni famiglia diventa un colore della palette, ordinato per importanza (quota dell’immagine).
Che cos’è un colore complementare?
Il colore diametralmente opposto sul cerchio cromatico (a 180°). La coppia crea il contrasto più forte: ideale per far risaltare un pulsante di call-to-action su uno sfondo.
Analoghi, triade: quando usarli?
Gli analoghi (±30°) danno atmosfere morbide e coerenti — perfetti per gli sfondi. La triade (3 colori a 120°) offre un equilibrio vivace: una dominante, due accenti.
Come uso l’export CSS?
Il blocco generato contiene variabili CSS (--color-1, --color-2…) da incollare nel tuo :root, più l’equivalente per la config di Tailwind. Rinomina le variabili per ruolo (--primary, --accent…) per un codice più leggibile.
La mia immagine viene inviata da qualche parte?
No: l’analisi k-means gira interamente nel browser su una miniatura dell’immagine. Nulla viene trasmesso, anche con foto grandi.