Cos’è un generatore di palette di colori?
Un generatore di palette di colori è uno strumento che suggerisce un piccolo gruppo di colori, di solito da 3 a 6, che stanno bene insieme. Invece di andare a intuito, usa la geometria della ruota dei colori o i colori reali di un’immagine per darti un punto di partenza da regolare.
Una buona palette fa tre cose: crea un’atmosfera (calma, giocosa, premium), offre abbastanza contrasto per testi e pulsanti leggibili e resta coerente tra sito web, post social, packaging e pagina link in bio. Questo generatore ti aiuta in tutte e tre: crea la palette, dà un nome a ogni colore, ne valuta il contrasto con testo bianco e nero e la mostra in anteprima come una vera pagina profilo.
Come usare il generatore di palette di colori
Genera da un colore base
- Nella scheda Genera, scegli un Colore base con il selettore oppure scrivi un codice HEX (di 3 o 6 cifre, con o senza #).
- Scegli un’armonia: Analoghi, Monocromatici, Complementari, Complementari divisi, Triadici, Tetradici o Tonalità. La palette si aggiorna subito con cinque colori.
- Clicca su Palette casuale, o premi la barra spaziatrice, per provare un nuovo colore base casuale con la stessa armonia.
- Clicca su Blocca sotto ogni colore che vuoi tenere. I colori bloccati restano fermi mentre gli altri cambiano.
- Oppure parti da un preset: Matrimonio, Brand, Pastello, Toni terra, Neon o Modalità scura.
Estrai una palette di colori da un’immagine
- Apri la scheda Da immagine e trascina una foto JPG, PNG o WebP (oppure clicca su Prova una foto di esempio).
- Scegli 5 o 6 colori da estrarre. Il colore più dominante viene per primo.
Copia ed esporta
- Clicca su qualsiasi blocco di colore o valore HEX, RGB o HSL per copiarlo.
- Usa Copia variabili CSS, Copia config Tailwind o Copia elenco HEX per il codice.
- Clicca su Scarica PNG (1200 x 630) per un’immagine della palette con nomi e codici HEX, utile per i mood board e da inviare a un cliente o alla tipografia.
- Passa l’Anteprima del link in bio tra Chiaro, Scuro e Colori decisi per vedere come funzionano i colori come sfondo, pulsanti e testo.
Le armonie dei colori spiegate: complementari, analoghi, triadici e altre
Le armonie dei colori sono posizioni fisse sulla ruota dei colori a 360 gradi. Ognuna dà un effetto prevedibile.
| Armonia | Come si costruisce | Effetto | Ideale per |
|---|---|---|---|
| Analoghi | Tinte vicine, circa 20-40 gradi da ogni lato | Calmo, naturale | Brand lifestyle, benessere, fotografia |
| Monocromatici | Una tinta in versioni più scure e più chiare | Pulito, elegante | Siti minimal, lusso, portfolio |
| Complementari | Una tinta più la sua opposta (180 gradi) | Contrasto alto, energico | Pulsanti di invito all’azione, sport, cibo |
| Complementari divisi | Una tinta più le due vicine della sua opposta (150 e 210 gradi) | Vivace ma meno aggressivo | Brand che vogliono contrasto senza stridere |
| Triadici | Tre tinte equidistanti (a 120 gradi l’una dall’altra) | Equilibrato, giocoso | Bambini, istruzione, studi creativi |
| Tetradici | Quattro tinte a 90 gradi l’una dall’altra | Ricco, movimentato | Illustrazione, eventi; fanne dominare una |
| Tonalità | Una tinta da molto chiara a molto scura | Sistematico | Design system di interfacce, dashboard |
L’armonia ti dà le tinte; il generatore varia anche luminosità e saturazione, così ottieni sfondi e colori del testo utilizzabili, non cinque colori ugualmente accesi. Un modo comune per applicare qualsiasi palette è la regola 60-30-10: circa il 60% dello spazio in un colore neutro o principale, il 30% in un colore secondario e il 10% in un colore d’accento per pulsanti ed evidenziazioni.
Come funziona la palette di colori da immagine
Quando carichi una foto, lo strumento ne riduce una copia a circa 120 pixel sul lato lungo, salta i pixel trasparenti e raggruppa i colori rimanenti con il clustering k-means. Il colore medio di ogni gruppo diventa un campione, e i campioni sono ordinati dal gruppo più grande al più piccolo. Il risultato sono i colori che riempiono davvero l’immagine, non solo quelli più brillanti.
Consigli per risultati migliori:
- Ritaglia prima la parte che ti interessa. Uno scatto prodotto con un grande sfondo bianco ti darà il bianco come primo colore. Il ritaglio immagini ti aiuta.
- Prova sia 5 sia 6 colori. Con sei spesso compare un piccolo accento, come un fiore o un’insegna, che con cinque viene fuso con altri.
- Le foto scattate con luce calda al chiuso tendono all’arancione. Se i colori sembrano spenti, prova una foto alla luce del giorno.
- Usa la palette estratta come bozza. Copia i codici HEX, poi passa alla scheda Genera, incolla il tuo preferito come colore base e bloccalo mentre costruisci attorno un set più pulito.
Contrasto dei colori e WCAG: rendere leggibile una palette
Ogni campione mostra due badge: il rapporto di contrasto del testo bianco e del testo nero su quel colore, con un grado WCAG. Le WCAG (Web Content Accessibility Guidelines) misurano il contrasto da 1:1 (nessun contrasto) a 21:1 (nero su bianco).
| Grado | Rapporto | Per cosa va bene |
|---|---|---|
| AAA | 7:1 o più | Testo, caratteri piccoli, tutto |
| AA | 4.5:1 o più | Testo normale ed etichette dei pulsanti |
| AA Large | 3:1 o più | Solo testo grande (circa 24 px, o 19 px in grassetto) e icone |
| Fail | sotto 3:1 | Solo decorazione, mai testo |
In pratica: dai a ogni palette almeno un colore scuro che superi AA sul tuo sfondo chiaro e controlla il colore del pulsante insieme al colore della sua etichetta. Gialli brillanti, verdi chiari e pastelli richiedono quasi sempre testo scuro. I toni medi saturi (molti arancioni e rosa) spesso non passano né con il bianco né con il nero a dimensioni piccole, quindi usali per titoli grandi o sfondi.
Palette di colori per brand, matrimonio e sito web
Palette di colori per il brand
La maggior parte dei piccoli brand ha bisogno di 3-5 colori: un primario (il tuo colore riconoscibile), un accento per pulsanti ed etichette dei saldi, un quasi nero per il testo, un bianco sporco per gli sfondi e magari un grigio neutro. Parti dal colore che hai già (logo, insegna, packaging), bloccalo e mescola un’armonia Complementari divisi o Analoghi per il resto. Una pasticceria artigianale a Bologna potrebbe bloccare un terracotta caldo e costruirci attorno crema, cacao e salvia; una start-up fintech potrebbe bloccare un blu profondo e aggiungere un solo accento brillante.
Palette di colori per il matrimonio
Le palette per il matrimonio di solito abbinano due o tre toni tenui a un colore più profondo di riferimento per testi e fiori. Parti dal preset Matrimonio, oppure carica una foto della location, del tessuto dell’abito o di un bouquet di ispirazione ed estraine i colori. Scarica il PNG e condividilo con decoratore, fiorista, grafico degli inviti e chat di famiglia, così tutti lavorano con gli stessi codici HEX. Per i matrimoni con più eventi, come quelli indiani, crea una palette per ogni momento (verdi e gialli per il mehendi, toni gioiello per il sangeet, pastelli per il ricevimento) con un neutro in comune.
Palette di colori per il sito web
Per un sito o un’app, usa Tonalità o Monocromatici per l’interfaccia (sfondi, bordi, testo) e un solo accento a contrasto per link e pulsanti. Copia le variabili CSS nel tuo foglio di stile o la config Tailwind in tailwind.config.js, poi controlla ogni coppia testo-sfondo con il badge AA. Prova il preset Modalità scura se ti serve anche un tema scuro.
Creator e social media
Una palette coerente fa sembrare feed, miniature e copertine degli highlight un unico brand. Usa gli stessi codici HEX nel generatore di copertine per gli highlight, nel generatore di sfondi e nella tua pagina link in bio.
Codici colore HEX, RGB e HSL: quale copiare
Ogni campione mostra lo stesso colore in tre formati. Clicca su uno qualsiasi per copiarlo.
| Formato | Esempio | Dove si usa |
|---|---|---|
| HEX | #3B82F6 | Canva, Figma, website builder, linee guida del brand; il formato più accettato |
| RGB | rgb(59, 130, 246) | CSS, PowerPoint, Google Slides, editor video |
| HSL | hsl(217, 91%, 60%) | CSS; facile da ritoccare a mano, perché puoi cambiare la luminosità senza cambiare la tinta |
| Variabili CSS | --color-1: #3B82F6; | Da incollare in :root e riutilizzare in tutto il foglio di stile |
| Config Tailwind | palette: { 1: '#3B82F6' } | Progetti Tailwind CSS, usata come bg-palette-1 o text-palette-1 |
Ogni colore riceve anche il nome del colore web standard più vicino (per esempio “Cornflower Blue”), utile quando descrivi una palette a un cliente o alla tipografia. Per la stampa, chiedi alla tipografia di convertire i codici HEX in valori CMYK o Pantone; gli schermi possono mostrare alcuni colori brillanti che l’inchiostro non riesce a riprodurre.
Generatore di palette di colori vs Coolors, Adobe Color e Canva
Esistono diversi buoni strumenti per le palette, e ognuno ha il suo punto forte. Coolors ha reso popolare il gesto “premi Spazio per mescolare” e ha una grande libreria di palette della community. Adobe Color ha una ruota dei colori dettagliata e si collega alle app Adobe. Canva può estrarre i colori da una foto e tenere i colori del brand in un brand kit accanto ai tuoi design.
Questo generatore copre gratis i lavori più comuni, senza account: armonie con blocchi e mescolamento con la barra spaziatrice, estrazione dalle tue foto, gradi WCAG su ogni campione, esportazione CSS e Tailwind, un PNG da 1200 x 630 da condividere e un’anteprima dal vivo del link in bio. Non salva le palette in un account né permette di sfogliare palette della community, quindi copia i codici o scarica il PNG prima di chiudere la scheda.
Le mie foto vengono caricate?
No. Calcoli sui colori, estrazione dalle immagini ed esportazione PNG avvengono tutti nel tuo browser con la canvas API. Le foto che trascini vengono lette in locale e non vengono mai inviate a Biolinko.
Usare la tua palette su una pagina link in bio
L’anteprima a destra mostra la tua palette come pagina profilo in stile Chiaro, Scuro o Colori decisi. Per usarla davvero, crea una pagina Biolinko gratis, apri Design e incolla i tuoi codici HEX nei campi del colore di sfondo, del testo e dei pulsanti. Mantieni la coppia riempimento del pulsante e testo del pulsante almeno ad AA, così ogni visitatore può leggere i tuoi link. Per altre idee di stile, guarda la pagina link in bio per creator.
Aggiornato il 8 ottobre 2026