Outil générateur de palettes couleur en ligne

Une palette partagée assure la cohérence visuelle, accélère la transmission aux développeurs et évite des hex arbitraires.

Avantages

• Cohérence : Mêmes accents sur interfaces et supports.
• Marque : Échantillonnez photos et planches d’ambiance.
• Rapidité : Comparez les nuances sans pipette partout.
• Thèmes : Passez d’une image à des variables clair/foncé.
• Inspiration : La photo suggère des teintes inattendues.

L'outil lit chaque pixel de votre image, le range dans une grille de 262 144 cellules de couleur, puis regroupe ces cellules en autant d'échantillons que demandé. Travailler à partir des cellules plutôt que des pixels est ce qui rend chaque changement de réglage instantané, même sur une photo de 48 mégapixels.

Déroulé habituel

• Chargez le fichier : Partez d'une source nette et bien éclairée pour que les couleurs dominantes aient du sens.
• Lisez les pixels : Chaque pixel est compté, en pleine résolution, les pixels totalement transparents étant exclus par défaut afin que le fond d'un logo ne devienne pas un échantillon.
• Regroupez : Les couleurs proches sont réunies selon l'algorithme et l'ambiance choisis.
• Mesurez : Chaque groupe rapporte la couleur moyenne exacte de ses propres pixels et la part d'image qu'il occupe.
• Livrez : Copiez les hex, exportez vers des formats prêts pour le code et vérifiez contraste et daltonisme avant publication.

La plupart des extracteurs quantifient avant de rapporter : ils arrondissent chaque canal dans un intervalle et renvoient la valeur de l'intervalle, si bien qu'une image de #ff0000 pur ressort en #fa0000 — une couleur absente de l'image. Pour un outil dont toute la sortie est un code hex que vous allez coller dans une feuille de style, c'est précisément le travail mal fait.

• Le regroupement est approximatif et rapide ; le rapport est exact. Ce sont deux étapes délibérément séparées.
• Chaque échantillon est la moyenne arithmétique des pixels réels qui lui sont affectés, cumulée en pleine précision.
• Une image d'une seule couleur renvoie exactement un échantillon portant exactement cette couleur.
• La part affichée sous chaque échantillon est un vrai comptage de pixels, pas une estimation : six bandes égales donnent 16,7 % chacune.
• La même image avec les mêmes réglages produit toujours la même palette. Rien ici n'utilise de graine aléatoire.

Les trois lisent chaque pixel et rapportent des couleurs exactes. Ils diffèrent par ce qu'ils optimisent, et le bon dépend de ce que vous voulez tirer de l'image.

• K-means : le réglage par défaut. Regroupe les couleurs pour que les échantillons soient aussi séparés que possible perceptuellement, ce qu'on attend d'une photographie.
• Fréquence : ancre chaque échantillon sur une couleur qui couvre réellement une grande surface. La bonne réponse à « quelle est la couleur de marque de ce logo », où une moyenne entre deux couleurs réelles est exactement l'inverse du but.
• Median cut : découpe à population de pixels égale, si bien qu'un petit accent vif reçoit proportionnellement plus de place qu'avec les deux autres. Le quantificateur classique, et celui qu'il faut pour le tramage.

Une ambiance change les couleurs choisies, jamais la façon dont une couleur choisie est rapportée. Elle pondère les couleurs de l'image avant le regroupement, si bien que la même photographie donne des palettes réellement différentes et toutes aussi honnêtes.

• Neutre : la couverture et rien d'autre — les couleurs qui occupent le plus l'image.
• Colorful : privilégie la saturation à n'importe quelle clarté, pour la lecture la plus vive de l'image.
• Bright : privilégie les couleurs à la fois claires et saturées.
• Muted : privilégie les tons moyens désaturés, en évitant le noir et le blanc, les deux couleurs les moins sourdes qui soient.
• Deep : privilégie les tons joyaux sombres et saturés.
• Dark : privilégie les tons d'ombre à n'importe quelle saturation.

Une harmonie est une rotation de teinte qui laisse tout le reste en place. Le faire en LCH plutôt qu'en HSL compte plus qu'il n'y paraît : faire tourner un bleu de 180 degrés en HSL donne un jaune de clarté nominale identique, mais environ neuf fois plus lumineux à l'œil.

• Six règles : complémentaire, analogue, triadique, complémentaire divisée, tétradique et monochrome.
• Le chroma est conservé : une base sourde donne des harmonies sourdes, une base vive des harmonies vives.
• Les couleurs hors gamut sont mappées, pas écrêtées : le chroma est réduit jusqu'à ce que la couleur tienne, de sorte que la teinte demandée est celle obtenue.
• Les couleurs quasi neutres le disent : un gris n'a pas de teinte à faire tourner, et l'outil affiche son nuancier plutôt qu'un complément inventé.
• Nuances claires et foncées : onze paliers perceptuellement réguliers par échantillon, au format 50-950 attendu par tout framework CSS.

