Generatore di palette colori

Pick a base color and get a harmonious palette instantly. Copy HEX, RGB and CSS values.

Risultato istantaneo Funziona nel browser

Suggerimento: fai clic su qualsiasi campione di colore per copiarne il codice HEX.

Informazioni sul colore

HEX #3B82F6
RGB —
HSL —

Guida all'armonia dei colori

Complementare180°
Analogo ±30–60°
Triadico 3 × 120°
Diviso 150° + 210°
Tetradico 4 × 90°
Monocromatico L: 15–85%

Come si usa?

  1. 1
    Scegli un colore di baseUtilizza il selettore colori o digita direttamente un codice HEX (#RRGGBB).
  2. 2
    Scegli un tipo di armoniaSelect Complementare, Analogo, Triadico or another rule; palette updates instantly.
  3. 3
    Copia i coloriFai clic su qualsiasi campione per copiarne il formato HEX o acquisisci tutti i colori come proprietà personalizzate CSS.

Domande frequenti

Cos'è un colore complementare?
It is the color directly opposite on the color wheel (180°). High contrast — ideal for CTA buttons.
Perché i colori analoghi sembrano armoniosi?
Adjacent colors on the wheel (±30–60°) appear together in nature, perceived as calm and natural.
Quando dovrei usare una tavolozza monocromatica?
Light and dark variations of the same hue create a consistent, sophisticated look.

Generatore di palette colori: armonie da un codice HEX

Questo strumento parte da un colore base in formato HEX, lo converte internamente in RGB e HSL e genera una palette secondo l'armonia selezionata. Il campo accetta codici del tipo #3B82F6; se il valore non rispetta la forma a sei cifre esadecimali, la pagina segnala il codice non valido.

Tipi di armonia disponibili

La modalità complementare combina il colore base con rotazioni sulla ruota cromatica fino a 180 gradi. L'analoga usa variazioni vicine, la triadica usa tre colori distanziati di 120 gradi, split usa due complementari divisi, tetradica produce quattro colori a 90 gradi e monocromatica mantiene la tinta variando la luminosità tra 15% e 75%.

Copia e uso nel CSS

Ogni campione mostra HEX e RGB e può essere copiato con un clic. Puoi anche copiare tutti i colori in sequenza oppure esportarli come variabili CSS --color-1, --color-2 e così via, utili per prototipi, UI kit e temi rapidi.

Controllo pratico del risultato

Generatore palette va usato come generatore operativo: imposti i parametri, controlli l'anteprima e copi solo il risultato che rispetta il formato richiesto. Lo strumento copre armonie colore, HEX/RGB/HSL e variabili CSS; è un punto di partenza da verificare con il contrasto testo-sfondo. Per codice, colori, identificatori, password, JSON o immagini codificate è utile annotare anche le impostazioni usate, perché in un secondo momento potresti dover riprodurre lo stesso risultato o spiegare a un collega come è stato ottenuto.

La maggior parte delle operazioni avviene nel browser dopo il caricamento della pagina, quindi l'uso quotidiano è rapido e non richiede un account. Nonostante questo, evita di incollare segreti di produzione, chiavi API, password reali o dati personali se non sei certo di dove finiranno dopo la copia. Prima di usare il risultato in produzione, provalo nel contesto corretto: il CSS dentro il componente reale, il JSON nel parser dell'applicazione, il QR o il codice a barre con un lettore, la password dentro un gestore sicuro. Questo controllo finale evita molti problemi di compatibilità.

Prima di considerare il risultato definitivo, esegui una prova nel punto in cui verrà usato. Un colore va verificato su sfondo reale, un gradiente con il testo sopra, un JSON nel parser dell'applicazione e un codice QR o a barre con un lettore. Se generi più varianti, scegli quella che rispetta lunghezza, leggibilità, compatibilità della libreria e convenzioni del progetto.

Una verifica ulteriore consiste nel copiare il risultato in un ambiente di prova e controllare caratteri speciali, spazi, lunghezza e resa visiva. Se qualcosa viene trasformato durante la copia, correggi il formato prima di usarlo in un progetto reale.

Commenti