Generatore di palette di colori

Cosa fa questo generatore

Lancia una palette di cinque colori realmente utilizzabile — non il rumore caotico che ottieni da un puro lancio RGB casuale. Sceglie da un pool curato di palette seed testate dai designer circa due terzi delle volte, e il resto è costruito algoritmicamente usando regole di armonia (analoghe, triadiche, complementari spezzate, tetradiche, complementari con neutri) con intervalli di saturazione e luminosità calibrati per atmosfera. Scegli un'atmosfera — calda, fredda, pastello, vibrante, terra, monocromatica o auto — per orientare l'output verso una sensazione specifica. Blocca qualsiasi colore per mantenerlo durante i nuovi lanci; gli slot sbloccati vengono sostituiti ogni volta.

Come usare il generatore

Scegli un'atmosfera (o lasciala su Auto per un mix). Premi Genera o semplicemente premi Spazio per lanciare una nuova palette. Clicca su qualsiasi codice hex per copiarlo negli appunti. Clicca sull'icona del lucchetto su un colore che vuoi conservare, poi rilancia per sostituire gli altri. Usa Copia CSS per ottenere un blocco :root di proprietà personalizzate pronto da incollare, o Copia JSON per un array di stringhe hex da inserire in un file di configurazione o nell'export di design token.

Cosa rende una palette intenzionale

Cinque colori sono il punto giusto — abbastanza varietà per primario / secondario / accento / neutro chiaro / neutro scuro, ma non così tanti che nessuno domini. All'interno di questi cinque, pianifica una gerarchia: un colore dominante porta il 60% del layout, un secondario prende il 30% e i restanti tre si dividono l'ultimo 10%. L'atmosfera Auto è ottima per la fase di ideazione; Terra e Pastello funzionano bene per brand editoriali e di benessere; Vibrante per prodotti per bambini, gaming e landing page ricche di call-to-action; Monocromatica quando vuoi una rampa di una sola tonalità.

Quando funziona ciascuna atmosfera

Auto — il miglior mix di seed curati e schemi algoritmici; il punto di partenza giusto se non sai ancora cosa vuoi. Calda — palette al tramonto, brand alimentari, campagne di energia e calore. Fredda — fintech, SaaS, qualsiasi cosa che debba trasmettere calma e affidabilità. Pastello — prodotti per bambini, brand di bellezza, sezioni hero morbide. Vibrante — gaming, musica, qualsiasi cosa debba attirare l'attenzione. Terra — outdoor, sostenibilità, agricoltura, immobiliare. Monocromatica — editoriale minimalista, sistemi brand monocolore, design accessibile.

Domande frequenti

Perché i colori non sembrano completamente casuali?

Perché un puro RGB casuale appare orribile — tonalità che stridono, mezzi toni fangosi, nessuna gerarchia. Estraiamo circa due terzi delle palette da un pool curato di seed approvati dai designer (con piccole variazioni di tonalità così non vedi gli stessi cinque colori due volte di fila). L'altro terzo è costruito con regole di armonia e intervalli di saturazione/luminosità testati per l'usabilità. Il risultato sembra ancora casuale, ma ogni lancio è qualcosa che potresti pubblicare.

Posso bloccare un colore e rilanciare gli altri?

Sì. Clicca sull'icona del lucchetto su qualsiasi colore per fissarlo. I colori bloccati vengono mantenuti durante i nuovi lanci; gli slot sbloccati ricevono colori freschi. Questo è il flusso di lavoro che la maggior parte dei designer usa: tieni il colore del tuo brand bloccato e rilancia i quattro circostanti finché qualcosa non funziona.

Le palette funzioneranno per l'accessibilità (WCAG)?

Non automaticamente — la maggior parte delle palette lanciate contiene almeno una coppia che fallisce le WCAG quando usata come testo su sfondo. Usa il risultato come punto di partenza, poi controlla specifiche combinazioni testo/sfondo con il nostro strumento Verifica Contrasto. Se una palette è per immagini di marketing (non testo), hai più flessibilità.

Come esporto verso il mio strumento di design?

Copia CSS emette un blocco :root { --color-1: #...; } pronto da incollare in un foglio di stile. Copia JSON emette un array di stringhe hex — utile per plugin Figma, JSON di design token, o qualsiasi file di configurazione. Per Tailwind, incolla il JSON nel tuo tailwind.config.js sotto theme.extend.colors.

Cosa genera effettivamente "Monocromatica"?

Cinque toni della stessa tonalità — stesso valore H, stessa S, con L scaglionata da 0,92 (molto chiaro) fino a 0,18 (molto scuro). Il risultato è una rampa monocromatica completa adatta a un sistema di brand monocolore o a una palette di superfici neutre. Blocca il colore centrale sul colore del tuo brand, poi rilancia per variare la saturazione mantenendo la stessa forma di luminosità.

Viene inviato qualcosa a un server?

No. Il pool di seed, la matematica dell'armonia e le azioni di copia girano tutti nel tuo browser. Apri DevTools → Network e rilancia — non parte alcuna richiesta. Lancia palette per prodotti non ancora rilasciati senza far trapelare nulla.

Generatore di palette di colori