Quante palette genera lo strumento?

Lo strumento genera 9 palette diverse da un singolo colore base: monocromatica, analoga, complementare, triadica, complementare divisa, pastello, scura, tonale (Material Design) e minimalista (stile Apple).

Cos'e una palette monocromatica?

Una palette monocromatica e composta da variazioni di una singola tonalità: tutti i colori condividono la stessa tonalità (H nel modello HSL) e variano solo in luminosità e saturazione. Queste palette sono armoniose e particolarmente adatte ai design professionali.

Cos'e una palette complementare?

Una palette complementare combina il colore base con il suo complementare: il colore opposto nel cerchio cromatico (spostamento di 180 gradi). Questo contrasto e uno dei principi fondamentali della teoria dei colori e produce un effetto vivace e dinamico.

Posso copiare i colori generati?

Sì. Clicca su un colore nella palette per copiare il suo codice HEX negli appunti. Usalo direttamente in CSS, Figma, Adobe o altri strumenti di design.

Cos'e lo spazio colore HSL?

HSL sta per Hue (tonalità), Saturation (saturazione) e Lightness (luminosità). A differenza di RGB, HSL descrive i colori come li percepiamo: la tonalità determina il colore base, la saturazione l'intensita, e la luminosità indica se il colore è chiaro o scuro. Tutte le palette di questo strumento si basano su calcoli HSL.

Qual è la differenza tra triadica e complementare divisa?

Una palette triadica utilizza tre colori equidistanti nel cerchio cromatico (120 gradi di distanza). Una palette complementare divisa utilizza, al posto del complementare diretto, i due vicini del complementare, producendo un contrasto più sottile.

Generatore di palette di colori

Scegli un colore base e genera 9 palette armoniose. Monocromatica, complementare, triadica, pastello, scura e altre - tutti i calcoli vengono eseguiti localmente nel tuo browser.

Palette monocromatica

Tutti i colori hanno la stessa tonalità (H) e variano principalmente in luminosità (L) nello spazio colore HSL.

#0b28ba

hsl(230, 89%, 39%)

#153af2

hsl(230, 89%, 52%)

#4f6bf5

hsl(230, 89%, 64%)

#899cf8

hsl(230, 89%, 76%)

#c3ccfc

hsl(230, 89%, 88%)

Palette triadica

Tre tonalità separate da 120 sulla ruota dei colori (vertici di un triangolo equilatero) una geometria spesso utilizzata nel branding e nei design ispirati al Bauhaus.

#4f6bf5

hsl(230, 89%, 64%)

#f43757

hsl(350, 89%, 59%)

#7ff667

hsl(110, 89%, 69%)

#f87f94

hsl(350, 89%, 74%)

#42f21f

hsl(110, 89%, 54%)

Palette complementare divisa

Una variante della palette complementare: invece di un complemento (180), si usano due colori spostati di circa ±30 dal complemento, riducendo la tensione visiva ma mantenendo un forte contrasto.

#4f6bf5

hsl(230, 89%, 64%)

#f5864f

hsl(20, 89%, 64%)

#bef54f

hsl(80, 89%, 64%)

#f7a176

hsl(20, 89%, 72%)

#b0f328

hsl(80, 89%, 56%)

Palette pastello

La stessa tonalità con saturazione ridotta e luminosità aumentata uno spostamento verso il centro e la parte alta dello spazio HSL che produce colori morbidi e “cremosi”.

#e1e5f4

hsl(230, 45%, 92%)

#d3d7ee

hsl(230, 45%, 88%)

#c4cae9

hsl(230, 45%, 84%)

#b5bde3

hsl(230, 45%, 80%)

#a6b0dd

hsl(230, 45%, 76%)

Palette scura

La stessa tonalità con alta saturazione (S) e luminosità ridotta (L) uno spostamento verso il basso dell’asse di luminosità, che produce colori profondi tipici della dark mode e degli accenti forti.

#3757f4

hsl(230, 89%, 59%)

#153af2

hsl(230, 89%, 52%)

#0c2dd2

hsl(230, 89%, 44%)

