Generatore di Palette Colori

Belle palette da 5 colori — barra spaziatrice per generare, lucchetto per mantenere, estrazione dalle immagini

Armonia:

Estrai Colori da Immagine

📁 Clicca per caricare o trascina un'immagine

JPG, PNG, WebP — fino a 10MB

La tua immagine non lascia mai il tuo dispositivo — tutta l'elaborazione avviene nel tuo browser.

Esporta Palette


      

    


    
    

      

        
Verifica Contrasto WCAG

        

      

    


    
    

      

        
Palette Salvate 

        

          Cancellare tutte le palette salvate?
          
          
        

        

      

    


    
    

    
    

      
Come Funziona la Generazione di Palette

      
Ogni palette è generata usando lo spazio colore HSL — Tonalità (0–360°), Saturazione (0–100%) e Luminosità (0–100%). L'HSL è intuitivo per le regole di armonia perché le relazioni tra tonalità si basano sulla distanza angolare attorno alla ruota dei colori.


      

        

          

            

            

            

          

          
Analoga

          
Tonalità entro 30° l'una dall'altra. Armoniosa e rilassante. Ottima per temi naturali e marini.

        

        

          

            

            

            

          

          
Complementare

          
Due tonalità a 180° l'una dall'altra. Alto contrasto e vibrante. Comune nel branding sportivo.

        

        

          

            

            

            

          

          
Triadica

          
Tre tonalità equidistanti a 120°. Equilibrata ma colorata. Buona per brand giocosi.

        

        

          

            

            

            

          

          
Monocromatica

          
Stessa tonalità, saturazione e luminosità variate. Elegante e coerente. Perfetta per il design minimalista.

        

        

          

            

            

            

          

          
Complementare Divisa

          
Una tonalità base più due tonalità a 150° su ogni lato. Contrasto senza tensione.

        

        

          

            

            

            

            

          

          
Tetradica

          
Quattro tonalità a intervalli di 90°. Ricca e complessa. Funziona meglio quando un colore domina.

        

      


      
Esempio — Palette Analoga

      
Tonalità iniziale: H = 210° (un blu). Regola analoga: 5 tonalità distanziate di 15°.
Tonalità: 195°, 205°, 215°, 225°, 235°.
Saturazione: da 55% a 70% per profondità. Luminosità: da 45% a 70% per ampiezza.
Risultato: una palette sfumata blu oceano coerente con contrasto naturale.

    


    
    

    
    

      
Consigli sulle Palette per Designer

      
    
        
  • Segui la regola 60-30-10. Usa il colore dominante per il 60% del design (sfondi, aree grandi), un secondario per il 30% (sezioni, pannelli UI) e un accento per il 10% (CTA, evidenziazioni). Una palette da 5 colori si adatta naturalmente a questa regola.
    • 
        
  • Verifica sempre il contrasto per il testo. Una bella palette può comunque non superare il WCAG AA se il colore del testo e lo sfondo non hanno almeno un rapporto di contrasto di 4,5:1. Usa il Verificatore Contrasto integrato sopra.
    • 
        
  • Limita la tua palette in produzione. Avere 5 colori disponibili non significa usarli tutti e 5 su ogni schermata. I design più curati usano 2–3 colori in modo dominante e riservano gli altri per momenti specifici.
    • 
        
  • Blocca prima il colore del tuo brand. Se hai un colore principale del brand, clicca l'icona lucchetto su quella tinta prima di rigenerare — lo strumento costruirà una palette armoniosa attorno al tuo colore bloccato.
    • 
        
  • Estrazione d'immagine per il mood matching. Carica una foto che cattura il mood del tuo design (un paesaggio, una foto prodotto, un'immagine lifestyle) — la palette estratta sarà già emotivamente allineata con la direzione del tuo brand.
    • 
      

    


    
    

      
Domande Frequenti

      

        
Le palette usano le regole di armonia HSL (Tonalità, Saturazione, Luminosità). Ad esempio, la Analoga seleziona tonalità entro 30° l'una dall'altra, la Complementare usa tonalità a 180° l'una dall'altra, e la Triadica seleziona tre tonalità a 120°. Saturazione e luminosità sono variate per creare un contrasto visivamente piacevole all'interno di ogni palette.

        
No — la tua immagine non lascia mai il tuo dispositivo. Lo strumento usa l'API Canvas del browser per leggere i dati pixel localmente ed estrarre i colori dominanti tramite un algoritmo di raggruppamento per frequenza. Nessun server, nessun upload, nessun tracciamento.

        
Clicca direttamente su qualsiasi tinta di colore o sulla sua etichetta con il codice hex per copiarlo negli appunti. Appare un breve messaggio di conferma.

        
Puoi esportare come proprietà personalizzate CSS (--color-1 a --color-5), uno snippet di config Tailwind CSS, variabili SCSS, un oggetto JSON o una lista di codici hex separati da virgole. Clicca qualsiasi pulsante di esportazione per copiare negli appunti istantaneamente.

        
Il verificatore di contrasto mostra badge WCAG AA superato/non superato per ogni colore della palette reso come testo su sfondo bianco (#fff) e nero (#000). I colori che soddisfano il rapporto di 4,5:1 per il testo normale mostrano un badge verde «AA ✓».

        
Fino a 50 palette possono essere salvate nel localStorage del tuo browser. Persistono tra le sessioni. Puoi visualizzare, ricaricare o eliminare le palette salvate dal pannello Cronologia.