Generatore di palette di colori gratuito online

Come usarlo

• Scegli una modalità di armonia (Analogo, Complementare, Triadico, ecc.) o lasciala su Casuale.
• Fai clic su Genera o premi Spazio per nuove palette.
• Fai clic sull'icona del lucchetto per bloccare un colore in modo che resti invariato durante la rigenerazione.
• Fai clic su un codice HEX per copiarlo negli appunti.
• Usa Copia CSS per ottenere proprietà personalizzate CSS o scaricarle come immagine.

Teoria del colore e modalità di armonia

Questo generatore supporta 7 modalità di armonia basate sulla teoria del colore. Analogo: le palette usano colori a meno di 30° di distanza sul cerchio cromatico · trasmettono calma e coerenza. Complementare: le palette abbinano colori opposti di 180° per il massimo contrasto. Triadico: le palette usano tre tonalità equidistanti (a 120° l'una dall'altra) per una varietà vibrante. Complementare diviso: prende un colore base più due colori adiacenti al suo complementare · audace ma più sfumato. Monocromatico: le palette variano solo luminosità e saturazione di un'unica tonalità · elegante e minimale. Quadrato: utilizza quattro colori separati di 90° per una palette ben bilanciata e ricca di colore.

Domande frequenti

Come uso questi colori nel mio progetto?

Fai clic su "Copia CSS" per ottenere proprietà personalizzate CSS pronte da incollare. Puoi anche fare clic sui singoli codici HEX per copiarli oppure esportare l'intera palette come immagine PNG per usarla come riferimento in strumenti di design come Figma o Canva.

Quanti colori dovrebbe avere una palette?

La maggior parte dei design funziona meglio con 3-5 colori: un colore primario, uno secondario, un accento e 1-2 neutri. Usa il pulsante "+ Aggiungi colore" per ampliare la tua palette o rimuovi colori generandone di meno.

Posso bloccare i colori che mi piacciono?

Sì! Fai clic sull'icona del lucchetto su qualsiasi campione di colore. Quando generi nuove palette, i colori bloccati rimangono al loro posto mentre quelli sbloccati vengono rigenerati casualmente. È ottimo per costruire una palette attorno a uno specifico colore del brand.

Cosa sono le modalità di armonia?

Le modalità di armonia generano palette basate sulle relazioni della teoria del colore. Analogo usa tonalità vicine per una palette rilassante. Complementare usa tonalità opposte per un contrasto forte. Triadico, Complementare diviso e Quadrato distribuiscono le tonalità in modo uniforme sul cerchio cromatico. Monocromatico mantiene una sola tonalità e varia la luminosità · perfetto per design puliti e minimali.

Cos'è un generatore di palette di colori?

Un generatore di palette di colori sceglie un insieme di colori che funzionano insieme visivamente, in base alle regole della teoria del colore. Gli dai un suggerimento iniziale (un colore base, una modalità di armonia o pura casualità) e restituisce da tre a cinque codici esadecimali che si trovano in posizioni deliberate sulla ruota dei colori. L'output è pronto per essere inserito nelle variabili CSS, in un file Figma, in una linea guida del brand o in una presentazione.

