Scegli un colore, scegli un'armonia, e questo strumento ruota la tinta di quantità fisse per produrre un insieme che sta insieme. Le regole sono ereditate dalla teoria del colore insegnata nelle scuole d'arte, e sono un punto di partenza genuinamente utile. Sono anche aritmetica su uno spazio colore che non modella come vedi, ed è per questo che l'output di solito ha bisogno di un umano dopo.
Cosa sono davvero le armonie
Ogni opzione è un'istruzione sola: ruota la tinta di un numero fisso di gradi. Complementare è 180 — il lato opposto della ruota. Triadica sono due rotazioni da 120, che danno tre colori equidistanti. Split-complementare prende il complementare e si ritrae di 30 gradi da entrambi i lati, il che ammorbidisce lo scontro. Monocromatica non ruota affatto: tiene la tinta e muove invece luminosità e saturazione.
Non sono leggi della percezione. Sono convenzioni nate da pittori che mescolavano pigmenti, e sopravvivono perché producono in modo affidabile insiemi che non stonano — non perché ci sia qualcosa di fisicamente speciale nei 120 gradi. Sapere che sono arbitrarie è ciò che ti permette di abbandonarle quando il risultato sembra sbagliato.
La ruota delle tinte non è uniformemente luminosa
Ecco quello che l'aritmetica non può sapere. Ruota la tinta tenendo la lightness HSL al 50% e non hai tenuto costante niente. Il giallo a quella luminosità raggiunge il 92,8% della luminanza del bianco. Il blu alla stessa impostazione raggiunge il 7,2%. Il giallo emette tredici volte la luce.
Quindi una palette triadica ancorata sul blu produce due compagni che lo appiattiranno visivamente, e una ancorata sul giallo ne produce due che spariscono accanto. I numeri dicono che i tre colori sono ugualmente luminosi. I tuoi occhi non vengono consultati.
È lo stesso difetto che fa venire fangosi i gradienti al centro e che rende #808080 non luminoso la metà del bianco: HSL è stato costruito negli anni Settanta per essere economico da calcolare, e il suo asse di lightness è un pezzo di aritmetica sui canali RGB invece che una misura di luce. Se vuoi una palette i cui membri sembrino davvero pesare uguale, generala qui per i rapporti di tinta e poi sistema la luminosità a occhio — oppure lavora in Oklch, dove tenere costante la luminosità la tiene davvero costante.
Una palette non è un insieme di pari
Il modo più comune di usare male un output come questo è prendere cinque colori e usarli tutti e cinque in volume uguale. Non è una palette, è una rissa. Ogni insieme di colori che funziona in pratica ha una gerarchia: uno dominante, uno di supporto, e il resto come accenti usati con parsimonia.
La vecchia euristica dei designer è 60-30-10: il sessanta percento della superficie nel colore dominante, il trenta nel secondario, il dieci nell'accento. Non è tanto una regola quanto un'osservazione su come tenda a essere fatto il lavoro equilibrato quando lo misuri. Se un design sembra rumoroso e non sai dire perché, misurare le proporzioni è di solito dove sta la risposta.
Significa anche che l'armonia conta meno di quanto si pensi. Quasi due tinte qualsiasi si possono far funzionare se una è desaturata e l'altra no. La maggior parte delle palette professionali è un colore con una gamma di tinte, più un singolo accento che compare su circa un decimo dell'area — che è più vicino al monocromatico che a qualsiasi cosa la ruota genererebbe.
Niente di tutto questo controlla il contrasto
Un'armonia dice che due colori hanno un rapporto di tinta gradevole. Non dice niente su se il testo in uno sia leggibile sull'altro, e sono domande scollegate che la gente confonde abitualmente.
Le coppie complementari lo illustrano bene. Blu e giallo sono complementari e arrivano attorno a 8:1, che va bene per il testo corrente. Rosso e ciano sono complementari anche loro, e atterrano molto più in basso. La ruota non lo sa né le importa: sta misurando la distanza angolare tra tinte, e la leggibilità riguarda la differenza di luminanza.
Quindi genera qui la palette e poi passa ogni coppia su cui intendi mettere testo in un verificatore di contrasto. Le WCAG chiedono 4,5:1 per il testo normale e 3:1 per quello grande. Quel controllo dura due secondi ed è l'unica cosa che risponde alla domanda a cui l'armonia non può rispondere.
Domande frequenti
Viene inviato qualcosa a un server?
No. Questo strumento è marcato "client": le armonie sono aritmetica sulle tinte fatta nella scheda del tuo browser. Non viene trasmesso niente.
Perché i colori della mia palette non sembrano ugualmente luminosi?
Perché non lo sono, e HSL non sa dirtelo. Valori di lightness uguali su tinte diverse producono quantità di luce selvaggiamente diverse: tredici volte tra giallo e blu alla stessa impostazione. La palette ha ragione sui rapporti di tinta ed è muta su tutto il resto. Aggiusta la luminosità a occhio, oppure ricostruiscila in Oklch dove l'asse significa quello che dice.
Quale armonia scelgo?
Monocromatica se hai dubbi, e non è una scappatoia. È la più difficile da sbagliare, sembra voluta, e la maggior parte delle interfacce professionali le è più vicina che a qualsiasi altra cosa: una tinta, una gamma di sfumature, un accento. Ricorri alla complementare quando ti serve che una cosa spicchi nettamente, e alla triadica quando hai tre categorie genuinamente distinte da distinguere e l'energia è il punto.
Di quanti colori ho bisogno?
Meno di quanti pensi. Un neutro, un colore di marca e un accento portano un'intera interfaccia, con le sfumature di ciascuno per gli stati. Dove servono davvero di più è nella semantica — successo, avviso, errore — e quelli si decidono per convenzione invece che per armonia. Nessuno ti ringrazierà per un rosso in palette se non si legge come un errore.
Posso usare questi colori per il testo?
Controlla prima. Un'armonia riguarda la tinta e il contrasto riguarda la luminanza; una palette può essere perfettamente armoniosa e completamente illeggibile. Passa ogni coppia in un verificatore di contrasto e cerca 4,5:1 sul testo corrente. Se il tuo accento fallisce, scuriscilo per il testo e tieni la versione brillante per forme e riempimenti: è la via d'uscita normale, ed è il motivo per cui i design system tendono ad avere due versioni di ogni accento.