BrowserTools
Accueil / Générateurs / Générateur de palettes de couleurs

Générateur de palettes de couleurs

Générez des palettes complémentaires, analogues, triadiques, tétradiques, monochromatiques et de nuances/teintes à partir de n'importe quelle couleur de base.

Chargement de Générateur de palettes de couleurs… Si rien ne se passe, activez JavaScript.

La théorie des couleurs est le cadre structuré qui explique quelles combinaisons de couleurs paraissent harmonieuses, énergiques, calmes ou professionnelles, et pourquoi. À sa base, elle s'appuie sur la roue chromatique, une disposition circulaire de teintes où les relations entre les couleurs prédisent la façon dont elles interagiront visuellement. La roue chromatique a été formalisée par Johann Wolfgang von Goethe dans son ouvrage de 1810 « Traité des couleurs » et plus tard affinée par le système de couleurs tridimensionnel d'Albert Munsell. Le design numérique moderne projette ces relations sur l'espace colorimétrique HSL (teinte, saturation, luminosité), où la rotation de la teinte sur un cercle de 360 degrés reflète directement les positions d'une roue chromatique traditionnelle.

Questions fréquentes

Des données de couleur sont-elles envoyées à un serveur ?
Non. Tous les calculs de palette sont effectués dans votre navigateur à l'aide d'arithmétique HSL. La couleur que vous saisissez et les palettes générées n'existent que dans l'onglet de votre navigateur. Aucun événement d'analyse n'est rattaché à l'action de génération et aucune donnée n'est transmise sur le réseau.
Comment les relations de la palette sont-elles calculées mathématiquement ?
L'outil convertit votre couleur d'entrée en HSL, puis fait pivoter la valeur de teinte selon des décalages définis pour chaque schéma : 180° pour la complémentaire, ±30° pour l'analogue, ±120° pour la triadique, ±90° et ±180° pour la tétradique. Les teintes ajoutent de la luminosité vers 100 % par paliers égaux ; les nuances la réduisent vers 0 %. La saturation et la luminosité de la couleur de base sont préservées dans les schémas de rotation de teinte, ce qui maintient la cohésion de la palette.
Quelle est la différence entre complémentaire et complémentaire divisée ?
Une palette complémentaire associe votre couleur de base à la seule teinte directement opposée sur la roue chromatique : fort contraste, audacieuse et intense. Une complémentaire divisée utilise les deux teintes adjacentes à la complémentaire (généralement 30° de chaque côté), ce qui offre un contraste visuel similaire tout en paraissant plus doux et moins criard, la rendant plus facile à manier dans des designs comportant plusieurs éléments.
Quel type de palette dois-je utiliser pour une marque professionnelle ?
Les palettes analogues (teintes voisines) paraissent cohésives et sophistiquées, populaires pour les marques technologiques et financières. Les palettes complémentaires sont audacieuses et accrocheuses, courantes dans les marques grand public et sportives. Les palettes monochromatiques évoquent l'élégance et la retenue. Il n'y a pas de réponse unique ; le choix dépend de la personnalité de la marque. Commencez par l'analogue pour l'accessibilité ou par la complémentaire pour l'énergie.
Qu'est-ce que la règle 60-30-10 ?
La règle 60-30-10 est une directive classique de proportion en design : utilisez votre couleur dominante pour 60 % de la composition, une couleur secondaire pour 30 % et une couleur d'accent pour les 10 % restants. Cette proportion garantit qu'une couleur domine clairement, qu'une deuxième la soutient sans la concurrencer et que l'accent crée des points focaux sans saturer. Elle est née dans l'architecture d'intérieur mais se transpose directement au design web et d'interface.
Les couleurs générées sont-elles accessibles ?
La génération de palettes assure l'harmonie visuelle mais ne garantit pas la conformité d'accessibilité WCAG. Deux couleurs peuvent former une belle paire analogue tout en ayant un ratio de contraste inférieur à 3:1, ce qui échouerait aux WCAG 2.1 pour tout usage de texte. Vérifiez toujours les ratios de contraste de manière indépendante avec un vérificateur dédié avant d'utiliser les couleurs générées pour des combinaisons de texte premier plan/arrière-plan.
Puis-je exporter la palette sous forme de propriétés personnalisées CSS ?
Oui. Le bouton Copier le CSS exporte tous les échantillons d'une palette sous forme de propriétés personnalisées CSS (variables CSS) au format `--color-name: #rrggbb;`. Collez-les dans le bloc `:root` de votre feuille de style pour les rendre disponibles dans tout votre CSS. Ce format est directement compatible avec les systèmes de design bâtis sur des propriétés personnalisées CSS, y compris ceux qui utilisent les extensions de thème personnalisé de Tailwind CSS.
Quel format de couleur l'outil utilise-t-il en sortie ?
La sortie est au format hexadécimal (HEX) par défaut, qui est le format le plus largement pris en charge dans les outils de design, le CSS et la transmission aux développeurs. Les calculs sous-jacents utilisent le HSL pour sa relation intuitive avec la roue chromatique. Si vous avez besoin du RGB, du HSL ou d'autres formats, utilisez l'outil Convertisseur de couleurs pour traduire n'importe quelle valeur HEX.
Comment choisir entre nuances et teintes ?
Les nuances sont créées en mélangeant la couleur de base avec du noir (en réduisant la luminosité), produisant des variations plus sombres et plus sérieuses. Les teintes sont créées en mélangeant avec du blanc (en augmentant la luminosité), produisant des variations plus claires et plus aériennes. Pour les interfaces, les nuances conviennent bien aux états de survol et actifs, aux bordures et au texte. Les teintes conviennent bien aux arrière-plans, aux états désactivés et aux remplissages subtils. La plupart des systèmes de design utilisent les deux : des nuances sombres pour l'emphase, des teintes claires pour les surfaces.
Puis-je générer une palette pour les utilisateurs daltoniens ?
Cet outil génère des palettes fondées sur la théorie des couleurs standard, qui repose sur une différenciation de teinte qui n'est pas pleinement disponible pour les utilisateurs présentant des déficiences de la vision des couleurs. Pour une conception de palette accessible, complétez cet outil avec un simulateur de daltonisme afin de vérifier que vos couleurs retenues restent distinguables sous deutéranopie (la forme la plus courante) et protanopie. Envisagez d'utiliser des motifs ou des formes en plus de la couleur pour transmettre du sens dans les visualisations de données.

