Générateur de Palettes de Couleurs

Belles palettes de 5 couleurs — barre d'espace pour générer, verrou pour conserver, extraction depuis des images

Harmonie :

Extraire les couleurs d'une image

📁 Cliquez pour importer ou faites glisser une image

JPG, PNG, WebP — jusqu'à 10 Mo

Votre image ne quitte jamais votre appareil — tout le traitement s'effectue dans votre navigateur.

Exporter la palette


      

    


    
    

      

        
Vérification du contraste WCAG

        

      

    


    
    

      

        
Palettes enregistrées 

        

          Effacer toutes les palettes enregistrées ?
          
          
        

        

      

    


    
    

    
    

      
Comment fonctionne la génération de palettes

      
Chaque palette est générée à l'aide de l'espace colorimétrique HSL — Teinte (0–360°), Saturation (0–100%) et Luminosité (0–100%). Le HSL est intuitif pour les règles d'harmonie car les relations entre teintes reposent sur la distance angulaire autour du cercle chromatique.


      

        

          

            

            

            

          

          
Analogue

          
Teintes dans un rayon de 30° les unes des autres. Harmonieuse et apaisante. Idéale pour les thèmes nature et océan.

        

        

          

            

            

            

          

          
Complémentaire

          
Deux teintes à 180° l'une de l'autre. Fort contraste et vibrante. Courante dans l'identité visuelle sportive.

        

        

          

            

            

            

          

          
Triadique

          
Trois teintes équidistantes à 120°. Équilibrée mais colorée. Idéale pour les marques ludiques.

        

        

          

            

            

            

          

          
Monochromatique

          
Même teinte, saturation et luminosité variées. Élégante et cohésive. Parfaite pour le design minimaliste.

        

        

          

            

            

            

          

          
Complémentaire divisée

          
Une teinte de base et deux teintes à 150° de chaque côté. Contraste sans tension.

        

        

          

            

            

            

            

          

          
Tétradique

          
Quatre teintes à intervalles de 90°. Riche et complexe. Fonctionne mieux quand une couleur domine.

        

      


      
Exemple — Palette analogue

      
Teinte de départ : H = 210° (un bleu). Règle analogue : 5 teintes espacées de 15°.
Teintes : 195°, 205°, 215°, 225°, 235°.
Saturation : de 55 % à 70 % pour la profondeur. Luminosité : de 45 % à 70 % pour la plage.
Résultat : une palette dégradé bleu océan cohésive avec un contraste naturel.

    


    
    

    
    

      
Conseils de palette pour les designers

      
    
        
  • Respectez la règle 60-30-10. Utilisez votre couleur dominante pour 60 % du design (fonds, grandes zones), une couleur secondaire pour 30 % (sections, panneaux UI) et un accent pour 10 % (CTA, mises en valeur). Une palette de 5 couleurs s'y adapte naturellement.
    • 
        
  • Vérifiez toujours le contraste pour le texte. Une belle palette peut tout de même échouer aux normes WCAG AA si la couleur du texte et l'arrière-plan n'ont pas un rapport de contraste d'au moins 4,5:1. Utilisez le vérificateur de contraste intégré ci-dessus.
    • 
        
  • Limitez votre palette en production. Avoir 5 couleurs disponibles ne signifie pas en utiliser 5 sur chaque écran. Les designs les plus soignés utilisent 2 à 3 couleurs de façon dominante et réservent les autres pour des moments spécifiques.
    • 
        
  • Verrouillez d'abord votre couleur de marque. Si vous avez une couleur principale de marque, cliquez sur l'icône de verrou sur cette nuance avant de régénérer — l'outil construira une palette harmonieuse autour de votre couleur verrouillée.
    • 
        
  • Extraction d'image pour une correspondance d'ambiance. Importez une photo qui capture l'ambiance de votre design (paysage, photo produit, image de style de vie) — la palette extraite sera déjà alignée émotionnellement avec votre direction de marque.
    • 
      

    


    
    

      
Questions fréquentes

      

        
Les palettes utilisent les règles d'harmonie HSL (Teinte, Saturation, Luminosité). Par exemple, l'Analogue sélectionne des teintes dans un rayon de 30°, la Complémentaire utilise des teintes à 180° l'une de l'autre, et la Triadique sélectionne trois teintes à 120°. La saturation et la luminosité sont variées pour créer un contraste visuellement agréable au sein de chaque palette.

        
Non — votre image ne quitte jamais votre appareil. L'outil utilise l'API Canvas du navigateur pour lire les données de pixels localement et extraire les couleurs dominantes via un algorithme de groupement par fréquence. Pas de serveur, pas de téléchargement, pas de traçage.

        
Cliquez directement sur n'importe quelle nuance de couleur ou son étiquette de code hex pour copier le code hex dans le presse-papiers. Un bref message de confirmation apparaît.

        
Vous pouvez exporter en propriétés personnalisées CSS (--color-1 à --color-5), un extrait de config Tailwind CSS, des variables SCSS, un objet JSON ou une liste de codes hex séparés par des virgules. Cliquez sur n'importe quel bouton d'export pour copier dans le presse-papiers instantanément.

        
Le vérificateur de contraste affiche des badges WCAG AA réussi/échoué pour chaque couleur de la palette rendue en texte sur fond blanc (#fff) et noir (#000). Les couleurs atteignant le ratio de 4,5:1 pour le texte normal affichent un badge vert « AA ✓ ».

        
Jusqu'à 50 palettes peuvent être enregistrées dans le localStorage de votre navigateur. Elles persistent entre les sessions. Vous pouvez afficher, recharger ou supprimer les palettes enregistrées depuis le panneau Historique.