Generatore di Tavolozze Colori - Crea Schemi Cromatici Armonici

Che cos'è un generatore di tavolozze di colori?

Un generatore di tavolozze di colori è uno strumento che crea un insieme di colori abbinati a partire da un colore iniziale, chiamato colore primario. Questo generatore riceve un colore primario e un tipo di armonia, quindi calcola il resto della tavolozza usando le regole della teoria del colore. I quattro tipi di armonia supportati sono complementare, analoga, triadica e monocromatica.

Come lo strumento crea una tavolozza

Lo strumento converte il colore primario dal codice esadecimale, ad esempio #3B82F6, nel modello di colore HSL. HSL descrive un colore con tre valori:

• Tonalità: la posizione del colore su una ruota dei colori di 360 gradi (0° è il rosso, 120° è il verde, 240° è il blu).
• Saturazione: l'intensità del colore, da 0% (grigio) a 100% (colore puro).
• Luminosità: quanto il colore è vicino al nero o al bianco, da 0% (nero) a 100% (bianco).

Ogni tipo di armonia modifica la tonalità, la luminosità o entrambe, quindi converte nuovamente il risultato in un codice esadecimale.

Come calcolare i colori complementari

La formula:

$h' = (h + 180) \bmod 360$

dove h è la tonalità del colore primario espressa in gradi e h′ la nuova tonalità. L'operazione mod riporta sulla ruota un risultato che supera un giro completo.

La saturazione e la luminosità restano invariate.

Esempio svolto: il blu puro, #0000FF, ha tonalità 240°, saturazione 100% e luminosità 50%. Aggiungendo 180° si ottiene una tonalità di 60°. Convertendo nuovamente in esadecimale la tonalità 60°, con la stessa saturazione e luminosità, si ottiene #FFFF00, un giallo. Pertanto, questo strumento abbina il blu al giallo, non all'arancione.

Questo può creare confusione, perché nelle lezioni d'arte viene spesso insegnata una ruota dei colori diversa, la ruota dei pigmenti RYB (rosso-giallo-blu), in cui l'opposto del blu è l'arancione. Questo strumento usa la ruota HSL basata su RGB degli schermi, quindi le coppie di colori complementari differiscono da quelle della ruota per la miscelazione delle vernici.

Come calcolare i colori analoghi

I colori analoghi si trovano vicino al colore primario sulla ruota. Lo strumento genera due tonalità a 30° e due tonalità a 60° dalla tonalità primaria, tutte con la stessa saturazione e luminosità.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

dove h è la tonalità del colore primario.

Esempio svolto: il blu, #0000FF (tonalità 240°), produce la tonalità 270° (#8000FF), la tonalità 210° (#0080FF), la tonalità 300° (#FF00FF) e la tonalità 180° (#00FFFF). Insieme al colore primario, la tavolozza contiene cinque colori.

Come calcolare i colori triadici

I colori triadici distano 120° l'uno dall'altro sulla ruota e formano un trio equidistante insieme al colore primario.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Esempio svolto: il rosso, #FF0000 (tonalità 0°), produce la tonalità 120° (#00FF00, verde) e la tonalità 240° (#0000FF, blu). L'insieme di tre colori è composto da rosso, verde e blu, le stesse tre tonalità usate come colori primari sugli schermi digitali.

Come calcolare i colori monocromatici

I colori monocromatici mantengono la stessa tonalità e saturazione e modificano solo la luminosità. Lo strumento varia la luminosità di 15 e 30 punti percentuali in entrambe le direzioni, entro i limiti compresi tra 5% e 95%.

$l \pm 15, \qquad l \pm 30$

dove l è la luminosità del colore primario, espressa in punti percentuali.

Esempio svolto: il blu, #0000FF (luminosità 50%), produce luminosità 65% (#4D4DFF), luminosità 35% (#0000B3), luminosità 80% (#9999FF) e luminosità 20% (#000066).

A causa dei limiti di 5% e 95%, un colore primario già molto chiaro o molto scuro può raggiungere lo stesso limite due volte. Il nero, #000000, produce luminosità 15% (#262626), 5% (#0D0D0D), 30% (#4D4D4D) e di nuovo 5% (#0D0D0D), quindi un colore viene ripetuto.

