Générer des teintes, nuances et palettes harmonieuses depuis n'importe quelle couleur
Un générateur de palette prend une couleur de base et construit autour d'elle un ensemble de couleurs coordonnées — teintes plus claires, nuances plus sombres et compagnes harmonieuses choisies selon des relations de théorie des couleurs plutôt qu'au hasard. Choisir une seule couleur qui plaît est facile ; la transformer en une palette complète qui paraît intentionnelle est la partie difficile, car des couleurs qui jurent ou se ressemblent trop donnent un air amateur à un design. Cet outil gère les relations pour vous : vous partez d'une couleur et obtenez un schéma utilisable en quelques secondes.
Les harmonies produites viennent de positions sur le cercle chromatique : les complémentaires sont opposées pour un fort contraste, les analogues sont voisines pour une impression calme et cohérente, et les triades sont réparties uniformément pour une variété équilibrée. Teintes et nuances naissent en gardant la teinte fixe et en ajustant la luminosité, c'est ainsi qu'on bâtit la rampe claire-à-sombre cohérente dont une UI a besoin pour fonds, texte et états. Tout est généré dans votre navigateur avec des valeurs HEX copiables prêtes pour votre CSS ou outil de design.
Une teinte est la couleur de base mêlée vers le blanc (plus claire), et une nuance vers le noir (plus sombre). Générer teintes et nuances garde la même teinte en variant la luminosité, ce qui produit une famille coordonnée plutôt que des couleurs sans lien.
Ce sont des relations sur le cercle chromatique. Les complémentaires sont opposées pour un fort contraste, les analogues sont voisines pour un rendu harmonieux, et les triadiques sont réparties uniformément pour une variété équilibrée. Chacune sert une ambiance de design différente.
Les palettes arrivent avec des valeurs HEX que vous copiez directement dans le CSS ou un outil de design, HEX étant le format le plus accepté. De là, vous pouvez convertir toute couleur en RGB ou HSL si un outil particulier en a besoin.
L'harmonie seule ne garantit pas la lisibilité — le texte a besoin d'un contraste suffisant avec son fond. Utilisez les extrémités claires et sombres d'une rampe de teintes/nuances pour les paires texte-sur-fond et vérifiez-les contre les ratios de contraste WCAG avant la mise en ligne.
Générateur de dégradé CSS · Vérificateur de contraste · Mélangeur de couleurs · Trouveur de nom de couleur