Générateur de palette de couleurs

Créez des palettes harmonieuses instantanément. Choisissez une couleur, sélectionnez une harmonie, copiez vos nuances.

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.

Questions fréquentes

Qu'est-ce que l'harmonie des couleurs ?
L'harmonie des couleurs désigne la façon dont les couleurs se rapportent les unes aux autres sur le cercle chromatique. Les combinaisons harmonieuses sont esthétiquement agréables car elles suivent des modèles prévisibles de relations de teinte, saturation et luminosité.
Quelle est la différence entre complémentaire et split-complémentaire ?
Complémentaire utilise deux couleurs directement opposées sur le cercle chromatique (séparées de 180°) — contraste élevé mais peut être visuellement agressif. Split-complémentaire utilise une couleur de base plus deux couleurs adjacentes à sa complémentaire (150° et 210°) — toujours saisissant mais plus doux et polyvalent.
Puis-je utiliser ces palettes dans des projets commerciaux ?
Oui. L'outil génère des palettes basées sur les mathématiques de la théorie des couleurs. Les couleurs elles-mêmes ne peuvent pas être protégées par le droit d'auteur, donc toute palette que vous générez est libre d'utilisation dans tout projet, commercial ou personnel.
Quels formats de couleur sont pris en charge ?
Quatre formats : HEX (#RRGGBB), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)) et OKLCH (le standard CSS Color 4). En interne les règles d'harmonie sont appliquées dans l'espace HSL car les rotations de teinte y sont simples. OKLCH est recommandé pour les design systems modernes car il offre une luminosité perceptuellement uniforme — une couleur à L=60 % a la même luminosité perçue quelle que soit sa teinte.
Quelle harmonie de couleurs fonctionne le mieux pour le design d'interface ?
Pour la plupart des interfaces utilisateur, les schémas analogues ou monochromatiques donnent les résultats les plus propres car ils évitent la tension visuelle et laissent le contenu occuper le devant de la scène. Une approche courante consiste à utiliser une palette monochromatique pour les arrière-plans et les surfaces, puis à introduire une seule couleur d'accent complémentaire pour les boutons principaux et les éléments interactifs. Les schémas triadiques fonctionnent bien pour les tableaux de bord ou les applications ludiques qui ont besoin de variété visuelle sans devenir chaotiques. Évitez les schémas purement complémentaires pour les grandes zones de texte — l'effet vibrant entre les teintes opposées à saturation maximale est visuellement fatigant pour les sessions de lecture prolongées.
Comment vérifier si ma palette répond aux exigences de contraste WCAG ?
Après avoir généré votre palette, testez chaque paire premier-plan/arrière-plan avec un vérificateur dédié. Cet outil inclut une matrice de contraste WCAG intégrée sous la palette qui montre le ratio pour chaque paire et les marque AAA (≥ 7:1), AA (≥ 4,5:1), AA+ (≥ 3:1 grand texte seulement) ou échec. Des validateurs externes comme WebAIM's Contrast Checker sont aussi utiles pour vérifier une paire spécifique. En règle générale : texte sombre sur fond clair et texte clair sur fond sombre passent généralement ; les couleurs de valeur moyenne associées échouent fréquemment et doivent être évitées pour le corps de texte.
Comment verrouiller une couleur et regénérer le reste de la palette ?
Cliquez l'icône cadenas en haut à droite d'un swatch pour figer cette couleur — elle prend un fond rempli avec l'icône inversée. Cliquez ensuite Regénérer (ou tapez la barre d'espace) et seuls les swatches déverrouillés sont recalculés d'après la couleur de base et l'harmonie. Ce workflow est essentiel quand vous avez une couleur de marque fixe et cherchez les quatre couleurs qui l'accompagnent. Vous pouvez verrouiller plusieurs swatches ; les autres sont recalculés à chaque régénération.
Qu'est-ce qu'OKLCH et faut-il l'utiliser plutôt que HEX ?
OKLCH est un espace colorimétrique du CSS Color Module 4 qui stocke une couleur comme Luminosité, Chroma (saturation) et Teinte. Contrairement à HEX ou HSL, OKLCH est perceptuellement uniforme — deux couleurs avec la même valeur L paraissent également lumineuses à l'œil humain, quelle que soit leur teinte. Idéal pour construire des design systems cohérents : on peut générer des échelles tonales (100, 200, 300…) qui semblent équilibrées. Les navigateurs modernes (Chrome 111+, Safari 15.4+, Firefox 113+) supportent oklch() nativement en CSS. Pour partager une couleur unique ou coller dans des outils legacy, restez sur HEX. Pour les design systems et les palettes thèmes clair/sombre, préférez OKLCH.
Ma palette est-elle sauvegardée ? Puis-je la retrouver plus tard ?
Oui, de deux façons. Premièrement, chaque palette générée est ajoutée automatiquement à un Historique local (les 20 dernières), stocké dans votre navigateur via localStorage. Cliquez l'onglet Historique sous les swatches pour restaurer une palette précédente. Deuxièmement, vous pouvez marquer ⭐ n'importe quelle entrée pour l'épingler aux Favoris (illimités). Rien n'est envoyé à un serveur — les données vivent seulement dans votre navigateur sous les clés color-palette-history-v1 et color-palette-favorites-v1. Vider votre stockage navigateur les efface. Pour partager ou transférer entre appareils, utilisez le bouton Partager le lien — il encode la palette dans l'URL.
Comment fonctionne l'extraction depuis une image ? L'image est-elle envoyée quelque part ?
L'image ne quitte jamais votre appareil. Quand vous déposez ou sélectionnez un fichier, l'outil le charge dans un canvas en mémoire, le réduit à 120 pixels par côté maximum pour la rapidité, puis lance un clustering k-means (k=5, 8 itérations) sur les valeurs RGB des pixels. Les cinq centres de clusters obtenus sont vos couleurs dominantes, triées ensuite par luminance pour un ordre de palette naturel. Aucune requête réseau, aucun upload — tout est calculé côté client en JavaScript.
Pourquoi la palette change-t-elle quand je sélectionne une simulation de vision ?
Le toggle Vision simule comment la palette apparaît à quelqu'un atteint de protanopie (cécité rouge), deutéranopie (cécité verte) ou tritanopie (cécité bleue). Environ 8 % des hommes d'ascendance nord-européenne ont une forme de déficience de la vision des couleurs. L'outil applique des matrices de transformation publiées (Brettel/Machado) dans l'espace RGB à chaque couleur affichée, donc les swatches, l'aperçu UI et la matrice de contraste reflètent tous ce que cette personne verrait. Les données de palette ne sont pas modifiées — les codes HEX copiés, l'URL partagée et les exports utilisent vos couleurs originales. Utilisez la simulation pour vérifier que votre palette communique correctement sans dépendre uniquement de la couleur.
Puis-je partager une palette précise par URL ?
Oui. Votre palette, harmonie et format sont encodés dans l'URL de la page sous la forme ?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.