Générateur de palettes de couleurs

Choisissez une couleur de base et nous vous proposons des couleurs qui s'accordent avec elle selon la théorie des couleurs, ainsi qu'une gamme complète de nuances claires et foncées (de 50 à 950) pour votre site ou votre application.

Harmonies de couleurs

Les harmonies reposent sur la position des couleurs sur le cercle chromatique. La complémentaire utilise la couleur opposée (180°) et donne le contraste maximal ; l'analogue, les voisines (±30° et ±60°), calmes et naturelles ; la triadique, trois couleurs à 120° ; la complémentaire adjacente, les deux voisines de l'opposée, plus facile à équilibrer ; et la tétradique, quatre couleurs à 90°. La monochromatique conserve la teinte et fait varier la luminosité.

Un conseil classique est la règle 60-30-10 : une couleur dominante sur 60 % du design, une secondaire sur 30 % et une couleur d'accent sur les 10 % restants.

Nuancier 50-950

Les design systems comme Tailwind CSS, Material ou Bootstrap utilisent pour chaque couleur une gamme allant de 50 (presque blanc) à 950 (presque noir) : les nuances claires pour les fonds, les moyennes pour les boutons et les liens, et les foncées pour les textes et les états actifs.

Nous calculons la palette dans l'espace colorimétrique OKLCH, perceptuellement uniforme : en faisant tourner la teinte ou en changeant la luminosité, les couleurs gardent la même clarté apparente, ce qui n'est pas le cas en HSL (en HSL, un jaune et un bleu de même « luminosité » paraissent très différents).