Gli strumenti web moderni esprimono i colori in esadecimale (#2b7190), RGB (43, 113, 144), HSL (199, 54%, 37%) o OKLCH (51,3% 0,066 233,4). Hex è il più facile da copiare e incollare; HSL è il più intuitivo da modificare (abbassa la luminosità per una variante più scura); OKLCH (introdotto in CSS Color 4, supportato nei browser dal 2023) è percettivamente uniforme, il che è importante per i design token. Questo strumento emette hex di default e ti permette di copiare proprietà personalizzate CSS per le variabili e gradini di tonalità compatibili con OKLCH.

Tutta la generazione avviene nel tuo browser. Le modalità di armonia sono calcolate da un colore base tramite rotazione della tonalità HSL, poi convertite di nuovo in hex. Il pulsante di blocco mantiene i tuoi preferiti mentre il resto della palette viene rimescolato. Il tasto Spazio attiva una nuova generazione senza lasciare la pagina, il che rende veloce l'esplorazione.

Cosa c'è dentro il generatore

La barra superiore raggruppa le tre manopole che cambiano la generazione: un pulsante Genera che produce una nuova palette, un menu a tendina Modalità con sette regole di armonia (Casuale, Analoga, Complementare, Triadica, Complementare Diviso, Monocromatica, Quadrata) e un selettore di Colore base per seminare le modalità non casuali. Il pulsante Aggiungi colore estende la palette oltre i cinque campioni predefiniti, utile per i design system che necessitano di più tonalità.

Ogni campione mostra il suo codice hex su una pillola scura che rimane leggibile su qualsiasi sfondo. Clicca sull'hex per copiarlo. Clicca sul lucchetto per bloccare il campione attraverso le future generazioni, ed è cosi che costruisci una palette intorno a un colore del brand: blocca il brand, rigenera, ottieni tre compagni abbinati. La barra delle azioni dentro ogni campione mantiene le icone di blocco, copia e rimozione entro obiettivi tattili di 32 pixel per soddisfare la regola target-size di Lighthouse.

Sotto la palette, il blocco di esportazione Variabili CSS si aggiorna in tempo reale con i tuoi colori attuali come proprietà personalizzate :root. Il pulsante Esporta Immagine serializza la palette in un PNG tramite un canvas nascosto, utile per la condivisione nelle revisioni di design o per fissarlo a una moodboard. Il tasto di scelta rapida Spazio rigenera istantaneamente, senza che sia necessario cambiare focus.

Storia e contesto

Isaac Newton scinde la luce bianca (1666)

Gli esperimenti con il prisma di Isaac Newton del 1666 a Cambridge mostrarono che la luce bianca è composta da uno spettro continuo di colori. In Opticks (1704), stabili una ruota di sette colori con rosso, arancione, giallo, verde, blu, indaco e viola posizionati in modo che i colori diametralmente opposti creassero complementari armoniosi. Ogni ruota dei colori moderna discende da questo unico diagramma.

La teoria del colore di Goethe (1810)

La Teoria dei colori di Johann Wolfgang von Goethe (1810) ha riformulato la fisica di Newton in termini di percezione umana. Goethe è stato il primo a descrivere sistematicamente le immagini residue, il contrasto simultaneo e il calore psicologico del rosso rispetto alla freddezza del blu. Il suo lavoro ha influenzato Turner, Schopenhauer e l'intero campo della psicologia del colore che le scuole d'arte insegnano oggi.

Johannes Itten formalizza le regole dell'armonia (1961)

Johannes Itten, insegnante alla Bauhaus, ha pubblicato L'Arte del Colore (Kunst der Farbe) nel 1961. La sua ruota dei colori a dodici raggi e i sette contrasti (tonalità, valore, temperatura, complementare, simultaneo, saturazione, estensione) sono diventati il curriculum standard nelle scuole d'arte e di design. Le modalità di armonia in questo strumento (Analoga, Complementare, Triadica, Complementare Diviso, Quadrata) provengono direttamente dai capitoli di Itten.

Sistema di abbinamento Pantone (1963)

Lawrence Herbert di Pantone, una tipografia commerciale M. Harris and Sons, ha lanciato il Sistema di abbinamento Pantone nel 1963. Il libro di chip ha dato a designer e stampatori un riferimento numerico condiviso, in modo che un colore del brand potesse sopravvivere alla riproduzione su carta, schermi e tessuti. Il Colore dell'Anno, iniziato nel 2000, ora guida le tendenze delle palette nella moda, negli interni e nel web design.

Palette web-safe e i 216 colori (1996)

Quando i display a 8 bit dominavano i primi anni del web, Lynda Weinman codificò una palette web-safe di 216 colori nel 1996 per garantire un rendering coerente tra Mac e Windows. La palette è diventata obsoleta una volta che il colore a 24 bit è diventato onnipresente (intorno al 2000), ma la sintassi hex che ha reso popolare (#RRGGBB) rimane il modo dominante di scrivere i colori in CSS, HTML e strumenti di design.

OKLCH e colore percettivamente uniforme (2020)

Il documento OKLab di Bjoern Ottosson del 2020 ha introdotto uno spazio colore percettivamente uniforme che non ha le incongruenze di luminosità di HSL. CSS Color Level 4 (browser da Chrome 111, Safari 15.4, Firefox 113) ha aggiunto la sintassi oklch(). Il futuro dei design token, del contrasto colore accessibile e della generazione di palette vive sempre più in OKLCH perché l'uniformità percettiva significa che due colori con lo stesso valore L appaiono veramente ugualmente luminosi.

Flussi di lavoro pratici

Costruire un'identità di brand da un singolo colore

Imposta il colore Base sull'hex del tuo brand, blocca il primo campione, cambia la modalità in Analoga o Complementare Diviso e clicca Genera finché i quattro colori compagni non sembrano giusti. Copia le variabili CSS e incollale nei token del tuo design system. Il risultato è una palette ancorata al tuo brand con armonie supportate dalla teoria.

Progettare coppie per la modalità scura

Scegli una palette Monocromatica con il tuo sfondo della modalità scura come base. I cinque campioni ti danno sfondo, superficie, divisore, testo secondario e testo principale in luminosità graduata. Per la modalità chiara, genera una palette Monocromatica separata con una base chiara. Le due palette accoppiate tramite prefers-color-scheme coprono la maggior parte delle esigenze di theming senza ritocchi ad hoc.

Scegliere i colori per la visualizzazione dei dati

Per i dati categorici (grafici a barre, segmenti di torta), le palette Triadiche o Quadrate ti danno tre o quattro tonalità distinte che si leggono separatamente su un grafico affollato. Per i dati sequenziali (heatmap, mappe coropletiche), usa Monocromatica per variare la luminosità mantenendo costante la tonalità. Controlla il contrasto rispetto allo sfondo del grafico; gli strumenti di data-viz come Vega-Lite si aspettano almeno 3:1 tra le categorie adiacenti.

Bozza di palette accessibilità-first

Genera una palette, poi incolla ogni coppia in un controllore di contrasto (WebAIM, Tanaguru). Per il testo del corpo su uno sfondo vuoi almeno 4,5:1 (WCAG AA). Per testo grande o componenti UI, 3:1 è la soglia. Se una palette fallisce, generane una nuova o blocca il campione del brand e lascia che gli altri si rimescolino per trovare un set conforme.

Esplorazione mood-board

Premi Spazio ripetutamente per ciclare attraverso dozzine di palette casuali. Quando una cattura il tuo occhio, blocca il miglior campione, passa ad Analoga e continua a generare per trovare variazioni che si basano su di esso. Il loop barra spazio è più veloce del cliccare, il che ti permette di rimanere nella modalità esplorativa del cervello destro senza interrompere il flusso.

Abbinamento colori stampa-schermo

Quando hai un riferimento stampato (un chip Pantone o un campione di tessuto), usa il contagocce per trovare l'equivalente digitale più vicino e usalo come colore Base. Le modalità di armonia poi si dispiegano intorno al tuo riferimento. Sii consapevole che la stampa è CMYK e lo schermo è RGB, quindi una corrispondenza esatta è impossibile; l'obiettivo è una palette abbastanza vicina da leggere come lo stesso brand.

Trappole comuni

Il contrasto WCAG non è automatico

Una palette teoricamente carina può ancora fallire l'accessibilità. Le coppie pastello-su-pastello (un giallo chiaro su un rosa chiaro) sembrano piacevoli ma hanno meno di 2:1 di contrasto. Testa sempre le coppie proposte testo-su-sfondo in un controllore WCAG. Se la palette deve funzionare per il testo del corpo, costruiscila prima intorno al requisito di contrasto, e l'armonia per seconda.

Il daltonismo colpisce l'8% degli uomini

La deuteranopia rosso-verde è la forma più comune di deficit di visione del colore, che colpisce circa l'8% degli uomini e lo 0,5% delle donne. Una palette Complementare rosso-verde diventa una singola macchia marrone per uno spettatore deuteranopo. Per i colori categorici (grafici, badge di stato, semafori), abbina il colore con forma, etichetta o pattern e testa in un simulatore come Stark o Sim Daltonism.

HSL non è percettivamente uniforme

In HSL, il giallo al 50% di luminosità sembra molto più luminoso del blu al 50% di luminosità. Il modello HSL tratta tutte le tonalità ugualmente numericamente, ma gli occhi umani no. Il generatore funziona in HSL internamente per la rotazione della tonalità, quindi due campioni con S e L simili possono ancora avere un peso percettivo notevolmente diverso. Per palette percettivamente bilanciate, passa a strumenti OKLCH-aware (Leonardo, Open Color).

Differenze di gamma tra sRGB e Display P3

I display Apple moderni (dagli iMac del 2015, MacBook Pro del 2016, tutti gli iPhone dal 7) usano Display P3, una gamma di colori più ampia di sRGB. Un rosso saturo che sembra vivido su Display P3 può sembrare più spento quando lo stesso hex viene renderizzato su un monitor sRGB più vecchio. Per i colori del brand che devono apparire identici ovunque, rimani entro la gamma più piccola di sRGB.

I codici hex non portano l'alpha di default

Gli hex a tre cifre (#abc) e a sei cifre (#aabbcc) sono opachi. L'hex a otto cifre (#aabbcc80, dove 80 è il 50% alpha) è supportato in CSS Color 4 e nei browser moderni ma non negli strumenti legacy. Se hai bisogno di trasparenza, usa rgba() o hsla() invece, o attieniti ai colori opachi e lascia che l'opacità del genitore gestisca la fusione.

Deriva della calibrazione del color picker

Un monitor non calibrato può discostarsi di diverse unità Delta-E da un riferimento, il che significa che una palette che sembra immacolata sul tuo schermo può sembrare fangosa o sovrasaturata su quella di qualcun altro. Per il lavoro critico per il brand, calibra con un dispositivo Spyder o i1Display. Per la maggior parte del web design, la varianza dello schermo è inevitabile; scegli colori che funzionano attraverso la gamma mediana.

Privacy e gestione dei dati

Tutto funziona nel tuo browser. La matematica dell'armonia è JavaScript, l'esportazione del canvas è locale e l'API degli appunti richiede un gesto dell'utente. Non inviamo i tuoi codici hex da nessuna parte, non tracciamo quali palette generi e non memorizziamo nulla nei cookie o in localStorage. Ricarica la pagina e la palette precedente è sparita.

Una volta che la pagina è caricata, il generatore funziona offline. Puoi usarlo su un volo, all'interno di un proxy aziendale o in un ambiente air-gapped. L'unica azione che tocca la rete è l'opzionale Esporta Immagine, che scarica tramite un URL blob, e il download stesso non trasmette i tuoi colori da nessuna parte.

Quando non usare questo generatore

Stabilire un design system con token semantici

I design system necessitano di token nominati e semantici (color-primary-500, color-error, color-warning) con valori abbinati per modalità chiara e scura, garanzie di contrasto e passi di scala nominati. Usa uno strumento dedicato (Material Color Tool, Open Color, Leonardo di Adobe) o un sistema di gestione token (Style Dictionary, Tokens Studio). Questo generatore è per l'esplorazione, non per la progettazione di sistemi.

Gestione colore per la stampa (CMYK, Pantone)

Le separazioni colore CMYK per la stampa offset richiedono strumenti professionali (pannello campioni di Adobe Illustrator, Pantone Connect). La conversione RGB-a-CMYK è con perdita e i limiti di copertura dell'inchiostro contano. Se la tua palette verrà stampata su larga scala, lavora con le specifiche del colore della stampante dall'inizio, non con un generatore hex solo per schermo.

Generazione di palette accessibili per il testo del corpo

Per le palette che devono garantire il contrasto WCAG AA o AAA in ogni abbinamento, usa uno strumento contrast-first come Tanaguru Contrast-Finder, Adobe Leonardo o strumenti basati su APCA. Questo generatore segue le regole di armonia, non quelle di contrasto, quindi una bellissima palette Analoga può avere una coppia testo-su-sfondo 1,5:1 che fallisce l'accessibilità.

Animazioni e interpolazione del colore

Per stop di gradiente o animazioni del colore, hai bisogno di un'interpolazione percettivamente uniforme in OKLCH o LCH, non HSL grezzo o hex. L'interpolazione del gradiente CSS predefinita è sRGB che produce punti medi fangosi (il famoso punto medio grigio tra giallo e blu). Usa strumenti di color-interpolation (chroma.js di Erin Kissane, oklch.com) per transizioni animate.

Altre domande

Quando dovrei usare hex vs RGB vs HSL?

Hex è il più compatto e il più copiato, ottimo per le consegne di design. RGB è il più facile da calcolare nel codice (ogni canale 0-255). HSL è il più facile da modificare a mano: cambia la tonalità per spostare il colore, la luminosità per le varianti. Per il CSS moderno, OKLCH è il più future-proof per i design system perché è percettivamente uniforme.

Quale modalità di armonia dovrei scegliere?

Inizia con Analoga per palette calme e coese (interfacce, blog). Usa Complementare per coppie call-to-action ad alto contrasto. Triadica e Quadrata danno palette categoriche vibranti per grafici o brand giocosi. Monocromatica è la migliore per modalità scura e design system tonali. Complementare Diviso è la scelta più sicura "audace ma non stridente".

Come controllo l'accessibilità?

Incolla ogni coppia testo-su-sfondo in WebAIM Contrast Checker, Tanaguru o APCA Contrast Tool. Punta ad almeno 4,5:1 (WCAG AA) per il testo del corpo, 3:1 per testo grande e componenti UI, 7:1 (WCAG AAA) per app di lettura ricche di prosa. Testa con simulatori di daltonismo (Stark, Sim Daltonism) per uso categorico.

Posso esportare in Figma o Sketch?

Copia CSS ti dà proprietà personalizzate pronte da incollare. Sia Figma che Sketch importano direttamente i codici hex tramite il loro color picker. Il pulsante Esporta Immagine ti dà un PNG adatto per moodboard o screenshot. Per un'esportazione token-friendly (formato W3C Design Token Community Group), copia i codici hex e adattali in Tokens Studio o Style Dictionary.

Quanti colori dovrebbe avere una palette?

Da tre a cinque per la maggior parte dei siti web e delle app: un colore primario del brand, un accento o secondario, un neutro per il testo e uno o due neutri di utilità (bordo, sfondo). I design system più grandi usano 9-12 token nominati (primario, secondario, successo, avvertimento, errore, info, più neutri). Lo strumento inizia a cinque ma Aggiungi Colore lo estende.

Cos'è OKLCH e dovrei usarlo?

OKLCH è uno spazio colore percettivamente uniforme aggiunto a CSS nel 2023. A differenza di HSL, due colori OKLCH con lo stesso valore L appaiono veramente ugualmente luminosi. Per i design system e le scale tonali coerenti è la nuova best practice. Il supporto del browser è universale nelle versioni attuali (Chrome 111+, Safari 15.4+, Firefox 113+). Per il fallback elegante nei browser più vecchi, distribuisci un valore hex sRGB insieme all'oklch().

Strumenti correlati