Générateur de palette de couleurs
Générez des palettes complémentaires, analogues, triadiques et monochromatiques à partir d'une couleur de base — cliquez sur une pastille pour copier son code hex.
1 218 vues
Comment ça marche
La théorie des couleurs définit les règles d'harmonie comme des relations angulaires fixes entre teintes sur un cercle chromatique. Cet outil les calcule dans le modèle HSL (Teinte, Saturation, Luminosité) plutôt qu'en RVB, parce que la Teinte est une valeur naturelle de 0 à 360° sur un cercle — ajouter un angle pour trouver une couleur apparentée est une simple arithmétique. En RVB, les couleurs ne sont que trois canaux d'intensité sans notion inhérente d'« angle », donc le même calcul d'harmonie exigerait de toute façon une conversion interne vers HSL ; cet outil travaille tout simplement dans l'espace où ce calcul est natif.
À partir de la Teinte de votre couleur de base, il dérive : la complémentaire (la teinte unique exactement à l'opposé, base + 180°, pour un contraste maximal), la triadique (trois teintes réparties uniformément sur le cercle à des intervalles de 120°, vives mais équilibrées), l'analogue (teintes voisines à ±30°, qui paraissent calmes et cohérentes car elles sont proches les unes des autres), la complémentaire divisée (les deux teintes encadrant le complément, à ±150°, offrant du contraste avec moins de tension qu'une paire complémentaire pure), et une échelle monochromatique qui garde la Teinte et la Saturation fixes tout en faisant varier la Luminosité vers le haut et le bas. Par exemple, une teinte de base à 200° (un bleu) donne une teinte complémentaire à 20° (un orange) et des teintes triadiques à 320° et 80°.
Ce qu'il faut savoir
- Une recette pratique 60-30-10 : utilisez la couleur de base pour environ 60 % du design, une teinte analogue pour 30 %, et la complémentaire comme accent à 10 % — boutons, liens, mises en avant.
- L'harmonie n'est pas l'accessibilité. Que deux teintes soient mathématiquement liées sur le cercle ne dit rien de leur contraste de luminosité ; vérifiez séparément les combinaisons texte-sur-couleur selon les WCAG.
- Cliquez sur n'importe quelle pastille pour copier son code hex directement dans votre presse-papiers.
- La saturation et la luminosité comptent encore énormément. Deux palettes peuvent partager exactement le même jeu de teintes tout en paraissant d'humeur complètement différente — une version à faible saturation et forte luminosité paraît douce et pastel, tandis que les mêmes teintes à pleine saturation et faible luminosité paraissent audacieuses et dramatiques.
- Les associations culturelles ne suivent pas le cercle chromatique. Le partenaire d'harmonie mathématiquement « correct » d'une teinte ne dit rien de ce que cette couleur signale dans une région ou un secteur donné — le rouge peut évoquer l'alerte dans un contexte et la célébration dans un autre, indépendamment de toute règle d'harmonie.
Un exemple rapide et concret : choisissez #3B82F6 (un bleu moyen, environ 217° de teinte) comme base. Le complément se situe près de 37°, un orange chaud — une paire naturelle pour un bouton principal sur une interface à dominante bleue. Le jeu triadique ajoute des teintes proches de 97° (un vert-jaune) et 337° (un rose magenta), utiles quand un design a besoin de trois couleurs d'accent distinctes mais équilibrées, comme des étiquettes de catégorie ou les séries de données d'un graphique.
Questions fréquentes
Quelle harmonie choisir ?
Les palettes analogues paraissent calmes et cohérentes puisque les teintes sont proches sur le cercle chromatique ; la complémentaire offre un contraste maximal pour les appels à l'action ; la triadique est vive mais équilibrée. La monochromatique est le choix le plus sûr pour les interfaces — une seule teinte, plusieurs niveaux de luminosité, garantissant un rendu unifié même si vous n'êtes pas à l'aise pour mélanger plusieurs teintes vous-même.
Pourquoi la teinte est-elle calculée en HSL plutôt que directement en RVB ?
HSL représente la Teinte comme un angle unique (0–360°) sur un cercle, donc « pivoter de 180° pour trouver le complément » est une addition en une seule étape. Le RVB n'a aucune notion native d'angle — ses trois canaux (rouge, vert, bleu) ne se projettent pas proprement sur un cercle, donc calculer l'harmonie directement en RVB exigerait des mathématiques bien plus complexes pour le même résultat, avec de toute façon des conversions internes dans les deux sens.
Quelle est la différence entre complémentaire et complémentaire divisée ?
La complémentaire utilise la teinte unique exactement à 180° — contraste maximal, mais peut paraître visuellement tendue en quantités égales. La complémentaire divisée utilise les deux teintes de part et d'autre de ce point (±150° depuis la base), conservant un fort contraste tout en paraissant légèrement plus douce et plus facile à équilibrer, ce qui explique pourquoi de nombreuses palettes de logo et de marque s'appuient dessus plutôt que sur une paire complémentaire pure.
Comment copier une couleur ?
Cliquez sur la pastille — son code hex est copié instantanément dans votre presse-papiers et une confirmation apparaît, prête à être collée directement dans du CSS, un outil de design ou du code.
Les palettes générées sont-elles accessibles pour du texte ?
Pas automatiquement. L'harmonie décrit des relations de teinte, pas de contraste de luminosité — deux couleurs harmonieuses peuvent quand même échouer en lisibilité quand l'une est le texte et l'autre le fond, surtout deux teintes de luminosité moyenne similaire. Pour du texte sur une couleur, vérifiez un ratio de contraste WCAG d'au moins 4,5:1 (3:1 pour le texte large) avec un vérificateur de contraste dédié avant de publier.
Outils similaires
Signaler un problème
Générateur de palette de couleurs
Commentaires
Pas encore de commentaires — soyez le premier à en écrire un !