Generatore di Palette di Colori

Scegliere lo schema giusto

Struttura pratica della palette

Una armonia generata è un punto di partenza, non un design system completo. Per una UI in produzione, assegna ai colori nomi di ruolo e non nomi descrittivi: primary, secondary, accent, surface, border, text, success, warning ed error. Aggiungi separatamente i grigi neutri, perché richiedono un controllo più preciso rispetto a un generatore basato sulla tonalità.

Usa i colori HEX generati direttamente in un prototipo, poi mantieni solo quelli che funzionano su schermate reali, sfondi chiari e scuri, stati hover o disabilitati.

Esportazione in variabili CSS

Il passaggio di esportazione usa semplici proprietà personalizzate:

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

Rinomina queste variabili con i nomi del tuo sistema quando le incolli in CSS, nei token del tema Tailwind o in un file di design token.

HEX, RGB e HSL

Input e output visibile usano HEX perché è il formato più rapido da copiare tra CSS, strumenti di design e commenti nei ticket. Internamente, il colore base viene convertito in HSL, poi tonalità o luminosità vengono spostate e il risultato torna in HEX. Se ti servono RGB o HSL, converti i valori HEX generati con un convertitore di codici colore.

Contrasto e accessibilità

Gli schemi di armonia non garantiscono accessibilità. Prima di usare una coppia per testi, controlli o grafici, verificala con un controllore di contrasto:

• Testo normale sul relativo sfondo: minimo 4,5:1 per WCAG AA.
• Testo grande: minimo 3:1.
• Parti UI importanti non testuali, come bordi dei pulsanti, icone, indicatori di focus e bordi dei grafici: minimo 3:1 rispetto ai colori adiacenti.

Non affidarti solo alla tonalità. Due colori possono sembrare diversi in un campione e fallire comunque su testo piccolo, icone sottili o etichette di stato.

Suggerimenti

• Parti da un colore base significativo, per esempio un colore di marca, di prodotto o di campagna già esistente.
• Scegli un colore dominante e usa gli altri come supporto. Dare lo stesso peso a tutti rende molte interfacce troppo affollate.
• Riduci la saturazione sulle superfici grandi, come sfondi di app, pannelli e sezioni hero.
• Ritesta dopo il tema. Una palette che funziona su bianco può fallire in modalità scura o dentro grafici densi.