Vai al contenuto

Generatore di palette di colori

Genera palette complementari, analoghe, triadiche, complementari divise e monocromatiche a partire da un unico colore di base, con i calcoli HSL eseguiti automaticamente.

Come funziona

Questo generatore di palette prende un colore di base e crea subito cinque varianti basate sulla teoria del colore: complementare, analoga, triadica, complementare divisa e monocromatica. Puoi così esplorare combinazioni armoniose senza calcolare manualmente i valori HSL.

  1. Imposta un colore di base

    Inserisci un codice esadecimale, usa il selettore del campione o fai clic su Colore casuale.

  2. Genera le palette

    Compaiono cinque tipi di armonia, ciascuno in una riga di cinque campioni.

  3. Copia ciò che ti serve

    Fai clic su un campione per visualizzarne il valore esadecimale oppure copia tutto come variabili CSS.

I cinque tipi di armonia

Ogni palette viene creata convertendo il colore di base in HSL (tonalità, saturazione, luminosità) e spostando la tonalità di una quantità fissa sulla ruota dei colori:

  • Complementare: la tonalità direttamente opposta al colore di base, a 180 gradi, per il massimo contrasto.
  • Analoghi: tonalità vicine a quella di base, a 15 e 30 gradi da entrambi i lati, per un aspetto armonioso e rilassante.
  • Triadica: tre tonalità distanziate di 120 gradi, per una combinazione vivace ed equilibrata.
  • Complementare divisa: le due tonalità adiacenti al complementare, a 150 e 210 gradi, offrono un contrasto quasi altrettanto forte ma meno teso.
  • Monocromatica: la stessa tonalità a cinque livelli di luminosità diversi, una scelta sempre sicura e armoniosa.

Usare una palette in CSS

Copia i valori esadecimali e definiscili come proprietà personalizzate, poi usali nel foglio di stile:

--color-primary: #14b8a6; --color-accent: #b84e14;

HSL non è percettivamente uniforme

Queste palette sono calcolate esclusivamente con formule HSL e non tengono conto dell'uniformità percettiva, come fanno spazi colore quali OKLCH o CIELAB. Due colori con la stessa luminosità HSL possono comunque apparire molto diversi per luminosità percepita, quindi verifica i rapporti di contrasto con uno strumento di accessibilità dedicato prima di definire la palette per l'interfaccia.

Domande frequenti

Come si genera una palette di colori partendo da un singolo codice esadecimale?

Inserisci un codice esadecimale, ad esempio #14b8a6, nel campo Colore di base e fai clic su Genera palette. Lo strumento lo converte in HSL, quindi calcola cinque tipi di armonia: complementare, analoghi, triadica, complementare divisa e monocromatica, ciascuno in una riga di cinque campioni. Fai clic su un campione per copiarne il valore esadecimale negli appunti.

Qual è la differenza tra palette complementare e complementare divisa?

Una palette complementare abbina la tonalità di base al colore direttamente opposto sulla ruota dei colori, a 180 gradi, per ottenere il massimo contrasto. Una palette complementare divisa usa le due tonalità adiacenti al punto opposto, a 150 e 210 gradi, creando un contrasto altrettanto vivace ma leggermente più morbido e più facile da bilanciare nel design delle interfacce.

Come si usa in CSS una palette generata?

Copia i valori esadecimali dai campioni e definiscili come proprietà personalizzate CSS, ad esempio --color-primary: #14b8a6; --color-accent: #b84e14;. Usali nel foglio di stile con var(--color-primary). Il pulsante Copia tutte e 5 le palette copia in una volta sola tutti i campioni di ogni tipo di armonia, pronti da incollare in un blocco :root.

Posso partire da un colore casuale per trovare ispirazione per una palette?

Sì. Fai clic sul pulsante Colore casuale per generare un valore esadecimale casuale e calcolare subito tutte e cinque le palette. È utile per esplorare idee per un marchio quando non hai già in mente un colore di partenza.

Qual è un limite della generazione di palette nel browser?

I calcoli della palette si basano esclusivamente su formule HSL e non tengono conto dell'uniformità percettiva, come fanno gli spazi colore OKLCH o CIELAB. I colori con la stessa luminosità HSL possono apparire diversi a livello visivo, quindi verifica sempre i rapporti di contrasto con uno strumento di accessibilità dedicato prima di definire la palette per l'interfaccia.