Comment fonctionne le générateur de palette
Choisissez une couleur de base avec le sélecteur ou tapez une valeur HEX directement. Sélectionnez l'une des cinq règles d'harmonie — Complémentaire, Analogue, Triadique, Split-Complémentaire ou Monochromatique. L'outil génère une palette de 5 couleurs via des calculs HSL, entièrement dans votre navigateur.
Chaque swatch a une icône cadenas 🔒 — cliquez pour figer une couleur qui vous plaît. Cliquez sur Regénérer (ou tapez la barre d'espace) et seuls les swatches déverrouillés reçoivent de nouvelles valeurs. Vous pouvez aussi cliquer sur Modifier pour saisir une valeur HEX exacte.
Votre palette et votre harmonie sont encodées dans l'URL de la page. Copiez l'URL pour partager votre palette exacte — la personne qui l'ouvre verra les mêmes couleurs. Pratique pour Slack, un courriel ou vos notes.
Basculez le format entre HEX, RGB, HSL et OKLCH. OKLCH est le standard moderne CSS Color 4, il offre une luminosité perceptuellement uniforme, idéale pour construire des design tokens fiables. Le format choisi détermine ce qui est copié quand vous cliquez un swatch.
Le bouton Exporter ouvre un menu avec des extraits prêts à coller : variables CSS, variables SCSS, configuration Tailwind, JSON, et SVG téléchargeable. Raccourcis clavier : Espace regénère, C copie toute la palette, les touches 1 à 5 copient chaque swatch individuellement.
Sous la palette, quatre panneaux aident à évaluer et réutiliser votre travail : un aperçu UI réel, une matrice de contraste WCAG, un historique local (20 dernières palettes) avec favoris, et un extracteur image-vers-palette. Tout est calculé dans votre navigateur — aucun appel API, aucun suivi, aucun compte.
Référence des fonctionnalités
Verrouiller et regénérer
Cliquer sur l'icône cadenas d'un swatch fige cette couleur. Regénérer (bouton ou barre d'espace) recalcule seulement les swatches déverrouillés en utilisant la couleur de base et la règle d'harmonie. Utile pour itérer en gardant une ou deux couleurs fixes — typique quand vous avez une couleur de marque et cherchez les quatre couleurs qui l'accompagnent.
URL partageable
Votre palette est encodée dans la query string sous la forme ?p=hex1-hex2-hex3-hex4-hex5&h=analogous&f=hex. Un ! en fin de HEX marque un swatch verrouillé. Cliquez sur « Partager le lien » pour copier l'URL courante ; l'ouvrir sur n'importe quel appareil restaure la palette, l'harmonie et le format.
Formats : HEX, RGB, HSL, OKLCH
HEX (#RRGGBB) reste le format universel pour partager et pour CSS. RGB correspond directement aux canaux sRGB pour les outils legacy. HSL est utile quand on veut ajuster une couleur par teinte, saturation ou luminosité. OKLCH — issu de CSS Color Module 4 — utilise un espace perceptuellement uniforme où des pas égaux de L donnent une luminosité perçue égale ; il est à la base des design systems modernes comme Tailwind v4 et Radix UI. Le format choisi affecte ce que vous copiez, pas la palette générée.
Options d'export
Cliquer sur Exporter ouvre un panneau avec cinq onglets : CSS (custom properties --palette-1 à --palette-5), SCSS (variables avec $), Tailwind (échelle colors.palette prête à coller dans tailwind.config.js), JSON (avec hex + rgb + hsl par swatch) et SVG (fichier téléchargeable avec cinq rectangles à importer dans Figma, Illustrator ou Sketch). Chaque format a un bouton Copier ; SVG propose aussi un téléchargement direct.
Raccourcis clavier
Tapez Espace pour regénérer les swatches déverrouillés. Tapez C pour copier toute la palette (les cinq codes HEX, séparés par virgule) dans le presse-papiers. Les touches 1 à 5 copient un swatch individuellement. Les raccourcis sont désactivés pendant que vous tapez dans un champ, ils n'entrent donc jamais en conflit avec l'édition de la couleur de base.
Panneau Aperçu UI
Un mini mockup avec un titre, du corps de texte, un bouton principal, un bouton secondaire et une carte atténuée — le tout construit avec votre palette. Les couleurs sont assignées automatiquement par luminance : le swatch le plus clair devient l'arrière-plan, le plus foncé devient le texte, les autres remplissent les rôles d'accent, atténué et bordure. Ça révèle instantanément si votre palette fonctionne vraiment dans une interface (vs. être jolie en carrés abstraits).
Matrice de contraste WCAG
Une matrice 5×5 montrant le ratio de contraste entre chaque paire de swatches. Les badges indiquent la conformité WCAG : AAA (≥ 7:1, le plus strict), AA (≥ 4,5:1, le seuil légal pour le corps de texte), AA+ (≥ 3:1, grand texte seulement) ou ✕ (échec). Lisez comme « couleur de texte depuis la colonne, arrière-plan depuis la ligne ». Utile pour choisir des paires texte/fond sûres avant la mise en ligne.
Simulation de vision
Bascule l'aperçu (swatches, mockup UI, matrice de contraste) pour simuler comment votre palette apparaît pour les trois déficiences de vision des couleurs les plus courantes : protanopie (cécité rouge, ~1 % des hommes), deutéranopie (cécité verte, ~6 % des hommes) et tritanopie (cécité bleue, rare). Les données de la palette restent inchangées — les codes HEX copiés restent vos originaux. Utilise les matrices de transformation Brettel/Machado appliquées dans l'espace RGB.
Historique et favoris
Chaque palette générée est sauvegardée localement dans votre navigateur (les 20 dernières). Cliquez une entrée d'historique pour la restaurer instantanément. Cliquez l'étoile ★ pour épingler une palette aux Favoris, illimités. Tout vit dans localStorage sous les clés color-palette-history-v1 et color-palette-favorites-v1 — aucun serveur, aucun compte. Utilisez Vider pour effacer une liste.
Extraction depuis une image
Glissez une image (ou cliquez pour choisir un fichier) et l'outil lance un clustering k-means sur les pixels pour extraire les 5 couleurs dominantes. L'image est réduite à 120 pixels par côté maximum avant analyse pour rester rapide même sur mobile. Tout se passe dans votre navigateur — l'image ne quitte jamais votre appareil. Utile pour faire matcher une marque à une photo, extraire les couleurs d'un logo, ou démarrer une palette depuis une image d'inspiration.
Fondamentaux de la théorie des couleurs
La théorie des couleurs commence par le cercle chromatique, un arrangement circulaire de teintes qui révèle les relations entre les couleurs. Les trois couleurs primaires — rouge, jaune et bleu dans la théorie traditionnelle des pigments, ou rouge, vert et bleu dans les modèles de couleurs basés sur la lumière (additifs) — ne peuvent pas être créées en mélangeant d'autres couleurs. Les couleurs secondaires sont produites en mélangeant deux primaires : orange (rouge + jaune), vert (jaune + bleu) et violet (bleu + rouge). Les couleurs tertiaires comblent les lacunes entre les teintes primaires et secondaires, avec des noms comme rouge-orange, jaune-vert et bleu-violet. Comprendre où une couleur se situe sur le cercle est la base de chaque règle d'harmonie que cet outil utilise.
Les couleurs portent de fortes associations psychologiques qui varient selon la culture mais suivent certains patterns universels. Les couleurs chaudes — rouges, oranges et jaunes — sont associées à l'énergie, l'urgence et la chaleur. Elles ont tendance à avancer visuellement (semblant plus proches du spectateur) et sont couramment utilisées dans les appels à l'action, l'image de marque alimentaire et le design sportif. Les couleurs froides — bleus, verts et violets — évoquent le calme, la confiance et la spaciosité. Elles reculent visuellement et dominent l'image de marque dans la santé, la finance et la technologie. Les couleurs neutres (noir, blanc, gris, beige) offrent de l'espace et du contraste sans rivaliser avec la palette dominante. Comprendre le poids émotionnel de vos teintes choisies vous aide à sélectionner des couleurs qui renforcent plutôt que compromettent l'intention de votre design.
Les règles d'harmonie intégrées dans cet outil résolvent chacune un problème de design différent. Les schémas complémentaires (couleurs opposées sur le cercle, séparées de 180°) créent un contraste et une tension visuelle maximaux — puissants pour les sections héros et les mises en avant de produits, mais fatigants pour une lecture prolongée. Les schémas analogues (teintes voisines, séparées de 30°–60°) semblent cohérents et naturels, idéaux pour les arrière-plans, illustrations et interfaces calmes. Les schémas triadiques (trois couleurs également espacées de 120°) offrent une variété vibrante tout en maintenant l'équilibre, couramment utilisés dans les marques ludiques ou créatives. Le split-complémentaire adoucit la dureté d'une paire complémentaire pure en décalant l'une des deux couleurs opposées de 30°. Les palettes monochromatiques utilisent une seule teinte à différentes saturations et luminosités — ultra-cohérentes, élégantes et faciles à réussir.
Choisir des couleurs accessibles
Les belles palettes ne sont efficaces que si tous les utilisateurs peuvent les percevoir. Les Web Content Accessibility Guidelines (WCAG) définissent des ratios de contraste minimaux qui garantissent que le texte reste lisible sur son arrière-plan. Pour le texte de corps de taille normale (en dessous de 18pt ou 14pt en gras), le ratio de contraste minimal est de 4,5:1. Pour le grand texte — titres et texte en gras à 18pt ou plus — le seuil s'assouplit à 3:1. Le niveau WCAG AAA amélioré exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. Ces ratios comparent la luminance relative des couleurs de premier plan et d'arrière-plan. Un texte blanc pur (#FFFFFF) sur un fond noir pur (#000000) atteint un ratio de contraste de 21:1 — le maximum possible — tandis que le gris moyen sur gris clair pourrait n'atteindre que 2:1, ce qui échoue à toutes les normes d'accessibilité.
Le daltonisme affecte environ 8 % des hommes et 0,5 % des femmes d'ascendance nord-européenne. La forme la plus courante est le daltonisme rouge-vert (deutéranopie et protanopie), qui rend difficile la distinction des rouges des verts. Concevoir en tenant compte du daltonisme signifie ne jamais se fier uniquement à la couleur pour transmettre une signification — toujours associer les indices de couleur à des formes, textures, icônes ou étiquettes. Par exemple, un tableau de bord qui affiche les erreurs en rouge et les succès en vert devrait également utiliser une icône X pour les erreurs et une coche pour les succès. Des outils comme le Colour Contrast Analyser et des extensions de navigateur comme NoCoffee permettent de simuler diverses formes de déficience de la vision des couleurs et de tester votre palette avant de la publier. En cas de doute, les outils qui calculent les ratios WCAG pour chaque paire de couleurs de votre palette sont inestimables à l'étape du design.
Types d'harmonies de couleurs
Complémentaire
Deux couleurs directement opposées sur le cercle chromatique — ex. : bleu + orange, rouge + vert. Cette combinaison produit un contraste et une énergie visuelle maximaux : idéale pour les appels à l'action, les mises en avant de produits et les bannières héros. Le risque est l'abus : de grandes zones de couleurs complémentaires à saturation maximale peuvent vibrer inconfortablement et fatiguer l'œil lors d'une lecture prolongée.
Analogue
Trois à cinq couleurs adjacentes sur le cercle chromatique (séparées de 30°–60°) — ex. : bleu, bleu-vert, vert. Les schémas analogues paraissent naturels et cohésifs, évoquant souvent les paysages et les textures organiques. Le compromis est un faible contraste entre les couleurs de la palette, donc on a généralement besoin d'un neutre fort (gris foncé ou blanc) pour rendre le texte lisible. Très utilisé dans l'image de marque inspirée de la nature et les interfaces calmes.
Triadique
Trois couleurs également espacées de 120° sur le cercle chromatique — ex. : rouge, jaune, bleu (la triade primaire). Les schémas triadiques sont vibrants et visuellement équilibrés, offrant un contraste fort sans la dureté d'une paire purement complémentaire. Difficiles à bien exécuter : l'approche standard est une couleur dominante pour les grandes zones et deux accents utilisés avec parcimonie. Populaire dans les marques ludiques, créatives et pour enfants.
Split-complémentaire
La couleur de base plus les deux couleurs encadrant sa complémentaire (à ±30° de la teinte opposée). Cela produit une tension visuelle moindre qu'une paire purement complémentaire tout en maintenant un contraste fort. Elle offre plus de flexibilité aux designers — les deux couleurs flanquantes se lisent comme des accents distincts plutôt qu'un seul bloc opposé. Un bon schéma de départ quand le complémentaire semble trop agressif.
Tétradique / Carré
Quatre couleurs formant un rectangle ou un carré sur le cercle chromatique. Les palettes tétradiques sont parmi les plus riches disponibles, offrant deux paires complémentaires et une variété maximale de teintes. Le défi : avec quatre couleurs également proéminentes, les palettes peuvent paraître chargées et incohérentes. La correction standard est de choisir une couleur dominante et de traiter les trois restantes comme des accents de soutien à saturation ou taille réduite.
Monochromatique
Variations de luminosité et de saturation d'une seule teinte — sans changements de teinte. Les palettes monochromatiques paraissent propres, professionnelles et élégantes. Elles sont les plus faciles à exécuter correctement et les plus difficiles à rendre ennuyeuses : le défi est de générer suffisamment de contraste entre les tons pour que la hiérarchie soit claire. Populaire dans le design minimaliste, l'image de marque de luxe et la documentation technique. L'ajout d'un seul accent neutre empêche la palette de paraître plate.
Outils connexes : Sélecteur de couleur, Vérificateur de contraste, et Terrain de jeu CSS.
Comment choisir une palette pour une marque ou une interface
Couleur primaire
La couleur dominante de la marque, elle apparaît le plus fréquemment dans le produit (logo, boutons principaux, titres clés). Une bonne couleur primaire fonctionne à saturation maximale et aussi bien en version teintée (plus claire) qu'en version ombrée (plus foncée). Testez votre primaire à plusieurs valeurs de luminosité avant de vous engager : une teinte qui paraît excellente à saturation moyenne peut devenir terne à 20% de luminosité ou néon à 90%.
Couleur secondaire
Le complément à la primaire — souvent utilisé comme couleur d'action pour les boutons, liens et états de focus. Dans beaucoup de design systems, la couleur secondaire est celle sur laquelle les utilisateurs cliquent le plus. Choisissez une secondaire qui contraste clairement avec la primaire (pas deux teintes similaires) et passe le contraste WCAG AA sur les variantes de fond claires et sombres.
Couleurs neutres
Gris et blancs cassés pour les arrière-plans, les cartes de surface, le texte de corps, les bordures et les séparateurs. Les couleurs neutres sont les plus utilisées dans une interface malgré le fait qu'elles soient les moins remarquées — une page typique est composée à 70–80% de neutres. Les gris chauds (avec une légère dominante jaune ou rouge) paraissent plus conviviaux ; les gris froids (dominante bleue) paraissent plus techniques. Évitez le gris pur #808080, il échoue presque toujours aux tests d'accessibilité WCAG.
Couleurs sémantiques
Rouge (erreur / danger), jaune ou ambre (avertissement), vert (succès), bleu (info). Les couleurs sémantiques remplacent la palette de la marque dans les contextes fonctionnels — elles communiquent l'état du système et doivent être immédiatement reconnaissables. Assurez-vous que chaque couleur sémantique passe le contraste WCAG AA (4,5:1) sur les fonds typiques où elle apparaît. Évitez d'utiliser votre rouge de marque comme couleur d'erreur sémantique si la marque utilise le rouge en évidence ailleurs — l'ambiguïté visuelle mine la confiance.
La règle 60–30–10
Un principe classique du design d'intérieur qui se traduit parfaitement en interface : 60% de couleur neutre ou d'arrière-plan, 30% de couleur primaire de la marque, 10% d'accent ou de secondaire. Les proportions empêchent toute couleur unique de dominer la composition. Surexploiter la couleur primaire — la plaquer sur chaque section et bouton — crée du bruit visuel et dilue sa capacité à attirer l'attention là où c'est le plus nécessaire.
Formats d'export
Une fois votre palette établie, exportez-la dans le format que votre flux de travail requiert : configuration Tailwind CSS (à intégrer dans tailwind.config.js colors), propriétés CSS personnalisées (à coller dans votre bloc :root), ou planche SVG de swatches (à importer dans Figma, Illustrator ou Sketch pour partager avec les parties prenantes). Les trois formats sont disponibles dans le panneau Exporter ci-dessus.
Questions fréquentes
Qu'est-ce que l'harmonie des couleurs ?
Quelle est la différence entre complémentaire et split-complémentaire ?
Puis-je utiliser ces palettes dans des projets commerciaux ?
Quels formats de couleur sont pris en charge ?
Quelle harmonie de couleurs fonctionne le mieux pour le design d'interface ?
Comment vérifier si ma palette répond aux exigences de contraste WCAG ?
Comment verrouiller une couleur et regénérer le reste de la palette ?
Qu'est-ce qu'OKLCH et faut-il l'utiliser plutôt que HEX ?
Ma palette est-elle sauvegardée ? Puis-je la retrouver plus tard ?
Comment fonctionne l'extraction depuis une image ? L'image est-elle envoyée quelque part ?
Pourquoi la palette change-t-elle quand je sélectionne une simulation de vision ?
Puis-je partager une palette précise par URL ?
?p=hex1-hex2-hex3-hex4-hex5&h=analogous&f=oklch. Un ! en fin de HEX (ex : ff0000!) marque le swatch comme verrouillé. Cliquez sur « Partager le lien » pour copier l'URL dans le presse-papiers — la personne qui l'ouvre voit exactement la même palette, swatches verrouillés inclus, sur n'importe quel appareil. L'URL se met à jour automatiquement 300 ms après chaque changement, vous n'avez jamais besoin de « sauvegarder » manuellement.