Generatore di armonie cromatiche
Dettagli tecnici
Come funziona il Generatore di Armonie di Colore
Cosa fa lo strumento
Il Generatore di Armonie di Colore calcola insiemi di colori matematicamente correlati a partire da una singola tonalità di base: complementare, analoga, triadica, tetradica, quadrata, complementare divisa, monocromatica e sfumature. Ogni palette viene resa con valori HEX, RGB e HSL che puoi copiare con un clic e usare direttamente in CSS o nei design token.
Casi d’uso comuni per sviluppatori
I designer prototipano palette di brand esplorando come una tonalità del marchio evolve con diverse regole di armonia. Gli sviluppatori frontend ricavano colori di accento per pulsanti, avvisi e badge a partire da un colore primario del brand. Gli ingegneri di data visualization scelgono set di colori categoriali che sembrano intenzionali ma restano distinguibili. I product manager confrontano opzioni di palette durante la revisione di proposte di design senza bisogno di strumenti di design dedicati.
Formati, tipi o varianti dei dati
Sono disponibili otto schemi: Complementare (base + 180°), Analoga (base ± 30°), Triadica (3 colori distanziati di 120°), Tetradica (rettangolare a 4 colori), Quadrata (4 colori distanziati di 90°), Complementare divisa (base + ±150°), Monocromatica (stessa tonalità con luminosità variabile 10–90%) e Sfumature (stessa tonalità, da scuro a chiaro). Ogni colore include le sue rappresentazioni HEX, RGB e HSL insieme a un’etichetta di ruolo.
Errori comuni e casi limite
Le armonie derivate da colori di base estremamente desaturati o quasi in scala di grigi risultano indistinguibili tra gli schemi: parti da una base satura. Basi molto sature combinate con schemi triadici o tetradici possono produrre palette troppo “forti” e difficili da bilanciare; valuta di ridurre la saturazione per l’uso in UI. Alcuni abbinamenti derivati dalle armonie non rispettano il contrasto WCAG: verifica sempre le coppie testo/sfondo nello strumento Color Contrast prima di pubblicare.
Quando usare questo strumento rispetto al codice
Usa lo strumento nel browser per ideazione, esplorazione rapida e revisione del design. Nel codice, librerie come chroma.js, colord o culori ti permettono di calcolare le armonie in modo programmatico, integrarle nelle pipeline di build dei design token e combinare la matematica delle armonie con spazi colore percettivamente uniformi come Oklch per palette dall’aspetto più uniforme.