Generatore di palette colori
Genera palette armoniche da un colore base usando regole complementari, analoghe, triadiche e monocromatiche.
Cosa copre questa pagina
Questa pagina spiega il flusso di lavoro e collega direttamente alla sezione corretta dello strumento principale Chromaforge.
- Genera palette da un colore base.
- Controlla il contrasto prima di pubblicare testo UI.
- Esporta CSS, Tailwind, SCSS, JSON, SVG e PNG.
- Funziona localmente nel browser.
Come funziona il generatore di palette
Parti da un colore base — il tuo brand color, un hex trovato su una foto, o anche solo un'idea — e Chromaforge calcola automaticamente le varianti armoniche basandosi sulle relazioni angolari nella ruota dei colori HSL.
Complementare: il colore esattamente opposto a 180° sul cerchio cromatico. Crea contrasto forte, ottimo per CTA su sfondi neutri. Da usare con parsimonia: una coppia complementare pura stanca la vista se usata in grandi aree.
Analogo: tre colori adiacenti (±30° e ±60°). Risultato naturale e rilassante, típico dei design ispirati alla natura. Funziona bene per interfacce long-form dove serve poca tensione visiva.
Triadico: tre colori equidistanti a 120° l'uno dall'altro. Palette vivace con buon equilibrio. Il trucco è usare uno dei tre come dominante (60% delle superfici), uno come secondario (30%) e il terzo solo come accento (10%).
Monocromático: varianti in luminosità e saturazione dello stesso hue. È l'approccio più sicuro per chi non vuole rischiare: difficile sbagliare, facile scalare a sistemi di design complessi con toni 50-950.
Esempi pratici
- Rebranding: hai il colore primario approvato dal cliente, ti servono secondario e accento. Il generatore triadico ti dà tre opzioni testate in 10 secondi.
- Landing page: usa una palette analoga per sfondo, sezioni e card — niente conflitti, massima coerenza.
- Sistema di design: genera la scala monocromatica e avrai subito i toni per testo, bordi, sfondi e stati hover/active.
- Illustrazione UI: la palette complementare divisa (split-complementary) riduce la tensione del complementare puro mantenendo l'energia visiva.
FAQ — Palette colori
Quanti colori dovrebbe avere una palette UI?
Una palette operativa per una UI contiene di solito 1-2 colori brand, 1 colore di accento, più una scala neutra (grigi) con 6-10 step. Più colori brand di 2-3 rendono difficile mantenere coerenza. La scala neutra è spesso la parte più usata e la più sottovalutata.
Qual è la differenza tra palette armonica e palette generativa?
Una palette armonica usa regole colore (complementare, triadico ecc.) per garantire relazioni percettivamente piacevoli. Una palette generativa parte da dati o algoritmi senza vincoli estetici precisi. Per interfacce digitali, quella armonica è quasi sempre la scelta giusta.
Come scelgo il colore base se parto da zero?
Considera il settore (blu per finanza/tech, verde per salute/natura, arancione per energia/creatività), poi affina guardando i competitor per differenziarti leggermente senza uscire dalle aspettative del settore. Infine testa la variante scura del colore: deve funzionare come colore testo su sfondo bianco con rapporto 4.5:1.
La palette generata funziona in dark mode?
Non automaticamente. In dark mode, i toni medi di solito diventano insufficienti come testo (contrasto troppo basso) e i toni chiari vanno usati come testo invece che come sfondo. Dopo aver generato la palette, verifica ogni coppia con il controllo contrasto WCAG.
Posso usare la palette esportata direttamente in Figma?
Sì. Chromaforge esporta in formato JSON compatibile con i Tokens Studio per Figma (ex Figma Tokens). Puoi anche copiare il blocco CSS con le custom properties e usarlo direttamente in un file di variabili del progetto.