Vai al contenuto
🛠️
Whiz Tools

Generatore di Tavolozze Colori - Crea Schemi Cromatici Armonici

Generatore gratuito di tavolozze colori che crea istantaneamente bellissimi schemi di colori complementari, analoghi, triadici e monocromatici. Scegli un colore primario e genera tavolozze armoniche per progetti di web design, grafica e branding.

Generatore di Palette Colori Semplice

Seleziona il tipo di armonia

Palette Generata

Seleziona un colore e un tipo di armonia per generare una palette

Informazioni sulle Armonie Cromatiche

Le armonie cromatiche sono combinazioni di colori piacevoli per l'occhio. Creano un senso di ordine e equilibrio nel design.

Tipi di Armonia

  • Complementare: Colori opposti sulla ruota dei colori, che creano un alto contrasto e look vivaci.
  • Analogo: Colori adiacenti sulla ruota dei colori, che creano un design sereno e confortevole.
  • Triadico: Tre colori equidistanti sulla ruota dei colori, che offrono un forte contrasto visivo mantenendo l'armonia.
  • Monocromatico: Diverse sfumature, toni e tinte di un unico colore, che creano un look coerente con variazioni sottili.
Calcolatore di caricamento...
📚

Documentazione

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, dallo 0% (grigio) al 100% (colore puro).
  • Luminosità: quanto il colore è vicino al nero o al bianco, dallo 0% (nero) al 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:

1new_hue = (original_hue + 180) mod 360
2

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à.

1hue ± 30°  and  hue ± 60°
2

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.

1hue + 120°  and  hue + 240°
2

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%.

1lightness ± 15  and  lightness ± 30
2

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

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.
  4. Fai clic su un campione per copiarne il codice esadecimale, oppure usa "Copia tutti i colori" per copiare l'intera tavolozza in una volta sola.

Verifica del contrasto per l'accessibilità

Ogni campione di colore mostra due piccoli badge: uno per il contrasto con il bianco, uno per il contrasto con il nero. Lo strumento calcola un rapporto di contrasto con la formula WCAG (Web Content Accessibility Guidelines):

1contrast ratio = (L1 + 0.05) / (L2 + 0.05)
2

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 badge riporta "AA" quando il rapporto è pari o superiore a 4,5, ovvero il minimo di 4,5:1 del livello AA delle WCAG per il testo di dimensioni normali. In caso contrario mostra "!". Il testo nero su sfondo bianco ottiene un rapporto di 21, il valore massimo possibile.

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 mostra i colori come codici esadecimali, codici di sei cifre preceduti dal simbolo # (ad esempio #FF0000 per il rosso). I codici esadecimali corrispondono direttamente ai valori di rosso, verde e blu, ciascuno da 0 a 255. HSL è un modo alternativo di descrivere gli stessi colori usando tonalità, saturazione e luminosità al posto delle quantità di rosso, verde e blu.

Riferimenti

  1. World Wide Web Consortium (W3C). Web Content Accessibility Guidelines (WCAG) 2.2. WCAG 2.2 — rapporto di contrasto (L1 + 0,05) / (L2 + 0,05), rapporti da 1 a 21 e minimo di 4,5:1 per il testo normale (Success Criterion 1.4.3, livello AA).
  2. World Wide Web Consortium (W3C). CSS Color Module Level 4. CSS Color Module Level 4 — in HSL, la tonalità 0° è il rosso, 120° è il verde e 240° è il blu.