Estrai i colori dominanti da qualsiasi foto e crea armonie di design perfette esportabili in CSS e Tailwind.
Dall'ispirazione visiva al codice in 3 passi.
Seleziona qualsiasi foto, screenshot o design che ami.
Il nostro algoritmo estrae i 5 colori dominanti e calcola le loro armonie (Complementari, Triadi).
Clicca per copiare il codice HEX o esporta la configurazione completa per Tailwind CSS.
Tutto ciò che ti serve per il tuo design system.
Non scegliamo solo pixel a caso. Identifichiamo i toni visivamente dominanti dell'immagine.
Blocco creativo? Genera infinite palette in modo casuale con armonie valide in un clic.
Calcola automaticamente colori complementari e analoghi per ogni tono estratto.
Copia l'oggetto JSON esatto da incollare nel tuo file `tailwind.config.js`.
Ottieni variabili CSS (`:root`) pronte da usare in qualsiasi progetto web.
L'analisi avviene nel tuo browser. La tua immagine di ispirazione non viene mai caricata sul cloud.
Come usare queste palette nei tuoi progetti.
Equilibrio matematico per l'occhio umano.
:hover o modalità scure.Controllo totale sulle variazioni di colore.
Zero errori di branding.
Median-cut batte k-means e la media ingenua per l'estrazione di palette.
Bella palette + cattivo contrasto = sito non accessibile.
Scegli il formato adatto al tuo caso d'uso
| Modello Colore | Formato | Esempio | Migliore Per | |
|---|---|---|---|---|
| HEX | #RRGGBB | Copia/Incolla Veloce | Web Design Generale | |
| RGB | rgb(r, g, b) | Manipolazione Digitale | Display a Schermo | |
| HSL | hsl(h, s%, l%) | Regolazione Sfumature | Design System | |
| Tailwind | Oggetto JSON | Configurazione | Sviluppatori Frontend |
Risposte rapide sullo strumento
theme.extend.colors del tuo file tailwind.config.js. Questo crea automaticamente classi come bg-primary o text-accent. --brand-primary, --brand-secondary, ecc. Per la massima fedeltà, lavora dalla sorgente vettoriale originale (SVG) se ce l'hai, dato che la compressione JPG può spostare i colori del logo dell'1-2% per canale.