#0a25ab

hsl(230, 89%, 36%)

#081d85

hsl(230, 89%, 28%)

Palette tonale (ispirata a Material Design)

Diversi livelli di luminosità di una stessa tonalità L variata e S moderata, simile alle gamme tonali delle linee guida Material Design (es. 50-900).

#f2f3f8

hsl(230, 27%, 96%)

#dcdfef

hsl(230, 36%, 90%)

#b1bae7

hsl(230, 54%, 80%)

#7c8ee9

hsl(230, 71%, 70%)

#3e5df4

hsl(230, 89%, 60%)

Palette minimalista (ispirata ad Apple)

Un accento di colore vivace e diversi neutri molto chiari e delicati, una composizione tipica di interfacce con molto spazio bianco e ombre sottili.

#3e5df4

hsl(230, 89%, 60%)

#fafafa

hsl(230, 6%, 98%)

#efeff1

hsl(230, 6%, 94%)

#dfdfe2

hsl(230, 6%, 88%)

#484951

hsl(230, 6%, 30%)

Palette analoga

Colori con tonalità simili, da circa -30 a +30 intorno al colore base sulla ruota dei colori classica (es. Itten).

#4fbef5

hsl(200, 89%, 64%)

#67a3f6

hsl(215, 89%, 69%)

#4f6bf5

hsl(230, 89%, 64%)

#4637f4

hsl(245, 89%, 59%)

#864ff5

hsl(260, 89%, 64%)

Palette complementare

Il colore base e il suo complemento spostato di 180 sulla ruota dei colori uno dei contrasti fondamentali descritti da Johannes Itten.

#4f6bf5

hsl(230, 89%, 64%)

#1f42f2

hsl(230, 89%, 54%)

#f5d94f

hsl(50, 89%, 64%)

#f8e37f

hsl(50, 89%, 74%)

#f2cf1f

hsl(50, 89%, 54%)

Generare palette da un singolo colore

Il generatore di palette crea 9 palette diverse da un singolo colore base, basandosi sulla teoria dei colori. Ogni palette ha una composizione diversa - dalle variazioni monocromatiche ai colori complementari contrastanti.

Tutti i calcoli si basano sullo spazio colore HSL (tonalità, Saturazione, luminosità). La tonalità determina il colore base, la saturazione l'intensita e la luminosità il carattere chiaro o scuro. Questo modello corrisponde alla percezione umana dei colori e si presta perfettamente alla generazione di palette.

Come usare il generatore

La generazione richiede solo pochi secondi:

1. Scegli il colore base
Inserisci un codice HEX o usa il selettore di colori.
2. Visualizza le palette
Lo strumento genera automaticamente 9 palette con diversi colori armoniosi.
3. Copia i codici HEX
Clicca su un colore per copiare il suo codice HEX. Usalo in CSS, Figma o altri strumenti.

9 tipi di palette - quale si adatta al tuo progetto?

Ogni palette ha un carattere diverso:

Monocromatica
Variazioni di una tonalità in luminosità e saturazione. Elegante, armoniosa, professionale.
Analoga
Colori vicini nel cerchio cromatico. Transizione morbida e naturale.
Complementare
Colore base + colore opposto (180 gradi). Contrasto massimo per design dinamici.
Triadica
Tre colori a 120 gradi di distanza. Equilibrata con forte contrasto visivo.
Complementare divisa
Colore base + i due vicini del complementare. Contrasto più sottile.
Pastello
luminosità elevata, saturazione ridotta. Morbida, ariosa - ideale per design amichevoli.
Scura
luminosità bassa, toni profondi. Professionale - adatta alla modalita scura e ai brand premium.
Tonale (Material Design)
luminosità graduata su una stessa tonalità. Simile al sistema di colori di Google Material Design.
Minimalista (Apple)
Base neutra con un accento colorato. Pulita, moderna - ispirata allo stile Apple.

Esempio: HSL(210, 80%, 50%)

H = 210 gradi (tonalità blu)

S = 80% (intenso)

L = 50% (luminosità media)

Stessa tonalità, luminosità diversa

