Quelle différence entre ces harmonies ?

Complémentaire utilise la couleur à 180° opposée sur la roue - contraste maximal, utile pour des accents sur les boutons d'action. Analogue prend des voisines à 30° - faible contraste, apaisant, parfait pour les fonds. Triadique choisit trois couleurs équidistantes (120°) - vibrant et équilibré. Tétradique ajoute une quatrième en deux paires de complémentaires - riche mais plus dur à équilibrer. Monochromatique fait varier luminosité et saturation en gardant la teinte - l'option la plus cohérente.

Comment sont-elles calculées ?

Le hex est converti en HSL, puis la teinte est tournée d'offsets fixes selon l'harmonie (180° en complémentaire, ±30° en analogue, ±120° en triadique, +60/+180/+240 en tétradique). Saturation et luminosité restent constantes pour que les variantes se sentent de la même famille. La monochromatique garde la teinte et fait varier la luminosité de 90 % à 20 %.

Pourquoi HSL et pas HSV ou LCH ?

HSL est l'espace que CSS connaît nativement et qui correspond à la manière dont la plupart des designers pensent les couleurs (« version plus sombre », « opposée »). LCH donnerait des pas plus uniformes perceptivement mais n'est pas encore supporté partout dans les outils de design. HSL est le compromis pragmatique - assez bon pour idéer, avec une sortie stable d'un outil à l'autre.

Ces palettes passent-elles le contraste WCAG ?

Pas forcément - harmonie et accessibilité sont des questions différentes. Deux couleurs peuvent s'harmoniser et avoir un contraste insuffisant pour du texte. Après avoir choisi une palette, faites passer chaque paire texte/fond dans le vérificateur de contraste. Le générateur de nuances aide aussi : la plupart des palettes ont besoin de variantes claires et sombres pour le corps de texte, pas des tons moyens saturés que renvoie une harmonie.

Partir de la couleur de marque ou d'une teinte au hasard ?

Couleur de marque, presque toujours. Le générateur vous aide à trouver des couleurs qui s'accordent avec ce que vous avez déjà. Partir d'une teinte aléatoire donne une jolie palette sans ancrage - et finit en général par vous faire redessiner la marque pour coller à la palette, plutôt que l'inverse.

Générateur de palette de couleurs

Générez des palettes complémentaires, analogues, triadiques, tétradiques et monochromatiques à partir de toute couleur de base.

Couleur de base

Complémentaire

Analogue

Triadique

Tétradique

Monochromatique

Cliquez sur un échantillon pour copier son hex.

Une couleur de base, cinq palettes. Le générateur applique les harmonies classiques - complémentaire, analogue, triadique, tétradique, monochromatique - sur le hex que vous tapez. Chaque ligne montre la palette complète, l'échantillon de base mis en avant et les autres dérivés par rotation de teinte en HSL. Cliquez sur un échantillon pour copier son hex.

Comment l'utiliser

Définissez la couleur de base
Utilisez le sélecteur ou collez un hex. Les cinq lignes de palette se recalculent instantanément.
Parcourez les harmonies
Chaque ligne est une harmonie. Choisissez celle dont l'énergie correspond au projet - calme (analogue), audacieuse (triadique), iconique (complémentaire).
Copiez ce qu'il vous faut
Cliquez sur un échantillon pour copier son hex. L'échantillon de base est marqué.
Validez face au texte
Passez les couleurs choisies dans le vérificateur de contraste pour vous assurer qu'elles tiennent WCAG aux tailles de texte que vous utilisez.

Qu'est-ce que c'est ?

Un générateur de palette prend une couleur de base et produit plusieurs schémas harmoniques en tournant sa teinte sur la roue chromatique. Les harmonies traditionnelles - complémentaire, analogue, triadique, tétradique, monochromatique - viennent de la théorie des couleurs du XIXᵉ siècle et restent la base de la plupart des sélecteurs de design systems (Material, Adobe, Tailwind, IBM Carbon). Elles donnent un point de départ garanti sans dissonance, avant même de régler luminosité et saturation.

Quand l'utiliser

Choisir des couleurs d'accent pour une marque dont le primaire est fixe, concevoir la palette d'un graphique où chaque série doit être distincte, choisir des couleurs d'appui pour une landing depuis une seule couleur de marque, esquisser des moodboards avant de s'engager dans un design system complet, et s'entraîner à voir quelles teintes se lisent bien ensemble en jouant sur un slider.

Erreurs courantes

Considérer la sortie du générateur comme la palette finale - c'est un point de départ. Il faudra souvent ajuster la luminosité de chaque échantillon pour la lisibilité, échanger un échantillon contre un voisin proche qui colle à la marque, et ajouter des gris neutres (les harmonies n'en produisent pas). Choisir une palette sans la tester sur les fonds réels - les couleurs se lisent différemment sur blanc, beige ou surfaces sombres.

FAQ

Quelle différence entre ces harmonies ?: Complémentaire utilise la couleur à 180° opposée sur la roue - contraste maximal, utile pour des accents sur les boutons d'action. Analogue prend des voisines à 30° - faible contraste, apaisant, parfait pour les fonds. Triadique choisit trois couleurs équidistantes (120°) - vibrant et équilibré. Tétradique ajoute une quatrième en deux paires de complémentaires - riche mais plus dur à équilibrer. Monochromatique fait varier luminosité et saturation en gardant la teinte - l'option la plus cohérente.
Comment sont-elles calculées ?: Le hex est converti en HSL, puis la teinte est tournée d'offsets fixes selon l'harmonie (180° en complémentaire, ±30° en analogue, ±120° en triadique, +60/+180/+240 en tétradique). Saturation et luminosité restent constantes pour que les variantes se sentent de la même famille. La monochromatique garde la teinte et fait varier la luminosité de 90 % à 20 %.
Pourquoi HSL et pas HSV ou LCH ?: HSL est l'espace que CSS connaît nativement et qui correspond à la manière dont la plupart des designers pensent les couleurs (« version plus sombre », « opposée »). LCH donnerait des pas plus uniformes perceptivement mais n'est pas encore supporté partout dans les outils de design. HSL est le compromis pragmatique - assez bon pour idéer, avec une sortie stable d'un outil à l'autre.
Ces palettes passent-elles le contraste WCAG ?: Pas forcément - harmonie et accessibilité sont des questions différentes. Deux couleurs peuvent s'harmoniser et avoir un contraste insuffisant pour du texte. Après avoir choisi une palette, faites passer chaque paire texte/fond dans le vérificateur de contraste. Le générateur de nuances aide aussi : la plupart des palettes ont besoin de variantes claires et sombres pour le corps de texte, pas des tons moyens saturés que renvoie une harmonie.
Partir de la couleur de marque ou d'une teinte au hasard ?: Couleur de marque, presque toujours. Le générateur vous aide à trouver des couleurs qui s'accordent avec ce que vous avez déjà. Partir d'une teinte aléatoire donne une jolie palette sans ancrage - et finit en général par vous faire redessiner la marque pour coller à la palette, plutôt que l'inverse.