Qu'est-ce que Recherche de couleurs complémentaires ?

Le Trouveur de Couleurs Complémentaires calcule la couleur opposée sur le cercle chromatique pour n'importe quelle valeur. Il affiche également les harmonies analogues, triadiques et complémentaires divisées pour vous aider à construire une palette cohérente.

L'outil s'appuie sur le moteur HSL de chroma-js et fait tourner la roue chromatique selon des angles fixes pour produire six harmonies : complémentaire (180°), analogue (±30°), triadique (120° et 240°), complémentaire divisée (150° et 210°), tétradique/carrée (90°, 180°, 270°) et monochromatique (déclinaisons plus claires et plus sombres de la couleur de base). Chaque échantillon affiche ses codes HEX, RGB et HSL et se copie en un clic dans l'un des trois formats, prêt à coller dans Figma, dans une config Tailwind ou dans une règle CSS.

Comment utiliser

1. Étape 1 — Saisissez une couleur de base au format HEX (#FF6600) ou RGB (255 102 0), ou sélectionnez-en une avec le sélecteur de couleur.
2. Étape 2 — Visualisez la couleur complémentaire (opposée à 180° sur le cercle chromatique) et ses codes couleur instantanément.
3. Étape 3 — Explorez les harmonies supplémentaires (analogues, triadiques, complémentaires divisées) et copiez la valeur de n'importe quelle nuance.

Quand l'utiliser

• Esquisser une palette de marque autour d'une couleur primaire sans ouvrir Adobe Color.
• Choisir une couleur de bouton d'appel à l'action qui ressorte sur le fond de la page.
• Sélectionner des couleurs de séries de graphique qui restent lisibles côte à côte.

Résultat

Un designer de marque saisit l'orange primaire #FF8C00 et obtient le bleu complémentaire #0073FF, ainsi que les tons chauds analogues #FF4400 et #FFB800 pour une palette cohérente.

FAQ

Quelle différence entre complémentaire et complémentaire divisée ?

La complémentaire est la couleur directement opposée sur la roue (180°). La divisée prend les deux couleurs qui encadrent cet opposé (150° et 210°). La version divisée est moins agressive et s'intègre plus facilement dans une interface complète sans choquer.

Les harmonies marchent-elles avec une base très sombre ou très pâle ?

Les harmonies basées sur la teinte (complémentaire, analogue, triadique, complémentaire divisée, tétradique) ne tournent que la teinte ; la saturation et la luminosité restent identiques : une base pâle donne des partenaires pâles, une base sombre des partenaires sombres. La monochromatique fait varier la luminosité autour de votre teinte de manière volontaire. Si une harmonie basée sur la teinte semble délavée, augmentez la saturation de la base avant de relancer.

C'est la roue du peintre (RYB) ou la roue de l'écran (RGB) ?

Roue de l'écran. L'opposé du rouge (#FF0000) ici est cyan (#00FFFF), pas vert comme le dit la théorie des peintures à l'huile. Pour le numérique c'est le bon modèle ; pour le mélange physique de peinture, l'effet paraîtra décalé.

Pourquoi certaines bases produisent-elles une complémentaire trop proche de la base ?

Les gris purs ont une teinte indéfinie, la rotation tourne donc sur rien et renvoie le même gris. Ajoutez ne serait-ce que 5 % de saturation à la base et la complémentaire repartira correctement.

Puis-je exporter toute la palette en une fois ?

Oui, de quatre façons. « Télécharger la palette » enregistre chaque échantillon avec son code HEX dans un fichier texte. « Télécharger en CSS » exporte la palette sous forme de variables CSS prêtes à l'emploi (par exemple --color-complementary-1: #0099FF;). « Config Tailwind » génère un objet de couleurs prêt à coller dans tailwind.config.js. « Image PNG » enregistre toute la palette sous forme d'image légendée, parfaite pour les revues de design.

Outils similaires