À propos de Générateur de palettes de couleurs

Les designers, les ingénieurs d'interface, les équipes de marque et les spécialistes du marketing ont tous besoin de palettes de couleurs structurées. Une startup qui construit une identité de marque a besoin d'une couleur primaire, d'un accent complémentaire et d'un ensemble de teintes neutres qui fonctionnent ensemble sur un logo, un site web, une application et des supports imprimés. Un développeur front-end qui construit un système de design a besoin de tokens de couleur sémantiques (primaire, secondaire, succès, avertissement, erreur) qui dérivent de manière cohérente d'une seule couleur de marque. Un illustrateur doit savoir quelles teintes créeront une tension visuelle et lesquelles paraîtront reposantes. La règle 60-30-10 (60 % de couleur dominante, 30 % de couleur secondaire, 10 % d'accent) est le cadre pratique que la plupart des architectes d'intérieur et des graphistes appliquent pour qu'une palette paraisse équilibrée plutôt que chaotique.

Cet outil calcule huit types de palettes à partir d'une seule couleur de base, toutes dérivées mathématiquement dans l'espace colorimétrique HSL. La complémentaire associe la base à la teinte située exactement à 180 degrés à l'opposé. L'analogue utilise les trois teintes situées dans un rayon de 30 degrés de chaque côté. La triadique divise la roue en trois segments égaux de 120 degrés. La tétradique (carrée) utilise quatre teintes à intervalles de 90 degrés. La complémentaire divisée adoucit le contraste d'une paire complémentaire en utilisant les deux teintes adjacentes à la complémentaire. Les nuances et teintes monochromatiques ne font varier que la luminosité tout en conservant la même teinte et la même saturation. Tout s'exécute dans votre navigateur : pas de serveur, pas d'envoi, pas de compte.

Une remarque pratique essentielle : des couleurs mathématiquement harmonieuses ne sont pas automatiquement accessibles. Le ratio de contraste entre le texte au premier plan et la couleur d'arrière-plan doit respecter les directives WCAG 2.1, soit un minimum de 4,5:1 pour le texte normal et 3:1 pour le grand texte. Deux couleurs visuellement équilibrées peuvent tout de même échouer aux exigences de contraste, en particulier les paires analogues où les teintes sont proches. Faites toujours passer vos combinaisons premier plan/arrière-plan retenues par un vérificateur de contraste avant de finaliser une palette pour une utilisation en production. Rappelez-vous également qu'environ 8 % des hommes et 0,5 % des femmes présentent une forme de déficience de la vision des couleurs ; simulez les vues en deutéranopie et en protanopie de votre palette pour vérifier que les distinctions clés subsistent.

Du prisme d'Isaac Newton à l'empire de l'imprimerie Pantone : l'étonnante histoire des systèmes de couleurs

L'idée que les couleurs forment une roue, un spectre circulaire continu plutôt qu'une échelle linéaire, remonte à Isaac Newton, qui en 1666 a fait dévier un faisceau de lumière solaire à travers un prisme et a projeté le spectre obtenu sur un cercle dans son « Opticks » de 1704, reliant le rouge et le violet à ses extrémités. Newton fut le premier à suggérer que mélanger des couleurs situées aux extrémités opposées du spectre produit une sorte de neutralité visuelle. Cette roue est devenue le fondement conceptuel de toute la théorie des couleurs ultérieure, même si les scientifiques ont découvert plus tard que la perception humaine des couleurs est bien plus complexe qu'un simple modèle circulaire ne le laisse penser.

Johann Wolfgang von Goethe a contesté l'approche purement physique de Newton dans son « Traité des couleurs » de 1810, soutenant que la perception des couleurs est autant psychologique que physique. Bien que largement inexactes en tant que physique, les observations de Goethe sur la façon dont les couleurs suscitent des émotions (les couleurs chaudes paraissant actives, les froides passives) ont directement influencé la psychologie des couleurs utilisée aujourd'hui dans la marque et le marketing. L'école du Bauhaus a assimilé ces idées dans les années 1920, Johannes Itten et Josef Albers développant les exercices de couleur encore enseignés dans les écoles de design du monde entier.

Le système de couleurs commercial moderne avec lequel la plupart des designers interagissent quotidiennement est Pantone, fondé en 1963 lorsque Lawrence Herbert a racheté une petite imprimerie et résolu un problème fondamental : deux imprimeurs de villes différentes ne pouvaient pas reproduire de façon fiable la même couleur à partir d'une description. Herbert a créé un système standardisé de mélange d'encres avec des échantillons numérotés, et le Pantone Matching System est devenu la norme mondiale pour la spécification des couleurs de marque. La couleur Pantone de l'année, lancée en 2000, est devenue un événement culturel qui influence le design de produits, la mode et l'architecture d'intérieur dans le monde entier, une portée remarquable pour ce qui a commencé comme une solution pratique à un problème de coordination d'impression.

Soutenir