L: 90% → 70% → 50% → 30% → 10%

Come funziona lo spazio colore HSL

Tutte le palette di questo strumento si basano sullo spazio colore HSL (tonalità, Saturazione, luminosità). A differenza di HEX o RGB, HSL descrive i colori come li percepiamo:

Hue (H) - la tonalità nel cerchio cromatico (0-360 gradi). 0 = rosso, 120 = verde, 240 = blu.
Saturation (S) - l'intensita. 0% = grigio, 100% = colore completamente saturo.
Lightness (L) - la luminosità. 0% = nero, 50% = colore normale, 100% = bianco.

Modificando selettivamente questi valori si ottengono palette armoniose. Le palette monocromatiche variano solo L, le analoghe solo H, e le complementari invertono H di 180 gradi.

Dove usare le palette generate?

identità visiva del brand
Seleziona colori complementari per un logo esistente o costruisci una palette di branding da zero, per biglietti da visita, cancelleria e materiali di marketing.
Siti web
Definisci il colore principale, il colore accento e i toni di sfondo. I codici HEX copiati si incollano direttamente nei fogli di stile CSS o nella configurazione dei temi.
Interfacce di applicazioni
La palette tonale fornisce varianti di luminosità di un colore: più chiare per gli sfondi, più scure per il testo, intermedie per i bordi e gli stati interattivi.
Visual per i social media
Colori coerenti per le pubblicazioni, le storie e le copertine del profilo. Le palette analoghe o pastello funzionano bene per uno stile uniforme e riconoscibile.
Presentazioni e documenti
Insiemi di colori armoniosi per diapositive, grafici e infografiche. Le palette monocromatiche o minimaliste mantengono l'ordine visivo.

Risoluzione dei problemi del generatore di palette

Le palette non cambiano dopo l'inserimento di un colore
Digitare semplicemente un codice HEX non genera automaticamente le palette: devi confermare la modifica con il pulsante Aggiorna colore. Solo dopo la conferma lo strumento ricalcola i 9 schemi.
Messaggio di formato non valido
Il generatore accetta solo il formato HEX con # all'inizio, ad es. #FF5500. I formati senza # (ad es. FF5500) o in notazione RGB (ad es. rgb(255,85,0)) non sono supportati.
Formato HEX corto e completo
Entrambi i formati sono supportati: completo #RRGGBB (ad es. #FF5500) e corto #RGB (ad es. #F50). Il generatore riconosce automaticamente entrambi e li elabora in modo identico.

Domande frequenti sul generatore di palette

Scopri altri strumenti

Vedi tutti gli strumenti

Convertitore JPG/PNG in WebP

Riduci il peso delle immagini senza perdita di qualità. Converti JPG e PNG in WebP e velocizza il tuo sito web.

Generatore di palette di colori

Generare palette da un singolo colore

Come usare il generatore

1. Scegli il colore base

2. Visualizza le palette

3. Copia i codici HEX

9 tipi di palette - quale si adatta al tuo progetto?

Monocromatica

Analoga

Complementare

Triadica

Complementare divisa

Pastello

Scura

Tonale (Material Design)

Minimalista (Apple)

Come funziona lo spazio colore HSL

Dove usare le palette generate?

identità visiva del brand

Siti web

Interfacce di applicazioni

Visual per i social media

Presentazioni e documenti

Risoluzione dei problemi del generatore di palette

Le palette non cambiano dopo l'inserimento di un colore

Messaggio di formato non valido

Formato HEX corto e completo

Domande frequenti sul generatore di palette

Quante palette genera lo strumento?

Cos'e una palette monocromatica?

Cos'e una palette complementare?

Posso copiare i colori generati?

Cos'e lo spazio colore HSL?

Qual è la differenza tra triadica e complementare divisa?

Scopri altri strumenti

Convertitore JPG/PNG in WebP

Editor di immagini online

Generatore di favicon

Verificatore meta titolo e descrizione

Contatore di parole e caratteri

Generatore di firma e-mail

Verificatore contrasto colori

Estrattore di colori da immagine