Generatore di Palette di Colori

Gli schemi di armonia

• Complementare: base + opposto sulla ruota dei colori (180°). Alto contrasto, vibrante. Buono per pulsanti di call-to-action contro un colore del marchio.
• Analoghi: 3-5 tonalità entro 30° l’una dall’altra. Calmo, armonioso, di solito famiglia calda o fredda. Buono per sfondi e illustrazioni con un tema familiare.
• Triadico: 3 tonalità equidistanti (120°). Vibrante e bilanciato. Comune nei prodotti per bambini e nei marchi audaci.
• Split-complement: base + due tonalità ai lati del complementare (150° e 210°). Più ricco del complementare, meno teso.
• Tetradico / quadrato: 4 tonalità a 90°. Più difficile da bilanciare — scegli una come dominante.
• Monocromatico: singola tonalità, saturazione e luminosità variabili. Elegante e coeso; manca di accento a meno che non sia abbinato a un neutro.

Struttura della palette per un lavoro reale

I sistemi di design tipicamente necessitano di:

• Primario (base del marchio)
• Secondario (marchio di supporto)
• Accento (CTA, evidenziazioni)
• Scala neutra (sfondi, testo, bordi — 5-10 grigi)
• Semantico (successo, avviso, errore, info)
• Superficie (sfondi dei pannelli, sovrapposizioni)

Una palette di armonia ti dà primario + secondario + accento. I neutri e i semantici di solito provengono da convenzioni separate (grigi desaturati; tonalità semantiche standardizzate).

Formati di esportazione

Proprietà CSS personalizzate:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Configurazione Tailwind:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

Contrasto e accessibilità

Gli schemi di armonia non garantiscono l’accessibilità. Controlla le combinazioni di palette rispetto ai requisiti di contrasto WCAG:

• Testo del corpo contro lo sfondo: 4.5:1 minimo (AA).
• Testo grande: 3:1.
• Non-testo (pulsanti, icone, anelli di messa a fuoco): 3:1.

Abbina il generatore con il controllore di contrasto per trovare combinazioni conformi.

Suggerimenti

• Inizia con un colore di base definito, non casuale — le armonie sembrano intenzionali quando la base ha significato (il tuo marchio, una foto che ti piace, un riferimento culturale).
• Testa la palette in uso reale: su un pulsante, contro il testo, in un grafico. Apparire bene nei campioni non garantisce che funzioni in un’interfaccia utente.
• Riduci leggermente la saturazione per le palette destinate a superfici grandi — sfondi completamente saturi sono affaticanti.
• Mantieni rari gli accenti: se l’80% di un’interfaccia utente è primario e secondario, usa il colore di accento nel 10% dei punti di contatto (CTA) per massimizzare l’attrazione.