Couleurs complémentaires divisées : contraste sans heurts

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 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. 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. 2

   Trouvez son complément

   Ajoutez 180 degrés. Le complément du sarcelle est un rouge corail à environ 355 degrés.

3. 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. 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.

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 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.

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.

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 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.

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.

: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%);
}

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.