L’essentiel en bref
- Le design bicolore construit chaque élément avec deux couleurs, en général une sombre et une claire, sans troisième couleur hormis les teintes de ces deux-là.
- Le duo doit présenter une nette différence de luminosité, pour que texte et formes restent lisibles quelle que soit la couleur du dessus.
- Les teintes et nuances des deux couleurs donnent à une palette bicolore assez d’amplitude pour les fonds, les panneaux et le texte secondaire.
- Les photos duotone associent les ombres d’une image à la couleur sombre et les hautes lumières à la claire, ce qui permet à la photographie de s’accorder à une mise en page bicolore.
- Les mises en page bicolores se remarquent dans les fils chargés parce qu’elles paraissent voulues, et elles s’impriment à bas coût en deux tons directs.
Sur cette page
Le design bicolore consiste à tout construire, texte, formes, fonds et même photos, avec seulement deux couleurs : en général une sombre et une claire, avec une forte différence de luminosité entre elles. Cobalt et mandarine, forêt et rose pâle, encre et beurre. La limite est le but. Deux couleurs paraissent voulues, se lisent clairement à toutes les tailles et donnent à une marque une signature reconnaissable plus vite qu’une palette complète.
Bicolore, duotone et monochrome, ce n’est pas la même chose
Ces mots sont employés à la légère, il aide donc de les distinguer. Ils se recoupent, et beaucoup de bonnes mises en page utilisent les trois idées à la fois.
Usage typique
Usage typique
Ce que ça signifie
Usage typique
Ce que ça signifie
Usage typique
Si vous voulez le fondu plutôt que la coupe nette, les dégradés à deux couleurs couvrent ce côté, et les harmonies monochromes la version à une seule teinte.
Douze palettes bicolores
Chaque duo ci-dessous a une couleur assez sombre pour poser du texte sur l’autre. Le contraste entre teintes compte moins que le contraste de luminosité : un duo peut être chaud et froid, ou deux voisines, tant que l’une est nettement plus sombre.
Certains sont complémentaires, comme le cobalt et la mandarine, ce qui donne un maximum d’énergie. D’autres sont proches parents, comme le violet profond et le lilas, ce qui paraît plus calme et plus cher. Les couleurs complémentaires explique pourquoi les opposés vibrent quand ils se rencontrent.
Comment choisir vos deux couleurs
- 1
Choisissez d’abord la couleur sombre
Elle portera chaque titre et chaque paragraphe, elle doit donc être lisible sur la couleur claire. Marine, forêt, aubergine, chocolat et presque noir fonctionnent tous.
- 2
Choisissez la couleur claire pour l’ambiance
C’est la couleur dont on se souvient. Les clairs chauds comme la pêche et le beurre paraissent amicaux ; les clairs froids comme le ciel et le lilas paraissent plus calmes.
- 3
Vérifiez le contraste dans les deux sens
Le texte sombre sur la couleur claire doit atteindre 4,5:1 pour le texte courant. Chaque duo de la grille ci-dessus passe ce test.
- 4
Essayez sur trois formats
Un post carré, une story 1080×1920 et un flyer A5. Si le duo vous ressemble encore sur les trois, gardez-le.
Comment obtenir plus d’amplitude avec deux couleurs
Deux couleurs à plat peuvent sembler maigres dès qu’il faut un panneau secondaire, une légende ou un bouton désactivé. La solution n’est pas une troisième couleur. Mélangez des teintes de la couleur claire et des nuances de la sombre, pour que chaque nouveau ton appartienne encore au duo.
- Fond : la teinte la plus claire, pour les grandes surfaces et les pages de texte.
- Principale : la couleur sombre, pour les titres, le texte courant et les blocs pleins.
- Impact : la couleur claire en pleine force, pour une forme, un mot ou un prix.
- Tons moyens : une teinte moyenne de chacune, pour les séparateurs, les légendes et les remplissages d’illustration.
Photos bicolores avec le duotone
Les photos sont l’endroit où les mises en page bicolores se brisent d’habitude : une image en couleurs fait entrer dans la page une troisième, une quatrième et une cinquième couleur. Un traitement duotone remappe la photo pour que ses ombres deviennent votre couleur sombre et ses hautes lumières votre couleur claire. L’effet duotone va plus loin ; sur le web, on peut le faire avec les modes de fusion.
.duotone {
position: relative;
background-color: #ff7a1a; /* light tone: the highlights */
}
.duotone img {
display: block;
width: 100%;
filter: grayscale(100%) contrast(1.15);
mix-blend-mode: multiply;
}
.duotone::after {
content: "";
position: absolute;
inset: 0;
background-color: #172e70; /* dark tone: the shadows */
mix-blend-mode: lighten;
pointer-events: none;
}Dans Gradiently, vous pouvez teinter n’importe quelle photo aux couleurs du Mark en mono, duotone ou voile, pour que les images rejoignent le design au lieu de le contrarier.
Idées de design bicolore à essayer
Une mise en page coupée en deux : une couleur porte les mots, l’autre porte l’ambiance.
Une mise en page minimale où la couleur claire est le fond et la sombre fait tout le texte.
- Affiches de concerts et d’événements : deux tons directs s’impriment à bas coût et paraissent voulus de l’autre côté de la rue.
- Menus de restaurant : une couleur sombre pour les plats, la claire pour le papier, une teinte moyenne pour les prix.
- Carrousels Instagram : alternez la couleur du fond à chaque diapositive, pour que le balayage ait un rythme.
- Emballages : une couleur par gamme de produits, l’autre partagée dans toute la collection.
- Présentations : diapositives de section dans la couleur sombre, diapositives de contenu sur la teinte claire.
- Cartes de visite : un côté dans chaque couleur.
À éviter
- Deux couleurs de luminosité proche
- Glisser une troisième couleur pour un seul bouton
- Des photos en couleurs posées sans traitement
- Du texte clair sur la couleur claire
À faire
- Une nettement sombre, une nettement claire
- Des teintes et nuances du duo à la place
- Un duotone pour chaque photo dans les deux couleurs
- Vérifier le contraste dans les deux sens
Pour mesurer le contraste dans les deux sens, utilisez les outils de contraste des couleurs et accessibilité. Si la discipline de deux couleurs vous plaît, la même logique traverse le graphisme minimaliste et, à plein volume, le graphisme audacieux.
Les questions qu’on nous pose
Qu’est-ce que le design bicolore ?
Un design construit entièrement avec deux couleurs, en général une sombre et une claire, avec les teintes de ces deux-là permises mais sans troisième couleur.
Quelles deux couleurs vont bien ensemble dans un design ?
Tout duo avec une nette différence de luminosité, comme le cobalt et la mandarine, la forêt et le rose pâle, ou l’encre et le beurre. La plus sombre doit être lisible sur la plus claire.
Quelle différence entre bicolore et duotone ?
Le bicolore décrit une mise en page entière faite de deux couleurs. Le duotone décrit une photo remappée pour que ses ombres et ses hautes lumières deviennent deux couleurs.
Comment faire une image duotone en CSS ?
Passez l’image en niveaux de gris, fusionnez-la avec mix-blend-mode: multiply sur la couleur claire, puis superposez la couleur sombre avec mix-blend-mode: lighten.
L’impression en deux couleurs coûte-t-elle moins cher ?
En sérigraphie et en offset avec tons directs, moins d’encres signifie en général moins d’écrans ou de plaques, donc les travaux en deux couleurs sont généralement moins chers que la quadrichromie.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil