Générateur de Palette de Couleurs

Générateur de Palette de Couleurs - Créer Beaux Schémas

Un puissant générateur de palette avec deux modes : création manuelle avec règles d'harmonie (monochromatique, analogue, complémentaire, triadique, tétradique) et extraction automatique d'images utilisant quantification de couleur avancée. Dispose de 12 palettes préréglées, formats d'export multiples (CSS, SCSS, JSON, Tableau) et possibilité de télécharger palettes en images. Parfait pour designers, développeurs et tous ceux travaillant avec couleurs. Voir aussi notre Générateur Dégradés et notre Mélangeur Couleurs.

Comment générer rapidement une palette pour un nouveau projet ?

Commencez par la couleur en laquelle vous avez déjà confiance — généralement la primaire de marque, un accent d'image hero, ou l'émotion que vous voulez évoquer. Collez son HEX dans le sélecteur de base puis cliquez sur un bouton d'harmonie : Analogue donne un schéma calme et peu conflictuel (idéal pour sites de contenu) ; Complémentaire donne un contraste très énergique en deux couleurs (idéal pour CTA) ; Triadique distribue trois accents équilibrés (idéal pour mise en page éditoriale). Sans couleur de départ, déposez une image d'inspiration en mode Depuis Image et laissez le clustering k-means extraire cinq couleurs dominantes. Affinez chaque échantillon à la main puis exportez. Une palette solide de premier jet prend moins de deux minutes, et vous pouvez toujours ajouter Tons et Teintes pour la transformer en gamme complète de design system.

Quelle est la différence entre harmonies monochromatique, analogue, complémentaire, triadique et tétradique ?

Ce sont cinq positions classiques sur la roue chromatique HSL. Monochromatique garde une seule teinte en faisant varier seulement luminosité et saturation — la plus calme, la plus difficile à rater. Analogue prend des voisins à environ 30 degrés (bleu, bleu-vert, vert) — naturelle et cohésive. Complémentaire prend la teinte exactement opposée à 180 degrés (bleu plus orange) — tension visuelle maximale, idéale pour un accent contre un fond. Triadique prend trois teintes à 120 degrés (rouge, jaune, bleu) — équilibrée mais vive, courante dans les marques ludiques. Tétradique prend deux paires complémentaires formant un rectangle sur la roue — la plus riche et la plus difficile à maîtriser ; généralement une couleur domine pendant que les trois autres jouent un rôle de soutien. Choisissez la règle qui correspond au volume émotionnel de la page.

Comment fonctionne réellement l'extraction de couleurs d'une image ?

Quand vous téléversez une image, l'outil la sous-échantillonne à un nombre gérable de pixels puis lance un clustering k-means dans l'espace RGB. Chaque pixel est traité comme un point 3D ; l'algorithme choisit k centroïdes aléatoires (k étant votre nombre de couleurs), assigne chaque pixel à son centroïde le plus proche, recalcule chaque centroïde comme moyenne de ses pixels assignés, et répète jusqu'à stabilisation des centroïdes. Le résultat est k couleurs qui minimisent la distance totale à tous les pixels — autrement dit les tons les plus représentatifs de la photo. L'outil gère JPEG, PNG, WebP, BMP et GIF jusqu'à 10 Mo localement ; rien n'est envoyé à un serveur. Pour du travail de marque, testez logos, photos produit et moodboards ; l'algorithme extrait naturellement des couleurs dominantes plutôt que des pixels rares.

Comment exporter la palette vers Figma, Adobe XD ou mon projet de code ?

