Softonic

Chercheur de Couleurs Complémentaires

Étape 1 / 3

Saisissez une couleur de base

Formats acceptés : #RGB, #RRGGBB, rgb() avec entiers et hsl() avec pourcentages. Le calcul reste dans le navigateur ; la couleur figure dans l’URL envoyée lors de chaque requête de page.

Les couleurs complémentaires occupent des positions opposées sur une roue chromatique numérique. Saisissez une valeur HEX, RGB ou HSL rigoureuse pour calculer son complément HSL, ses compléments adjacents, ses couleurs tétradiques et ses rapports de contraste WCAG exacts. Tous les calculs restent dans votre navigateur.

Comment le complément est calculé

  1. 1

    Entrez n'importe quelle couleur

    Utilisez #RGB, #RRGGBB, rgb() avec des entiers ou hsl() avec des pourcentages. La valeur complète est validée avant le calcul.

  2. 2

    Faire tourner la teinte de 180°

    Complément HSL : ajoutez 180° à la teinte, gardez la saturation et la luminosité identiques.

  3. 3

    Complément divisé dérivé

    Deux couleurs à 150° et 210° de la base, une alternative plus douce au complément direct lorsque le contraste est trop élevé.

  4. 4

    Indices d'accessibilité apparaissent

    Ratio de contraste de la paire sur fond blanc et sur fond noir, plus un avertissement si la paire risque d'échouer au WCAG AA lorsqu'elle est utilisée comme texte/fond.

Exemples

Couleur de base Hex Complément (HSL) Hex
Rouge pur #FF0000 Cyan #00FFFF
Corail #FF7F50 Turquoise aqua #50D0FF
Vert forêt #228B22 Violet #8B228B
Bleu royal #4169E1 Or-orange #E1B941
Lavande #E6E6FA Jaune pâle #FAFAE6

Les valeurs HEX, RGB et HSL affichées décrivent la même couleur sRGB. Copiez un résultat pour l’utiliser dans CSS ou un autre outil de création.

Complément HSL vs Complément RYB

  • HSL (écran) : rouge ↔ cyan, vert ↔ magenta, bleu ↔ jaune. Il s’agit de la géométrie de l’angle HSL dérivé de sRGB utilisé en CSS, et non d’une simulation du mélange de lumières.
  • RYB (artiste) : rouge ↔ vert, bleu ↔ orange, jaune ↔ violet. Il s’agit d’une convention pédagogique traditionnelle, pas d’une prédiction du mélange de pigments précis.

Cet outil utilise uniquement le modèle HSL numérique. Il ne convertit pas vers la roue RYB des peintres, car le complément d’un pigment dépend des matériaux et du mélange.

Où les compléments fonctionnent bien

  • Boutons CTA contre des arrière-plans de marque. Associez le primaire avec son complément pour faire ressortir le bouton.
  • Visualisation de données graphiques à deux séries (profit vs perte, avant vs après).
  • Ombres d’illustration : l’ombre d’une citrouille orange semble plus convaincante en bleu qu’en orange plus foncé.
  • Branding sportif : de nombreuses équipes utilisent des palettes complémentaires ou des palettes complémentaires divisées (bleu/orange, rouge/vert, jaune/violet).

Où ils échouent

  • Texte courant sur fond : les compléments directs (rouge sur vert, bleu sur orange) sont inconfortables à lire. Une forte aberration chromatique cause une fatigue visuelle.
  • Utilisation de surface complète : un écran qui est 50 % rouge et 50 % vert est épuisant. Utilisez le complément pour les accents (5-10 % de la surface), pas pour le principal.
  • Cohérence de marque : les compléments semblent chargés. La plupart des marques modernes utilisent des palettes monochromatiques ou analogues + un accent, pas de double complément.

Complément divisé

Le complément divisé (base + 150° + 210°) est souvent un meilleur choix pratique :

  • Conserve un contraste élevé avec la région complémentaire.
  • Évite la vibration du complément direct.
  • Fournit deux accents pour un design en couches.

Exemple : base = bleu → complément = orange (dur) → complément divisé = rouge-orange + jaune-orange (plus riche).

Désaturation des compléments

Les compléments purs semblent rarement bons à pleine saturation. Réduisez la saturation de 20 à 40 % sur un ou les deux pour une palette plus calme :

  • Rouge (S=100 %) + Cyan (S=100 %) = vibrant.
  • Rouge (S=60 %) + Cyan (S=60 %) = palette classique d’affiche.
  • Brique de marque (S=45 %) + Sarcelle poussiéreux (S=30 %) = moderne, utilisable.

Vérification de bon sens avant utilisation

  • Ratio de contraste de la paire : le chercheur le rapporte. En dessous de 4.5:1 échoue AA pour le texte.
  • Test sur fond neutre : les compléments semblent différents sur le blanc, le gris, le noir.
  • Test d’impression si c’est la destination, le CMJN peut modifier la saturation et les relations de complément par rapport au RVB.

Questions fréquentes

Ils ordonnent les teintes selon des conventions différentes. HSL emploie un angle numérique dérivé de sRGB ; la roue RYB traditionnelle place les primaires des artistes sur un cercle conceptuel. Aucun des deux ne prédit le résultat du mélange de lumières ou de peintures physiques.

Oui, ils sont synonymes en théorie des couleurs. “Opposé sur la roue des couleurs” et “complémentaire” font référence à la même relation.

Rarement. Les compléments directs échouent généralement au contraste WCAG lorsqu’ils sont utilisés comme texte et fond car ils ont une luminosité similaire. Augmentez la différence de luminosité (texte sombre sur fond clair) pour réussir.

Oui, le panneau de résultats inclut le complément direct, le complément divisé (deux couleurs flanquant) et le quadruple tétradique. Choisissez celui qui convient à votre objectif de design.

Outils similaires

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.

Convertisseur Base64 en Hex

Convertissez une chaîne Base64 en ses octets sous-jacents exprimés en hexadécimal. Utile pour inspecter des jetons, des clés, des certificats et des JWT.

Convertisseur BBCode en HTML

Convertissez le BBCode (balisage de forum) en HTML propre. Gère les balises de formatage, les listes, les citations, le code, les images, les liens et les tableaux.

Convertisseur binaire en ASCII

Collez du binaire (octets séparés par des espaces ou un long flux de bits) et obtenez le texte ASCII qu'il représente. Gère les encodages de 7 bits et 8 bits.

Sélecteur de couleur HEX

Choisissez ou saisissez une couleur HEX et obtenez RGB, HSL, CMYK estimé, luminance relative et contraste sur blanc et noir.

Convertisseur binaire en octal

Convertissez le binaire en octal en regroupant les bits trois par trois. Utile pour les permissions Unix, les systèmes hérités et l'affichage numérique compact.