# Couleurs complémentaires divisées : contraste sans heurts

[Canonical HTML page](https://gradiently.design/fr/guide/split-complementary-colors)

Une paire complémentaire est tonitruante et difficile à équilibrer. Divisez l’opposée en deux et vous gardez presque tout le contraste, sans que les couleurs se battent. Voici comment, avec des palettes à copier.

## The short version

- Les couleurs complémentaires divisées sont une couleur de base plus les deux couleurs situées de part et d’autre de son complément sur le cercle chromatique.
- Sur un cercle de 360 degrés, les deux partenaires se situent à environ 150 et 210 degrés de la base, soit 30 degrés de part et d’autre de son opposée exacte.
- Le schéma garde un fort contraste mais heurte moins qu’une paire complémentaire directe, car aucune couleur n’est exactement opposée à une autre.
- Il fonctionne mieux quand la couleur de base domine et que les deux couleurs divisées servent de petits accents.
- Les cercles des peintres et ceux des écrans placent les compléments différemment, donc une même base peut donner des palettes divisées légèrement différentes.

Les **couleurs complémentaires divisées** sont trois couleurs : une base, plus les deux couleurs de chaque côté du complément de la base. Au lieu d’associer le bleu à son opposé direct, l’orange, vous l’associez au rouge orangé et au jaune orangé. Vous gardez le contraste chaud contre froid qui rend les schémas complémentaires vivants, mais comme rien n’est exactement opposé à autre chose, le résultat est plus doux pour l’œil et bien plus facile à équilibrer dans une vraie création.

## Comment fonctionnent les couleurs complémentaires divisées

Imaginez [le cercle chromatique](https://gradiently.design/fr/guide/color-wheel) comme un cadran. Votre couleur de base est à midi. Son complément est à six heures. Un schéma complémentaire divisé saute six heures et prend cinq et sept. En degrés, cela donne des teintes à environ 150 et 210 degrés de la base.

1. **Choisissez une teinte de base** Partez de la couleur dont parle vraiment votre création : la couleur de marque, le produit, l’ambiance. Disons le sarcelle, à une teinte de 175 degrés.
2. **Trouvez son complément** Ajoutez 180 degrés. Le complément du sarcelle est un rouge corail à environ 355 degrés.
3. **Écartez-vous de 30 degrés de chaque côté** Allez à 30 degrés dans chaque sens depuis le complément : environ 325 degrés (rose) et 25 degrés (orange).
4. **Ajustez la luminosité et la saturation** Les teintes fixent le schéma, mais vous choisissez à quel point chacune est claire, profonde ou sourde. C’est là que la palette commence à vous ressembler.

- Base sarcelle: #188b81
- Rose orchidée: #e052a5
- Abricot: #f58a3d
- Sarcelle profond: #173633
- Papier chaud: #f6f0ea

L’exemple détaillé : sarcelle avec rose et abricot, plus un sarcelle plus foncé et un neutre pour le texte et l’espace.

## Pourquoi le complémentaire divisé heurte moins

Des opposés exacts, comme le rouge et le cyan ou le bleu et l’orange, se disputent l’attention avec la même force. Côte à côte à pleine saturation, ils peuvent sembler vibrer, et fondus l’un dans l’autre, ils tournent au gris. [Les couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors) sont puissantes pour cette raison, mais elles laissent peu de marge d’erreur.

Dans un schéma divisé, les deux partenaires sont à 60 degrés l’un de l’autre, ce qui en fait des proches parents. Ils se soutiennent au lieu de se battre, et ensemble ils équilibrent la base. Vous obtenez du contraste avec un allié naturel du côté chaud, ou du côté froid, selon votre point de départ.

| Schéma | Couleurs | Contraste | Facilité d’équilibre |
| --- | --- | --- | --- |
| Complémentaire | 2, exactement opposées | Le plus élevé | Difficile |
| Complémentaire divisé | 3, base plus deux quasi-opposées | Élevé | Modérée |
| [Triadique](https://gradiently.design/fr/guide/triadic-colors) | 3, régulièrement espacées de 120 degrés | Élevé | Modérée à difficile |
| [Analogue](https://gradiently.design/fr/guide/analogous-colors) | 3, côte à côte | Faible | Facile |

Le complémentaire divisé se place entre le calme de l’analogue et le drame du complémentaire.

## Exemples de palettes complémentaires divisées

Cinq palettes construites avec les étapes ci-dessus. La première couleur de chaque ligne est la base ; les deux autres sont ses partenaires divisés. Luminosité et saturation ont été réglées pour que chaque ensemble serve vraiment, pas seulement en théorie.

| Base | Hex de la base | Partenaires divisés | Ambiance |
| --- | --- | --- | --- |
| Sarcelle | `#188b81` | `#e052a5` orchidée, `#f58a3d` abricot | Tropicale, moderne, vive |
| Violet | `#6629a3` | `#f5e63d` citron, `#3fa648` feuille | Ludique, créative, audacieuse |
| Bleu cobalt | `#1b4f98` | `#e45e44` vermillon, `#f5d63d` tournesol | Assurée, sportive, classique |
| Cramoisi | `#c32230` | `#318160` jade, `#2970a3` céruléen | Festive, ancrée, riche |
| Vert forêt | `#2a6f41` | `#ab5eba` orchidée, `#e4677c` rose | Botanique, romantique, fraîche |

Copiez les codes directement dans votre outil. Utilisez la base pour l’essentiel de la surface.

- Schéma sarcelle : les deux partenaires: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Schéma cobalt : les deux partenaires: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Base sarcelle comme fond: `radial-gradient(circle at 75% 25%, #188b81 0%, #173633 60%, #0b1a19 100%)`
- Base cobalt comme fond: `radial-gradient(circle at 25% 25%, #2970a3 0%, #1b4f98 45%, #0c1f3d 100%)`

Les deux partenaires divisés sont voisins, ils se fondent donc proprement l’un dans l’autre. Fondre la base directement vers un partenaire traverse le cercle et tourne au boueux : gardez la base comme fond à part.

## Comment utiliser un schéma complémentaire divisé dans une création

Trois couleurs de même force donnent à une création l’air d’un drapeau. Donnez-leur plutôt des rôles inégaux. [La règle des 60 30 10](https://gradiently.design/fr/guide/60-30-10-rule) est un bon point de départ : la base couvre l’essentiel de la surface, un partenaire joue un rôle de soutien, et l’autre n’apparaît que là où vous voulez que l’œil aille d’abord.

Atténuer est votre autre levier. Assombrissez ou grisez la base jusqu’à ce qu’elle se comporte presque comme un neutre, et les deux partenaires paraissent soudain voulus plutôt que criards. C’est ainsi que les schémas divisés finissent par paraître sophistiqués : un sarcelle profond, un rose poudré et un abricot doux utilisent les mêmes teintes que la version vive, mais évoquent un hôtel de charme plutôt qu’un ballon de plage.

Publication portrait de carte d’été sur fond sarcelle profond avec des accents rose et abricot

Un fond sarcelle profond fait l’essentiel du travail ; le rose et l’abricot sont gardés pour les mots et un seul point d’éclat.

### À éviter

- Les trois teintes à pleine saturation et à surface égale
- Du texte courant dans une couleur partenaire posé sur l’autre
- Un seul dégradé allant de la base à un partenaire à travers le cercle
- Ajouter par-dessus une quatrième teinte vive

### À faire

- Une base dominante, souvent approfondie ou atténuée
- Des partenaires de luminosité différente, pour qu’un seul mène
- Un neutre pour le texte et l’espace
- Vérifier le contraste partout où se posent des mots

## Cercle des peintres ou cercle des écrans

Il existe deux cercles chromatiques courants. Le cercle traditionnel des peintres a le rouge, le jaune et le bleu pour primaires, donc l’opposé du rouge est le vert. Les écrans utilisent la lumière rouge, verte et bleue, donc sur un cercle TSL l’opposé du rouge est le cyan. Les deux donnent des schémas valables ; utilisez simplement un seul cercle de façon cohérente. En CSS, le cercle des écrans est celui de `hsl()`, vous pouvez donc générer un schéma avec un peu d’arithmétique.

```css
:root {
  --h: 175; /* base hue in degrees */
  --base: hsl(var(--h) 70% 32%);
  --split-a: hsl(calc(var(--h) + 150) 70% 60%);
  --split-b: hsl(calc(var(--h) + 210) 90% 60%);
}
```

Changez `--h` et tout le schéma complémentaire divisé suit. Plus de détails sur ce modèle dans [teinte, saturation et luminosité](https://gradiently.design/fr/guide/hue-saturation-brightness).

Pour voir une palette à l’œuvre sur de vrais formats, le Designer de Gradiently peut composer d’un coup une publication, une story et une bannière, pour juger les proportions à chaque taille plutôt que sur un nuancier.

## FAQ

### Que sont les couleurs complémentaires divisées ?

Une couleur de base plus les deux couleurs de part et d’autre de son complément sur le cercle chromatique. Pour le bleu, ce sont le rouge orangé et le jaune orangé.

### Comment trouver des couleurs complémentaires divisées ?

Trouvez le complément de la couleur de base en ajoutant 180 degrés à sa teinte, puis prenez les teintes à environ 30 degrés de chaque côté.

### Le complémentaire divisé est-il meilleur que le complémentaire ?

Il est plus facile à équilibrer. Vous gardez l’essentiel du contraste, mais les couleurs heurtent moins car aucune n’est un opposé exact.

### Quel est le complémentaire divisé du rouge ?

Sur le cercle des peintres, le vert jaune et le vert bleu. Sur un cercle TSL d’écran, les partenaires du rouge sont un cyan vert et un cyan bleu, vers 150 et 210 degrés.

### Combien de couleurs compte un schéma complémentaire divisé ?

Trois teintes, même si la plupart des palettes réelles ajoutent un neutre foncé et un clair pour le texte et l’espace.