Generatore di schema triadico

Inserisca un codice base come #3498db o la forma breve #abc; lo strumento converte il colore in tonalità, saturazione e luminosità, mantiene fisse saturazione e luminosità e produce tre membri con scostamenti di tonalità di zero, più centoventi e più duecentoquaranta gradi. I team di brand che bilanciano accenti secondari audaci, gli sviluppatori front-end che costruiscono token di tema e gli studenti che imparano l'armonia del colore hanno bisogno di quella stessa mappa triadica deterministica senza aprire una suite di design completa.

Perché tre colori a 120 gradi stanno bene insieme

L'armonia triadica colloca tre tinte ai vertici di un triangolo equilatero sul cerchio di tonalità: ogni colore si trova a centoventi gradi dal successivo, così nessuna tinta domina mentre tutte e tre restano equidistanti. I sistemi di design usano questa struttura quando un brand ha bisogno di un colore primario di identità più due accenti di supporto che restino correlati anziché scelti a caso.

Il generatore implementa il modello classico nello spazio HSL: converte l'hex di ingresso in interi di rosso, verde e blu, mappa quei canali in tonalità in gradi e saturazione e luminosità come frazioni, quindi emette tre colori che condividono la saturazione e la luminosità originali mentre le loro tonalità si collocano all'angolo base, base più centoventi e base più duecentoquaranta, ciascuno avvolto nell'intervallo semiaperto da zero a trecentosessanta.

Mantenere fisse saturazione e luminosità è intenzionale—l'intento di ricerca triadica riguarda la rotazione equilibrata della tonalità, non inventare nuove rampe di valore o croma—così un blu pastello produce compagni pastello e un rosso saturo produce compagni saturi. Quando l'input è quasi grigio, la saturazione è prossima a zero e i tre hex possono sembrare simili; è fisica corretta, non un bug, perché i colori acromatici non hanno tonalità significativa da ruotare.

Gli insegnanti spesso abbinano questo strumento alle lezioni complementari (centottanta gradi) e analoghe (piccoli passi adiacenti) affinché gli studenti vedano come la spaziatura sulla ruota cambia la tensione visiva. La risposta elenca sempre i ruoli primary, secondary e tertiary così la documentazione e le proprietà personalizzate CSS possono mappare in modo pulito a --color-primary, --color-secondary e --color-tertiary senza riordinare a mano.

Consigli pratici, limiti e ricerche correlate

Parta dal colore di brand o di interfaccia di cui si fida già piuttosto che da un punto arbitrario della ruota; il membro primary è la tonalità di ingresso allo scostamento zero dopo l'andata e ritorno HSL, che può differire di un'unità di canale dall'hex originale perché RGB verso HSL verso RGB è quantizzato a canali a otto bit. Non passi forme con alfa come #RRGGBBAA—questa pagina mira solo all'hex classico opaco così le lunghezze non valide falliscono subito.

I colori CSS con nome come tomato sono fuori ambito; li risolva prima in hex o usi una tabella di colori con nome. Scrivendo test unitari, copra almeno un caso vivido a sei cifre, un'espansione a tre cifre, un input quasi grigio e un hex non valido deliberato così sia la matematica dell'armonia sia la validazione restano bloccate. Preferisca questa capacità quando le servono esattamente tre tinte equidistanti da un token hex; se le serve solo lo split dei canali senza armonia, usi un convertitore hex verso RGB.