Générateur de couleurs complémentaires
Trouvez la couleur complémentaire de n’importe quelle couleur de base avec ce générateur de couleurs complémentaires. Saisissez un code hexadécimal de 3 ou 6 chiffres : l’outil fait pivoter sa teinte de 180 degrés sur le cercle chromatique HSL en conservant la saturation et la luminosité, puis renvoie la couleur de base et sa complémentaire sous forme de codes hexadécimaux. Idéal pour les designers et les développeurs qui ont besoin d’une couleur d’accent très contrastée pour les boutons, les éléments mis en évidence, les graphiques et les visuels de marque.
Foire aux questions
Que renvoie le générateur de couleurs complémentaires ?
Il renvoie deux couleurs sous forme de codes hexadécimaux minuscules de six chiffres. La couleur 1 est votre couleur de base et la couleur 2 est sa complémentaire, située exactement à l’opposé sur le cercle chromatique.
Comment la couleur complémentaire est-elle calculée ?
L’outil convertit votre code hexadécimal en HSL, ajoute 180 degrés à la teinte et conserve la saturation et la luminosité. La valeur obtenue après rotation est reconvertie en RGB puis écrite sous forme de code hexadécimal ; la couleur complémentaire a donc la même vivacité et la même luminosité que la couleur de base.
Quels formats de couleur puis-je saisir ?
Saisissez un code hexadécimal de 3 ou 6 chiffres, avec ou sans le # initial, en majuscules ou en minuscules, par exemple #ff5733, FF5733 ou #f00. Les notations RGB et HSL ainsi que les noms de couleurs ne sont pas acceptés ici ; convertissez-les d’abord en hexadécimal avec un convertisseur de couleurs.
Pourquoi la couleur 1 diffère-t-elle légèrement du code hexadécimal que j’ai saisi ?
La couleur de base est convertie en HSL avec des valeurs entières de teinte, de saturation et de luminosité, puis reconvertie en hexadécimal ; un canal peut donc varier d’une unité. Par exemple, #ff5733 redevient #ff5833 et sa couleur complémentaire est #33daff.
Quelle est la couleur complémentaire du rouge pur ?
La couleur complémentaire de #ff0000 est #00ffff, le cyan. Cet outil utilise le cercle chromatique RGB basé sur le modèle HSL employé sur les écrans ; le rouge s’associe donc au cyan plutôt qu’au vert comme sur le cercle traditionnel des peintres.
Que se passe-t-il avec le noir, le blanc ou le gris ?
Les couleurs neutres ont une saturation nulle ; la rotation de la teinte ne change donc rien et les deux résultats sont le même gris. Choisissez une couleur de base un peu saturée si vous voulez obtenir une couleur complémentaire visible.
Comment utiliser une paire de couleurs complémentaires dans un design ?
Utilisez une couleur pour la majeure partie de la surface et l’autre avec parcimonie pour les appels à l’action, les éléments mis en évidence ou les données à faire ressortir. Des quantités égales des deux couleurs à saturation maximale ont tendance à vibrer visuellement ; atténuez ou assombrissez l’une d’elles pour les grandes surfaces.
L’outil vérifie-t-il le contraste du texte ?
Non, il calcule uniquement la paire de couleurs. Une couleur complémentaire conserve la luminosité de la couleur de base ; les deux peuvent donc avoir une luminance similaire et offrir un faible contraste pour le texte. Vérifiez la paire avec un outil de vérification du contraste WCAG avant d’utiliser l’une sur l’autre.
Puis-je saisir plusieurs couleurs à la fois ?
Non, chaque exécution prend exactement un code hexadécimal. Une saisie contenant plusieurs lignes ou du texte supplémentaire est rejetée avec un message d’erreur ; lancez donc l’outil une fois par couleur de base.
Le résultat est-il identique à celui du générateur de palettes de couleurs ?
Oui. Cet outil applique le même calcul que l’option Complémentaire du générateur de palettes de couleurs ; une même couleur de base donne donc toujours les deux mêmes codes hexadécimaux dans les deux outils.