Utilizzo dello strumento

1. Scegli un colore primario con il selettore dei colori oppure inserisci un codice esadecimale come #3B82F6.
2. Scegli un tipo di armonia: complementare, analoga, triadica o monocromatica.
3. Leggi la tavolozza generata. Ogni campione mostra il proprio codice esadecimale su un pulsante.
4. Fai clic su quel pulsante per copiare il codice esadecimale oppure usa "Copia tutti i colori" per copiare l'intera tavolozza in una sola volta.

Verifica del contrasto per l'accessibilità

Ogni campione di colore mostra due piccoli indicatori: uno per il contrasto sul bianco e uno per il contrasto sul nero. Lo strumento calcola un rapporto di contrasto usando la formula WCAG (Linee guida per l'accessibilità dei contenuti Web):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

dove C è il rapporto di contrasto.

L1 è la luminanza relativa del colore più chiaro e L2 è la luminanza relativa del colore più scuro. La luminanza deriva dai valori di rosso, verde e blu del colore. Un indicatore mostra "AA" quando il rapporto è pari o superiore a 4,5, il valore minimo WCAG per il testo di dimensioni normali. Mostra "!" quando il rapporto è inferiore a 4,5. Passando il cursore su un indicatore viene mostrato il rapporto esatto. Il testo nero su sfondo bianco raggiunge un rapporto di 21, il valore massimo possibile.

Lo strumento usa la stessa regola del contrasto per scegliere il colore del pulsante di copia su ogni campione. Confronta il colore del campione con il nero e con il bianco, quindi sceglie quello dei due che offre una migliore leggibilità. Il cambio avviene a una luminanza relativa di circa 0,179, il punto in cui i due rapporti sono uguali.

Domande frequenti

Che cos'è un generatore di tavolozze di colori? È uno strumento che produce un insieme di colori che funzionano bene insieme, partendo da un colore primario e da una regola di armonia scelta.

Perché questo strumento abbina il blu al giallo invece che all'arancione nei colori complementari? Lo strumento ruota la tonalità di 180° sulla ruota HSL, basata sul modo in cui gli schermi mescolano la luce rossa, verde e blu. La ruota dei pigmenti rosso-giallo-blu insegnata nelle lezioni d'arte produce coppie complementari diverse, perché mescola pigmenti invece della luce.

Quanti colori produce ciascun tipo di armonia? L'armonia complementare produce in totale 2 colori, incluso quello primario. Quella triadica ne produce 3. Quella analoga ne produce 5. Quella monocromatica ne produce 5.

Quale modello di colore usa internamente lo strumento? HSL (tonalità, saturazione, luminosità). Converte il codice esadecimale inserito in HSL, esegue i calcoli e poi converte nuovamente il risultato in esadecimale.

Lo strumento verifica se i colori sono accessibili? Sì. Ogni campione mostra se ha un contrasto sufficiente con il bianco e con il nero per superare lo standard WCAG AA per il testo normale, che richiede un rapporto di almeno 4,5.

È possibile usare più di un tipo di armonia per un progetto? Sì. Molti progetti combinano tipi di armonia diversi, ad esempio un insieme di colori analoghi per i colori principali e un colore complementare per un pulsante o un elemento evidenziato.

Formati dei colori

Lo strumento scrive ogni colore generato come codice esadecimale di sei cifre preceduto dal simbolo #, ad esempio #ff0000 per il rosso. I codici esadecimali corrispondono direttamente ai valori di rosso, verde e blu, ciascuno compreso tra 0 e 255. Il colore primario viene mostrato esattamente come è stato inserito, quindi una forma abbreviata a tre cifre come #F00 rimane nel formato breve. I codici a tre cifre indicano lo stesso colore della forma a sei cifre: ogni cifra viene raddoppiata, quindi #F00 equivale a #FF0000. HSL è un modo alternativo di descrivere gli stessi colori usando tonalità, saturazione e luminosità invece delle quantità di rosso, verde e blu.