Dominante
60%
Anteprima scheda dominante
Dopo il caricamento, qui apparirà la famiglia con la superficie più grande.
Analizzatore rapporto colori 60:30:10
Carica un’immagine per raggruppare colori simili, leggere il rapporto dominante/secondario/accento, confrontarlo con il 60:30:10 e vedere la distribuzione dell’accento.
Analizzatore rapporto colori 60:30:10
Carica immagine
Trascina l’immagine qui o fai clic per caricarla
PNG, JPG, GIF, WebP · Max 10 MB · Analisi solo nel browser
Opzioni di analisi
Se sono presenti grandi aree neutre, come sfondi bianchi o neri, il loro peso viene corretto per non falsare la lettura del colore dominante.
Mostra codici colore
Controlla subito il tuo equilibrio 60:30:10
Carica un’immagine per raggruppare tonalità simili e analizzare la distribuzione dominante, secondaria e d’accento insieme alla posizione dell’accento.
Analisi delle famiglie di colore e della loro distribuzione…
Analisi in attesa
Aderenza 60:30:10
0 pt
Carica un’immagine per vedere subito quale famiglia si avvicina di più al 60 e se il colore d’accento è abbastanza presente.
Dominante in attesa
Secondario in attesa
Accento in attesa
Anteprima analisi
Immagine originale caricata
Carica un’immagine per mostrare qui la vista rappresentativa.
Rapporto target vs reale
Dominante
0%
Secondario
0%
Accento
0%
Impatto dei neutri
0%
Diagnosi del colore d’accento
Concentrazione
In attesa
Riepilogo
Dopo l’analisi vedrai se il colore d’accento si concentra in una zona o si disperde ampiamente.
Qui apparirà la heatmap del colore d’accento.
Famiglie di colore per ruolo
Secondario
30%
Anteprima scheda secondaria
Dopo il caricamento, qui apparirà la famiglia che funziona come strato intermedio.
Accento
10%
Anteprima scheda accento
Dopo il caricamento, qui appariranno la famiglia focale e la sua tendenza di posizionamento.
Gruppi di colori simili
Qui apparirà una palette organizzata per famiglie di tonalità simili.
Interpretazione e suggerimenti di miglioramento
- Carica un’immagine e lo strumento riassumerà automaticamente come avvicinarti di più al 60:30:10.
Tabella di analisi
| Ruolo | Nome famiglia | Proporzione | Codice guida | Commento |
|---|---|---|---|---|
| La tabella si riempirà dopo l’analisi. | ||||
Che cosa osserva lo strumento
- Dominante 60% — La famiglia più grande che definisce il tono di base dell’immagine
- Secondario 30% — Lo strato intermedio tra colore dominante e accento
- Accento 10% — Un colore di piccola superficie ma forte come punto focale
- Concentrazione visiva — Se il colore d’accento si concentra in un punto o si disperde nell’intera immagine
Questo strumento analizza l’immagine esclusivamente nel browser. La regola 60:30:10 non è una legge assoluta, ma un’euristica di design per leggere l’equilibrio visivo; a seconda dell’intenzione della scena, una distribuzione diversa può funzionare meglio.
Che cos’è l’analizzatore del rapporto colori 60:30:10?
L’analizzatore del rapporto colori 60:30:10 raggruppa i colori simili di un’immagine caricata per mostrare quale famiglia cromatica costruisce la base visiva, quale funziona come strato intermedio e quale crea il punto focale. Non si limita a prendere i tre colori più grandi: unisce le sfumature vicine in un’unica famiglia per avvicinarsi di più alla percezione reale dell’immagine.
Il risultato mostra un punteggio di aderenza rispetto alla distribuzione 60% dominante, 30% secondaria e 10% d’accento. In più indica quale famiglia si avvicina di più al 60, se il colore d’accento è troppo debole o troppo forte e se si concentra in una zona oppure si disperde nell’intera immagine. È utile per presentazioni, miniature, illustrazioni, interfacce web e analisi di riferimenti visivi.
Quando usare questo strumento
- Analisi di scene animate — Quando vuoi capire perché una scena appare stabile e dove agisce il colore focale
- Scomposizione di riferimenti di brand o miniature — Quando hai bisogno di scomporre rapidamente la struttura cromatica di un riferimento in percentuali e famiglie di colore
- Revisione di mockup UI — Quando vuoi controllare se il colore d’accento di un pulsante si estende troppo o se dominante e secondario sono separati poco
- Design di poster e banner — Quando vuoi valutare rapidamente se sfondo, aree di supporto e punti d’accento sono distribuiti correttamente
- Studio di color script — Quando vuoi descrivere la combinazione cromatica e il pattern di posizionamento di un’immagine in un linguaggio riutilizzabile
Funzioni principali
- Raggruppamento automatico di tonalità simili — Anche le variazioni più sottili vengono riunite in una stessa famiglia, così il risultato si avvicina di più a ciò che percepisce l’occhio.
- Punteggio di aderenza 60:30:10 — Indica con un punteggio e una frase breve quanto l’immagine si avvicina alla distribuzione ideale.
- Schede per colore dominante, secondario e d’accento — Ogni scheda raccoglie il colore rappresentativo, la proporzione, le caratteristiche e un suggerimento di miglioramento.
- Heatmap del colore d’accento — Mostra a colpo d’occhio se il colore d’accento si concentra in un punto o si disperde nell’intera immagine.
- Modalità di riduzione dell’influenza dello sfondo — Aiuta a correggere la lettura quando uno sfondo bianco o grandi aree neutre alterano il risultato.
- Visualizza codici HEX/RGB/HSL — Converte il codice rappresentativo nel formato desiderato e lo copia subito.
Come si usa
- Carica un’immagine — Carica la scena, la miniatura, il poster o lo screenshot UI che vuoi analizzare.
- Scegli la modalità di analisi — Se l’immagine ha un grande sfondo bianco o nero, conviene lasciare attiva la modalità predefinita di riduzione dell’influenza dello sfondo.
- Controlla punteggio e ruoli — Parti dal valore in alto e dalle proporzioni dominante, secondaria e d’accento.
- Leggi heatmap e suggerimenti — Guarda dove si concentra l’accento e se conviene ridurlo o rafforzarlo.
- Riutilizza i codici — Usa i valori HEX, RGB o HSL mostrati nelle schede e nelle famiglie per il tuo lavoro di design.
Come funziona l’analisi?
Lo strumento riduce prima l’immagine per campionarla, ignora i pixel trasparenti, crea gruppi di colore e poi fonde tra loro le sfumature vicine. Da questi gruppi rappresentativi ricava i ruoli dominante, secondario e d’accento e calcola la superficie occupata da ciascuno.
Il colore d’accento non viene scelto semplicemente come terzo colore più grande. Lo strumento privilegia gruppi più piccoli ma con saturazione e contrasto sufficienti per attirare lo sguardo. Successivamente divide l’immagine in una griglia, misura la distribuzione dell’accento e mostra se il punto focale appare concentrato oppure disperso.
Il risultato è un supporto interpretativo. Non comprende automaticamente narrazione, luce, profondità o intenzione di brand, quindi la decisione finale di design va sempre letta insieme al contesto reale.
Domande frequenti
La regola 60:30:10 va seguita alla lettera?
No. La regola 60:30:10 è un’euristica per valutare rapidamente l’equilibrio visivo. A seconda dell’intenzione della scena, una distribuzione come 70:20:10 o 50:35:15 può essere più adatta. Usa questo strumento come punto di riferimento, non come regola rigida.
Perché raggruppare i colori simili invece di tenere solo i tre più grandi?
In un’immagine reale, una stessa famiglia cromatica contiene spesso molte variazioni di luminosità e saturazione. Se si tengono solo i tre colori più grandi, un azzurro cielo e un blu grigiastro possono sembrare ruoli diversi anche se visivamente appartengono allo stesso blocco. Per questo lo strumento raggruppa le tonalità vicine e offre una lettura più naturale.
Il risultato può sembrare strano su immagini con sfondo bianco?
Sì. Uno sfondo bianco, nero o comunque molto neutro può far sembrare il colore dominante più forte di quanto appaia davvero. In questi casi la modalità predefinita che riduce l’influenza dello sfondo aiuta a riportare il risultato più vicino alla percezione reale.
Come si interpreta la heatmap del colore d’accento?
La heatmap mostra dove il colore d’accento si concentra di più. Se si raccoglie su un lato o attorno a un punto focale, la guida dello sguardo risulta più chiara. Se invece si distribuisce in modo uniforme, il fuoco visivo può indebolirsi. Nelle immagini basate su pattern o texture, una certa dispersione può comunque essere naturale, quindi il risultato va letto nel suo contesto.
L’immagine caricata viene salvata sul server?
No. L’analisi viene eseguita soltanto nel browser e l’immagine caricata non viene salvata sul server. Per questo lo strumento è più adatto anche a bozze sensibili o immagini di lavoro interne.
Non ci sono ancora commenti. Lascia la prima opinione.