Generatore di colori analoghi

I colori analoghi si trovano uno accanto all'altro sul cerchio delle tonalità, quindi condividono una famiglia di sottotoni e risultano naturalmente armoniosi in interfacce, sistemi di branding e illustrazioni. Questo generatore prende un colore base esadecimale CSS e un angolo positivo di spostamento della tonalità in gradi, converte la base in HSL, quindi costruisce i due vicini sottraendo e aggiungendo quell'angolo mantenendo fisse saturazione e luminosità. Il risultato è una palette di tre campioni — minus, base e plus — restituita come esadecimale, interi RGB, componenti HSL e un array palette pronto all'uso. La pratica classica del design usa trenta gradi per una famiglia compatta e passi più ampi quando si desidera maggiore separazione senza saltare al contrasto complementare. Codici esadecimali non validi e angoli fuori intervallo falliscono con un chiaro errore di validazione invece di inventare una palette.

Come funzionano gli spostamenti di tonalità analoghi

Si parte da un colore base scritto come stringa esadecimale CSS, ad esempio #3366cc o la forma breve #36c. Il risolutore espande l'esadecimale a tre cifre, analizza i canali rosso, verde e blu nell'intervallo da zero a duecentocinquantacinque e converte quella tripletta RGB in HSL usando le formule standard CSS e W3C, così la tonalità vive in gradi su un cerchio da zero a trecentosessanta mentre saturazione e luminosità sono percentuali. Il parametro angle è un numero positivo di gradi strettamente maggiore di zero e al massimo centoottanta.

I due vicini analoghi si formano spostando la tonalità a tonalità base meno angolo e tonalità base più angolo, ritornando da capo attraverso lo zero quando il percorso attraversa il bordo rosso della ruota, e lasciando invariate saturazione e luminosità affinché la famiglia resti nella stessa banda di crominanza e valore. Ogni tripletta HSL risultante viene riconvertita in RGB intero con lo stesso percorso hue-to-rgb usato dai moduli colore dei browser, quindi formattata come esadecimale minuscolo, stringa rgb() e stringa hsl().

Cosa invia e cosa riceve

Invii un campo color obbligatorio come stringa esadecimale e un campo angle obbligatorio come numero finito di gradi. Le forme di colore valide sono tre o sei cifre esadecimali con un cancelletto iniziale opzionale; le maiuscole vengono ignorate e l'output normalizza sempre a un esadecimale a sei cifre minuscolo con cancelletto. L'angolo deve essere maggiore di zero e al massimo centoottanta, affinché i due vicini restino distinti e non collassino in un ribaltamento in stile complementare di centoottanta gradi, che sarebbe un'intenzione armonica diversa.

I controlli tipici includono un blu medio #3366cc con un angolo di trenta gradi per una classica famiglia fredda, il rosso puro #ff0000 con trenta gradi per vicini arancio caldo e magenta, e un esadecimale breve a tre cifre per confermare l'espansione.

Dove compaiono le palette analoghe nel lavoro reale

I product designer costruiscono stati dei componenti, serie di grafici e gradienti hero per il marketing che richiedono tonalità correlate senza l'alta tensione delle coppie complementari; un angolo fisso mantiene i token riproducibili tra i design system. I team di brand derivano colori secondari e terziari da un esadecimale primario quando una guida di stile fornisce un solo campione ufficiale e desidera comunque una famiglia controllata per illustrazioni e template social.

Gli ingegneri frontend generano proprietà personalizzate CSS e mappe di token in stile Tailwind da un singolo colore seme, così i temi chiaro e scuro restano sulla stessa spina di tonalità mentre altrove cambia solo la luminosità. Gli autori di visualizzazioni dati assegnano colori alle serie che restano distinguibili ma coesi per grafici categorici in cui gli scontri complementari suggerirebbero opposizione invece che raggruppamento.

Docenti e facilitatori di workshop insegnano la teoria del colore con esempi dal vivo: gli studenti inseriscono un esadecimale preferito, provano trenta contro quarantacinque contro sessanta gradi e vedono subito quanto la famiglia cammina intorno alla ruota. Se in seguito le serviranno schemi complementari o triadici, la sola conversione da HSL a RGB, la ricerca del colore CSS nominato più vicino o i controlli di contrasto WCAG, li tratti come intenti di ricerca e landing separati invece di sovraccaricare questa pagina del generatore di analoghi.