Générateur d'harmonie de couleurs

Qu'est-ce que l'harmonie des couleurs ?

L'harmonie des couleurs est l'art de choisir des palettes dont les teintes paraissent intentionnelles plutôt qu'aléatoires — et derrière l'art, il y a une géométrie simple. La roue chromatique dispose les teintes en cercle selon leur position dans le spectre visible ; les palettes harmonieuses sont des ensembles de points sur ce cercle dont les angles relatifs produisent des relations visuelles fiables. Les paires complémentaires (opposées) maximisent contraste et énergie. Les ensembles analogues (proches) se lisent comme calmes et unifiés. Les trios triadiques sont vibrants mais équilibrés. Chaque schéma est une formule éprouvée, pas une règle stricte — il vous donne un point de départ que vous pouvez ajuster ensuite.

Comment utiliser ce générateur

Choisissez une couleur de base et un schéma. La grille ci-dessous affiche chaque couleur de l'harmonie, avec les valeurs hex, RGB et HSL. Cliquez sur une carte pour copier son hex ; cliquez sur Copier sous le bloc de code pour récupérer une déclaration :root de propriétés personnalisées CSS prête à coller. Changez de schéma pour comparer — la même teinte de base produit des ambiances très différentes selon les relations géométriques.

Choisir le bon schéma selon le projet

Le complémentaire fonctionne pour les appels à l'action et les systèmes d'alerte où le contraste est l'objectif. L'analogue est imbattable pour les dégradés de hero, les compositions d'ambiance et les marques au feeling naturel. Le triadique est super pour les UI de produits enfants, les marques de gaming et les infographies à trois groupes catégoriels. Le tétradique et le carré donnent quatre couleurs mais peuvent se battre si toutes les quatre sont utilisées au même poids — choisissez une dominante, un accent, et utilisez les deux autres avec parcimonie. Les palettes monochromatiques se marient magnifiquement avec un fort neutre et ne paraissent jamais datées.

Les maths : rotation de teinte

Chaque schéma est une rotation autour de l'anneau de teinte HSL, en gardant saturation et luminosité inchangées par rapport à la base. complementary est (h + 180°). split-complementary prend la base plus (h + 150°) et (h + 210°) — alternative plus douce au complément pur. analogous est (h − 30°, h, h + 30°). triadic est (h, h + 120°, h + 240°). tetradic est le rectangle (h, h + 60°, h + 180°, h + 240°). square espace quatre points uniformément : (h, h + 90°, h + 180°, h + 270°). monochromatic garde la teinte et fait varier la luminosité sur cinq paliers régulièrement espacés.

Aide-mémoire : schéma vs ambiance

Complémentaire — énergique, accrocheur, polarisant. Complémentaire divisée — audacieux mais plus doux que le complément pur ; idéal pour qui débute en palette. Analogue — calme, harmonieux, idéal pour les marques nature et bien-être. Triadique — joueur, équilibré, vibrant. Tétradique — polyvalent, riche, demande une dominante. Carré — audacieux et équilibré ; plus dur à réussir que le tétradique. Monochromatique — minimal, raffiné, accessible quand associé à un neutre.

Questions fréquentes

Comment choisir une couleur de base ?

Commencez par la teinte la plus utilisée de la marque — ou, si vous partez de zéro, choisissez une couleur dont l'ambiance correspond à la marque : jaunes et oranges chauds pour énergique, bleus et turquoises frais pour fiable, rouges profonds pour sérieux, verts pour naturel. Le schéma propage ensuite cette ambiance sur les emplacements secondaires.

Pourquoi mes couleurs paraissent-elles délavées en mode monochromatique ?

Le mode monochromatique fait varier la luminosité en gardant teinte et saturation fixes. Si votre couleur de base a une saturation faible, les variantes plus claires et plus sombres se compriment vers le gris. Pour des palettes monochromatiques plus riches, partez d'une base saturée et envisagez d'ajuster la saturation en plus de la luminosité dans une application de peinture.

Faut-il utiliser les quatre couleurs d'une palette tétradique à parts égales ?

Presque jamais. Utilisez la règle 60-30-10-10 : 60 % couleur dominante, 30 % secondaire, 10 % et 10 % pour les deux accents. Les palettes à quatre couleurs à poids égal paraissent chaotiques — donnez à une couleur la vedette et aux autres des rôles d'appui.

Ces schémas sont-ils scientifiquement précis ?

Ils sont définis géométriquement, pas calibrés perceptuellement. La roue chromatique HSL ne reflète pas comment l'œil humain perçoit la distance entre teintes — le jaune et le vert paraissent plus proches que les maths ne le laissent croire, tandis que les verts couvrent une région perceptuelle bien plus large que les bleus. Utilisez les schémas comme points de départ et ajustez à l'œil.

Puis-je sauvegarder ma palette ?

Cliquez sur Copier sur le bloc de variables CSS pour mettre la palette dans votre presse-papiers, puis collez dans la feuille de style de votre projet. Nous ne stockons pas les palettes côté serveur — tout est local à votre navigateur.

Quelle différence entre complémentaire divisée et complémentaire ?

Le complémentaire pur utilise deux couleurs directement opposées sur la roue — contraste maximal mais visuellement intense. Le complémentaire divisé remplace l'unique opposé par deux couleurs qui le flanquent (±30° de l'opposé), adoucissant le contraste tout en gardant l'énergie. C'est le schéma le plus facile pour qui n'a jamais construit de palette.

Générateur d'harmonie de couleurs