Une palette qui rend bien et qu'on ne peut pas lire n'est pas terminée. Les deux contrôles ci-dessous sont gratuits dans toutes les offres, car un contrôle d'accessibilité derrière un paywall est pire que pas de contrôle du tout.

• Contraste WCAG pour chaque paire de la palette — toutes, pas un échantillon des premières.
• Chaque couleur face au noir et au blanc, avec le meilleur des deux indiqué, pour savoir quelle couleur de texte demande un bouton.
• Résultats AA, AA grand et AAA étiquetés paire par paire.
• Protanopie, deutéranopie et tritanopie simulées sur toute la palette.
• Toute paire qui cesse d'être distinguable est nommée, avec l'écart de couleur mesuré à côté.

L'export est le produit — personne n'extrait une palette pour la regarder. CSS, JSON et une simple liste hex sont gratuits ; les formats qui transportent une palette vers d'autres logiciels font partie de Pro.

• CSS et SCSS : propriétés personnalisées et variables, chacune annotée de son nom de couleur le plus proche et de sa part d'image.
• Tailwind : un bloc @theme, prêt à coller dans une feuille de style Tailwind v4.
• JSON : chaque échantillon avec ses coordonnées RGB, Lab et LCH, sa part et son nom de couleur CSS le plus proche.
• ASE : Adobe Swatch Exchange, pour Illustrator, InDesign et Photoshop.
• GPL : le format de palette GIMP, lu aussi par Inkscape, Krita et Scribus.
• SVG et PNG : une carte de nuancier à partager, quand la palette part dans une conversation plutôt que dans un dépôt.

Guide pour obtenir les couleurs dominantes et les exporter.

1. Ajoutez une image. Déposez un fichier sur la page, collez-le depuis le presse-papiers (Ctrl+V ou ⌘V) ou cliquez sur Parcourir. La palette apparaît dès que l'image est lue.
2. Choisissez les réglages. Sélectionnez un algorithme (fréquence, K-means ou median cut), une ambiance de couleur et le nombre de couleurs : de trois à huit dans l'offre gratuite.
3. Affinez. Utilisez la pipette pour remplacer un échantillon par une couleur prise dans l'image, puis vérifiez la grille de contraste et le rapport daltonisme avant de valider.
4. Utilisez ou exportez. Copiez les valeurs hex, téléchargez CSS, SCSS ou JSON et vérifiez les suggestions d'harmonie et de contraste avant de fixer un nuancier.

Limiter le nombre de couleurs et valider l’accessibilité limite les retours en arrière.

Repères

• La plupart des systèmes d'interface s'en tiennent à trois à dix couleurs de base pour que les états et les neutres restent lisibles.
• L'extraction par fréquence privilégie les couleurs couvrant de grandes zones de la photo, utile pour les visuels d'accroche.
• Les méthodes de clustering font ressortir des dégradés subtils qu'un simple prélèvement à la pipette manquerait.
• Les exports CSS ou JSON s'intègrent directement aux design tokens et aux bibliothèques de composants.
• Une photo de 12 mégapixels est lue intégralement en bien moins d'une seconde, et changer un réglage ensuite coûte une fraction de cela puisque les pixels ne sont pas relus.

Bonnes pratiques

Utilisez le résultat comme base et affinez avec la charte et le contraste.

• Utilisez des références haute résolution sans artefacts de compression marqués pour des moyennes plus propres.
• Augmentez le nombre de couleurs quand la scène comporte beaucoup de matières distinctes ; réduisez-le pour les mises en page minimalistes.
• Conservez les exports bruts et un court README des noms de tokens pour que l'équipe sache comment les importer.
• Prévisualisez le texte et les icônes sur de vrais fonds, pas seulement sur des échantillons isolés.
• Utilisez la pipette quand la réponse automatique approche mais que vous voulez exactement le pixel que vous aviez en tête.

Cas d’usage

• Web : Pages à partir de photos client.
• Marque : Couleurs issues de campagnes ou packagings.
• Espaces : Inspiration peinture et matériaux.
• Mode : Planches saisonnières.
• Art : Étudier la répartition des teintes.

• Sélecteur de couleur
• Hex vers RGB
• RGB vers Hex
• Analyseur d'images
• Étalonnage des couleurs
• Compresser une image
• Tous les convertisseurs