Générateur de palette de couleurs

Ce que fait ce générateur

Tire une palette à cinq couleurs réellement utilisable — pas le bruit chaotique d'un tirage RGB purement aléatoire. Il pioche dans un pool curé de palettes graines testées par des designers environ deux tiers du temps, et le tiers restant est construit algorithmiquement à partir de règles d'harmonie (analogue, triadique, complémentaire divisée, tétradique, complémentaire-avec-neutres) avec des plages de saturation et de luminosité réglées par ambiance. Choisissez une ambiance — chaude, froide, pastel, vibrante, terre, monochrome ou auto — pour orienter la sortie vers une sensation précise. Verrouillez n'importe quelle couleur pour la conserver entre les tirages ; les emplacements non verrouillés sont remplacés à chaque fois.

Comment utiliser le générateur

Choisissez une ambiance (ou laissez sur Auto pour un mélange). Cliquez sur Générer ou appuyez juste sur Espace pour tirer une nouvelle palette. Cliquez sur n'importe quel code hex pour le copier dans votre presse-papiers. Cliquez sur l'icône cadenas d'une couleur que vous voulez garder, puis retirez pour remplacer les autres. Utilisez Copier le CSS pour récupérer un bloc :root de propriétés personnalisées prêt à coller, ou Copier le JSON pour un tableau de chaînes hex à déposer dans un fichier de configuration ou un export de design tokens.

Ce qui rend une palette intentionnelle

Cinq couleurs est le bon équilibre — assez de variété pour primaire / secondaire / accent / neutre clair / neutre foncé, sans en avoir trop pour qu'aucune ne domine. Dans ces cinq, planifiez une hiérarchie : une couleur dominante porte 60 % de la mise en page, une secondaire 30 %, et les trois restantes se partagent les 10 % restants. L'ambiance Auto est super pour idéer ; Terre et Pastel fonctionnent bien pour l'éditorial et le bien-être ; Vibrante pour les produits enfants, le gaming et les landing pages bourrées d'appels à l'action ; Monochrome quand vous voulez une rampe à teinte unique.

Quand chaque ambiance fonctionne

Auto — meilleur mélange de graines curées et de schémas algorithmiques ; le bon point de départ si vous ne savez pas encore ce que vous voulez. Chaude — palettes coucher de soleil, marques alimentaires, campagnes énergie-et-chaleur. Froide — fintech, SaaS, tout ce qui doit paraître calme et fiable. Pastel — produits enfants, marques de beauté, sections hero douces. Vibrante — gaming, musique, tout ce qui doit attirer l'attention. Terre — outdoor, durabilité, agriculture, immobilier. Monochrome — éditorial minimaliste, systèmes de marque à couleur unique, design accessible.

Questions fréquentes

Pourquoi les couleurs ne paraissent-elles pas complètement aléatoires ?

Parce que du RGB purement aléatoire est affreux — teintes qui jurent, demi-tons boueux, pas de hiérarchie. Nous tirons environ deux tiers des palettes d'un pool curé de graines validées par des designers (avec un petit jitter de teinte pour ne pas voir les mêmes cinq couleurs deux fois de suite). Le tiers restant est construit avec des règles d'harmonie et des plages de saturation/luminosité éprouvées pour l'usage. Le résultat reste aléatoire, mais chaque tirage est quelque chose qu'on pourrait mettre en production.

Puis-je verrouiller une couleur et retirer le reste ?

Oui. Cliquez sur l'icône cadenas d'une couleur pour la geler. Les couleurs verrouillées sont gardées entre les tirages ; les emplacements non verrouillés reçoivent de nouvelles couleurs. C'est le workflow que la plupart des designers utilisent : gardez votre couleur de marque verrouillée et retirez les quatre autour jusqu'à ce que ça clique.

Les palettes sont-elles accessibles (WCAG) ?

Pas automatiquement — la plupart des palettes tirées contiennent au moins une paire qui échoue au WCAG en texte sur fond. Servez-vous du résultat comme point de départ, puis vérifiez les combinaisons texte/fond précises avec notre outil Vérificateur de contraste. Si la palette sert à de l'imagerie marketing (pas du texte), vous avez plus de marge.

Comment exporter vers mon outil de design ?

Copier le CSS émet un bloc :root { --color-1: #...; } prêt à coller dans une feuille de style. Copier le JSON émet un tableau de chaînes hex — utile pour les plugins Figma, des design tokens en JSON ou tout fichier de configuration. Pour Tailwind, collez le JSON dans votre tailwind.config.js sous theme.extend.colors.

Que génère vraiment « Monochrome » ?

Cinq tons de la même teinte — même H, même S, avec L échelonné de 0,92 (très clair) à 0,18 (très sombre). Le résultat est une rampe monochromatique complète, parfaite pour un système de marque à couleur unique ou une palette de surfaces neutres. Verrouillez la couleur du milieu sur votre couleur de marque, puis retirez pour faire varier la saturation tout en gardant la même forme de luminosité.

Y a-t-il quelque chose envoyé à un serveur ?

Non. Le pool de graines, les maths d'harmonie et les actions de copie tournent toutes dans votre navigateur. Ouvrez DevTools → Réseau et tirez à nouveau — aucune requête. Tirez des palettes pour des produits inédits sans rien faire fuiter.

Générateur de palette de couleurs