Generatore di Colori Analoghi
Scegli un colore di base e un angolo di distanza. Lo strumento mostra il colore di base con una tonalità vicina per lato all’angolo scelto, il classico trio analogo, e aggiunge due tonalità esterne al doppio dell’angolo per creare una palette più ampia di cinque colori. Le palette analoghe sono tra gli schemi classici più armoniosi perché le tonalità vicine condividono una dominante; per questo sono comuni in natura (tramonti, foreste) e nel design editoriale.
Come costruire una palette analoga
-
1
Scegli il colore di base
Incolla un codice hex, un triplet RGB o un valore HSL. I colori saturi a tonalità media danno i set analoghi più ricchi.
-
2
Scegli l'angolo di offset
30° è il classico spazio analogo. 15° dà un set più stretto, quasi monocromatico; 45° inizia ad avvicinarsi al complementare spezzato.
-
3
Regola la variazione di luminosità
Facoltativamente varia la luminosità tra le tre tonalità per evitare una palette piatta. Schiarire le due estremità crea un'atmosfera più morbida e editoriale.
-
4
Esporta i colori
Copia hex, RGB o HSL. Utile per variabili CSS, stili Figma o schede di specifiche per la stampa.
Schemi di colori classici vs. analoghi
| Schema | Relazione angolare | Carattere |
|---|---|---|
| Monocromatico | 0° (stessa tonalità, diversa luminosità/saturazione) | Calmo, unificato |
| Analogico | 30° ai lati | Armonioso, naturale |
| Complementare | 180° di distanza | Alto contrasto, tensione |
| Complementare spezzato | Base + 2 tonalità flanking complementare | Contrasto con sfumatura |
| Triadico | 120° di distanza | Bilanciato, vibrante |
| Tetradico | Due coppie complementari | Ricco, complesso |
Esempi di palette analoghe dalla natura
- Tramonto: giallo → arancione → rosso-arancione (salti di 30° sul lato caldo).
- Foresta: giallo-verde → verde → blu-verde.
- Oceano: blu-verde → blu → blu-viola.
- Autunno: rosso-arancione → arancione → giallo-arancione.
Progettare con un set analogo
- Scegli un colore come dominante (60% della superficie), usa il secondo come accento (30%) e il terzo come evidenza (10%), la regola del “60-30-10”.
- Abbina colori analoghi con un neutro (bianco, nero, grigio caldo) per il testo principale e gli elementi dell’interfaccia.
- Evita di usare tre colori analoghi con saturazione uguale per grandi blocchi, appare fangoso. Varia la luminosità o la saturazione tra le estremità e la base.
Spazi colore e matematica degli angoli
L’offset di 30° è calcolato nello spazio colore HSL o HSV, entrambi trattano la tonalità come un angolo (0-360°). Le operazioni sulla ruota in RGB non funzionano, devi convertire in HSL, ruotare la tonalità e riconvertire. Questo è ciò che lo strumento fa in background. L’output in tutte e tre le notazioni è fornito perché CSS, strumenti di design e flussi di lavoro di stampa preferiscono formati diversi.
Domande frequenti
Monocromatica utilizza una tonalità con diversa luminosità e saturazione (blu notte, blu, azzurro). Analogico utilizza tre tonalità diverse che sono vicine sulla ruota (blu-verde, blu, blu-viola). Analogico ha più varietà visiva.
I colori analoghi possono avere miscele di inchiostro CMYK sovrapposte che riducono il contrasto in stampa. Controlla le versioni con prova a video (soft-proof) e considera di aumentare lo spazio da 30° a 40° per il lavoro di stampa.
Sì, ma mantieni uno dei tre come colore dominante del marchio e relegati gli altri due a ruoli di supporto (badge, accenti). Usare tutti e tre per le azioni principali dell’UI causa confusione, gli utenti imparano ad associare un colore con la principale chiamata all’azione.
I tre colori centrali formano lo schema analogo classico: la tonalità di base e le due vicine all’angolo scelto. I due colori esterni si trovano al doppio dell’angolo e sono opzioni aggiuntive per ampliare la palette. Con la distanza predefinita di 30°, il trio si trova a ±30° e la coppia esterna a ±60°.
Strumenti correlati
Generatore di lettere casuali
Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.
Generatore di Palette di Colori
Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.
Convertitore BBCode in HTML
Converti BBCode (markup per forum) in HTML pulito. Gestisce tag di formattazione, elenchi, citazioni, codice, immagini, link e tabelle.
Generatore di palette colori casuali
Genera palette casuali da 2 a 15 campioni, scegli uno stile vivace, pastello, tenue o scuro e copia codici HEX o variabili CSS.
Convertitore da Base64 a Hex
Converti una stringa Base64 nei suoi byte sottostanti espressi in esadecimale. Utile per ispezionare token, chiavi, certificati e JWT.
Convertitore da ASCII a Binario
Converti qualsiasi stringa ASCII nella sua rappresentazione binaria. Ogni carattere diventa otto bit, separati da spazi, pronti per essere incollati in una traccia di protocollo o nei compiti.