Grafica / Colore

Generatore di palette di colori: schemi armoniosi in un clic

Genera palette di colori basate sulla teoria del colore: analoghe, complementari, triadiche, a complementari divisi, monocromatiche o casuali, da tre a otto colori. Blocca quelli che preferisci e rigenera gli altri, verifica il contrasto di ogni colore con il bianco ed esporta la palette come variabili CSS, configurazione Tailwind, JSON, codici esadecimali o PNG.

Generatore di palette di colori: schemi armoniosi in un clic: Ogni palette parte da una tonalità di base, presa da un colore bloccato se ne hai selezionato uno, e posiziona le altre tonalità secondo la regola scelta: incrementi di 30° per i colori analoghi, la tonalità opposta per i complementari, incrementi di 120° per i triadici, 150° su entrambi i lati per i complementari divisi oppure un'unica tonalità dal più scuro al più chiaro per i monocromatici. Luminosità e saturazione variano per creare un insieme con elementi chiari, intermedi e scuri, e ogni colore mostra il proprio rapporto di contrasto WCAG con il bianco. Funziona al 100% localmente nel browser, senza caricare file sul server.

Categoria: Strumenti per sviluppatori
Esecuzioni: Nel browser
Costo: Gratuito · senza registrazione
Disponibilità: Pronto all'uso

Strumento per palette di coloriElaborazione locale

Funziona interamente nel browser

ArmoniaColori

Oppure premi la barra spaziatrice. Blocca i colori che vuoi mantenere.

#64A6F52.5:1 su bianco

#382B9D10.5:1 su bianco

#772BB77.5:1 su bianco

#BE4BBA4.3:1 su bianco

#E0367B4.2:1 su bianco

Esporta come

:root {
  --color-1: #64a6f5;
  --color-2: #382b9d;
  --color-3: #772bb7;
  --color-4: #be4bba;
  --color-5: #e0367b;
}

Uso di una palette

Una suddivisione comune prevede circa il 60% di un colore neutro, il 30% di un secondo colore e il 10% di un colore d’accento, così il colore più intenso viene usato con parsimonia per pulsanti ed elementi in evidenza.

Contrasto

4,5:1 è il minimo WCAG AA per il testo normale e 3:1 per il testo grande; 7:1 soddisfa il livello AAA.

Come usarlo

Scegli un'armonia e il numero di colori.
Premi Genera o la barra spaziatrice finché non trovi una combinazione che ti piace; blocca i colori che vuoi mantenere.
Copia la palette come codice o scaricala in formato PNG.

Privacy e limitazioni

Tutto viene generato nel tuo browser.

Strumenti correlati

Domande frequenti

Come posso mantenere un colore che mi piace?

Fai clic sul lucchetto del colore. I colori bloccati restano invariati e il primo imposta anche la tonalità di base attorno a cui vengono costruiti gli altri.

Posso usare il colore del mio brand?

Sì: fai clic su un campione per impostarlo su qualsiasi colore, bloccalo e genera gli altri a partire da quello.

Il testo sulla palette è leggibile?

Ogni campione mostra il proprio rapporto di contrasto con il bianco. WCAG richiede almeno 4,5:1 per il testo normale, quindi su un colore al di sotto di questo valore serve un testo scuro.

Strumento gratuito · nel browser esecuzioni · senza account