𝗙𝗿𝗲𝗲𝗧𝗼𝗼𝗹 DEV

Generatore di Palette di Colori

Crea palette di colori armoniose online. Genera colori casuali o tematici, blocca i tuoi preferiti, visualizza le scale di tonalità, verifica il contrasto e la simulazione del daltonismo, ed esporta in CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL o OKLCH.

Clicca su una palette per aprirla nell'editor

Modifica colore

Informazioni su questo strumento

Crea palette di colori armoniose in pochi secondi. Sfoglia la galleria di palette generate automaticamente o apri l'editor per creare variazioni, bloccare i colori preferiti, regolare il numero di colori ed esportare per i tuoi progetti. I colori vengono calcolati nello spazio percettivo Okhsl, che mantiene i toni visivamente equilibrati ed evita le distorsioni comuni dell'HSL tradizionale.

Funzionalità principali

Genera palette casuali o tematiche: pastello, vibrante, scuro, vintage e terra
Blocca i colori preferiti, genera nuove variazioni e regola la dimensione della palette
Visualizza scale di tonalità percettive, verifica il contrasto WCAG e simula il daltonismo
Esporta in HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON o Tailwind e condividi tramite link

Utilizzi comuni

  • Scoprire nuove palette e combinazioni per interfacce e design system, con tonalità percettivamente equilibrate e pronte all'uso
  • Definire schemi di colori per presentazioni, post e materiali di marketing con armonia visiva
  • Copiare valori di colore in HEX, RGB, HSL o OKLCH direttamente nel CSS, senza calcolare i colori manualmente
  • Testare diverse armonie di colori (analoghe, monocromatiche, complementari, triadiche, tetradiche) nei redesign di interfaccia prima di finalizzare il progetto
  • Verificare l'accessibilità del contrasto e visualizzare come le persone daltoniche percepiscono la palette

Come usare

1

Sfoglia la galleria

La pagina si apre con diverse palette generate automaticamente. Scegli tra la modalità casuale e tematica, premi il tasto Spazio per generare nuove opzioni, oppure clicca su 'Carica altro' per espandere la galleria.

2

Apri nell'editor

Clicca su una palette per aprirla nell'editor. Blocca i colori che vuoi mantenere e genera di nuovo per variare solo gli altri.

3

Regola ed esporta

Regola il numero di colori, visualizza le scale di tonalità, verifica il contrasto e il daltonismo, poi esporta nel formato che ti serve o condividi tramite link.

Note tecniche

Alcuni dettagli aiutano a capire come vengono generati i colori e perché rimangono equilibrati:

I colori vengono generati nello spazio Okhsl, che è percettivamente uniforme: variare la luminosità produce gradini visivamente regolari, al contrario dell'HSL dove lo stesso valore di luminosità appare più chiaro nel giallo che nel blu
Cliccando su 'vedi scala di colori' di un colore, viene generata una rampa da 50 a 900 mantenendo tonalità e saturazione fisse e variando solo la luminosità percettiva — pronta per le scale di design system e copiabile in CSS o Tailwind
La verifica del contrasto utilizza il rapporto WCAG tra il colore e il testo leggibile su di esso; il badge AA indica un rapporto di almeno 4,5:1
La simulazione del daltonismo è un'approssimazione per una verifica rapida e non sostituisce i test con utenti reali

Domande frequenti

Come si genera una palette di colori?

La pagina si apre già con diverse palette generate automaticamente. Premi la barra spaziatrice (o il pulsante Genera nuove) per crearne altre, oppure scegli un tema come pastello o scuro. Cliccando su una palette si apre l'editor per bloccare i colori e regolarli a piacere.

Qual è la differenza tra la modalità casuale e quella tematica?

Nella modalità casuale, i colori possono provenire da qualsiasi punto dello spettro. Nella modalità tematica, la generazione è orientata verso un aspetto specifico — pastello usa colori chiari e delicati, scuro usa tonalità a bassa luminosità, vintage usa tonalità invecchiate e desaturate, e così via.

Cos'è lo spazio colore Okhsl e perché è importante?

Okhsl è un modello di colore percettivamente uniforme. In pratica, questo significa che regolare la luminosità di un colore produce cambiamenti che l'occhio percepisce come gradini regolari, generando palette e tonalità più equilibrate rispetto all'HSL tradizionale, specialmente quando si confrontano colori molto diversi come il giallo e il blu.

Come salvo o condivido una palette?

Nell'editor, il pulsante Condividi copia un link con i colori codificati nell'URL. Chi apre quel link vedrà esattamente la stessa palette nell'editor. Puoi anche esportare i colori in CSS, SCSS, JSON, Tailwind o come lista HEX.

Vedi anche