Utilisez le bon format pour chaque destination. Pour Figma et Adobe XD, copiez la liste HEX et collez les échantillons un par un, ou exportez JSON et importez via un plugin de synchronisation de tokens comme Tokens Studio. Pour du CSS brut, utilisez Variables CSS — cela produit :root { --color-1: #...; } que vous référencez avec var(--color-1), permettant des surcharges de thème en une ligne. Pour les pipelines Sass/SCSS, Variables SCSS génèrent $color-1: #...; compilées au build. Pour applications JavaScript (React, Vue, config Tailwind), utilisez Array ou JSON et alimentez votre objet thème. Pour présentations client, téléchargez le PNG de la palette. Renommez toujours --color-1 en noms sémantiques comme --brand-primary ou --surface-elevated avant production.

Combien de couleurs une palette de design system doit-elle vraiment contenir ?

Un design system fonctionnel a besoin de plus que les cinq ou six échantillons qu'une harmonie génère. Le schéma habituel est : une primaire de marque plus 9 teintes/tons d'elle (paliers 50, 100, 200 ... 900) ; une ou deux secondaires de marque avec la même gamme ; une gamme neutre grise de 9-12 paliers pour texte, bordures et surfaces ; plus cinq couleurs sémantiques (vert succès, jaune avertissement, rouge danger, bleu info, anneau de focus) chacune avec sa paire clair/sombre. Cela fait environ 50-70 tokens. Utilisez ce générateur pour figer les cinq teintes de base puis utilisez Tons et Teintes pour étendre chaque base en gamme complète. Material Design, Tailwind et Radix suivent des versions de cette structure.

Comment vérifier que ma palette respecte le contraste WCAG ?

Une jolie palette est inutile si l'utilisateur ne peut pas lire le texte. Après export, prenez chaque paire premier-plan/arrière-plan que vous comptez utiliser (corps sur surface, lien sur fond, étiquette sur bouton) et passez-les dans un vérificateur de contraste WCAG. Visez un ratio minimum de 4.5:1 pour le texte courant et 3:1 pour le texte large (18pt ou 14pt gras) pour respecter WCAG 2.1 AA ; respectivement 7:1 et 4.5:1 pour AAA. Les tons moyens échouent souvent — un cyan vibrant a fière allure mais passe rarement sur blanc. Corrigez en assombrissant le premier plan ou en associant la couleur de marque uniquement à du blanc ou du quasi-noir. Le Vérificateur de Contraste de ce site automatise le calcul.

Comment ajuster une harmonie qui sort trop criarde ou trop fade ?

Les harmonies brutes de la roue chromatique produisent souvent des résultats saturés à outrance car elles gardent la saturation et la luminosité de base sur tous les échantillons. La correction consiste à convertir chaque échantillon en HSL et à l'ajuster indépendamment. Pour calmer une palette criarde : baissez la saturation des couleurs de soutien à 30-50 % tout en gardant la couleur de marque saturée ; c'est le principe dominant-avec-muets derrière presque toute palette premium. Pour réveiller une fade : poussez le contraste de luminosité — placez un échantillon proche de 95 % (surface quasi blanche) et un proche de 15 % (texte quasi noir). La règle 60-30-10 est la valeur par défaut éprouvée : 60 % neutre dominant, 30 % secondaire, 10 % accent. Utilisez l'outil pour générer les maths puis ajustez le HSL manuellement à votre goût.

Pourquoi mes couleurs extraites d'image semblent-elles plus fades que la photo originale ?

Deux choses se passent. Premièrement, k-means renvoie la moyenne de chaque cluster, et la moyenne d'un reflet saturé plus un demi-ton sombre est toujours un ton moins saturé — moyenner désature par définition. Deuxièmement, les photos s'appuient beaucoup sur le micro-contraste et les transitions de dégradé qui se perdent quand vous réduisez des milliers de pixels à cinq échantillons plats. Correction : ré-extrayez avec un nombre de couleurs supérieur (10 au lieu de 5) et vous récupérerez les accents brillants qui étaient moyennés. Puis supprimez manuellement les couleurs moyennes boueuses et gardez seulement les reflets saturés et l'ombre la plus sombre. Sinon, échantillonnez directement avec la pipette sur le pixel le plus vif plutôt que de vous fier aux moyennes de cluster — utile quand vous voulez une couleur d'éclat précise, pas une moyenne.

Fonctionnalités Clés

• Deux modes de génération : Manuel et Depuis Image
• Extraction couleurs dominantes d'images
• 8 méthodes de génération d'harmonie de couleur
• Génération palette monochromatique
• Schémas de couleurs analogues
• Paires de couleurs complémentaires
• Harmonies triadiques et tétradiques
• Génération nuances et teintes
• Générateur palette aléatoire
• Algorithme clustering K-means pour extraction image
• Ajouter/supprimer couleurs (2-10 couleurs)
• 12 belles palettes préréglées
• Aperçu couleurs en direct avec noms
• Cliquez couleurs pour copier codes hex
• Mélanger et inverser palette
• Export vers Variables CSS
• Export vers Variables SCSS
• Export vers format JSON
• Export vers Tableau JavaScript
• Télécharger palette en image PNG
• Upload image glisser-déposer
• Support JPEG, PNG, WebP, BMP, GIF
• Nombre couleurs ajustable (3-10)
• Design mobile responsive
• Support mode sombre
• Traitement 100% côté client
• Aucune donnée envoyée aux serveurs