Palette de couleurs complémentaires
Choisissez une couleur de base : sa complémentaire (opposée à 180° sur le cercle chromatique) est calculée automatiquement, avec des nuances claires et foncées des deux teintes. Traitement 100% local dans votre navigateur — rien n'est envoyé à un serveur.
Comment ça marche
Sur le cercle chromatique, une couleur complémentaire est celle située exactement à l'opposé de la couleur de base (180° de différence de teinte). Associées, ces deux teintes créent un fort contraste visuel, très utilisé en design pour faire ressortir un bouton d'action, un logo ou un élément clé sur un fond de la couleur opposée. Cet outil calcule la complémentaire exacte puis décline chaque teinte en une version plus sombre et une version plus claire, pour obtenir directement une mini-palette utilisable.
Pourquoi utiliser une palette complémentaire plutôt qu'une palette de teintes proches ?
Une palette de teintes proches (analogues) donne une ambiance harmonieuse et discrète, tandis qu'une palette complémentaire crée volontairement de la tension visuelle et attire l'œil. Elle convient bien à un bouton d'appel à l'action, un badge de notification ou tout élément qui doit se détacher nettement du reste de l'interface.
Comment utiliser les nuances claires et foncées générées ?
Les nuances foncées conviennent bien aux textes ou aux états "survol"/"actif", tandis que les nuances claires sont utiles pour des fonds de section, des états désactivés ou des badges discrets, tout en restant dans la même famille de teinte que la couleur principale ou sa complémentaire.
Tout le calcul colorimétrique (conversion HEX/HSL, rotation de teinte) s'exécute localement en JavaScript, directement dans votre navigateur.