# Design bicolore : un style fort avec seulement deux couleurs

[Canonical HTML page](https://gradiently.design/fr/guide/two-tone-design)

Deux couleurs bien choisies peuvent porter toute une marque : affiches, menus, posts et photos. Voici comment choisir le duo, en tirer plus d’amplitude et éviter qu’il paraisse plat.

## The short version

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

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.

| Terme | Ce que ça signifie | Usage typique |
| --- | --- | --- |
| Bicolore | Un design entier fait de deux couleurs distinctes | Affiches, menus, emballages, systèmes de marque |
| Duotone | Une photo remappée en deux couleurs, les ombres vers l’une et les hautes lumières vers l’autre | Photographie dans une mise en page bicolore |
| Monochrome | Teintes et nuances d’une seule couleur | Marques calmes à une seule couleur |
| Dégradé à deux couleurs | Deux couleurs fondues en douceur l’une dans l’autre | Arrière-plans et sections d’accueil |

Le bicolore garde les couleurs séparées ; un dégradé les fond. Les deux peuvent cohabiter dans une même marque.

Si vous voulez le fondu plutôt que la coupe nette, [les dégradés à deux couleurs](https://gradiently.design/fr/guide/two-color-gradients) couvrent ce côté, et [les harmonies monochromes](https://gradiently.design/fr/guide/monochromatic-color-scheme) 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.

- Cobalt et mandarine: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Forêt et rose pâle: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Encre et beurre: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Bleu Klein et papier: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Vert anglais et moutarde: `linear-gradient(135deg, #004225 0%, #004225 50%, #e1ad01 50%, #e1ad01 100%)`
- Aubergine et citron vert: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Rouge affiche et crème: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Bleu canard profond et pêche: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Chocolat et ciel: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Rouge sang de bœuf et rose pâle: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Noir et jaune fluo: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Violet profond et lilas: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Douze duos, coupés en diagonale. Chacun peut échanger la couleur du fond, ce qui double vos mises en page.

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](https://gradiently.design/fr/guide/complementary-colors) 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.

- Cobalt: #172e70
- Cobalt 75: #516294
- Cobalt 40: #a2abc6
- Mandarine 10: #fdf0e6
- Mandarine 55: #ffb780
- Mandarine: #ff7a1a

Un duo, six tons. La mandarine à 10 % donne un fond papier chaud, et le cobalt à 40 % convient au texte secondaire sur panneaux sombres.

- **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](https://gradiently.design/fr/guide/duotone-effect) va plus loin ; sur le web, on peut le faire avec les modes de fusion.

```css
.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;
}
```

Un duotone cobalt et mandarine. L’image passe en gris, se multiplie sur le ton clair, puis le ton sombre relève les ombres vers le cobalt.

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

Un post en portrait coupé en deux blocs de couleur, avec Ouvert tard le vendredi d’un côté

Une mise en page coupée en deux : une couleur porte les mots, l’autre porte l’ambiance.

Un post minimal en portrait avec Menu de printemps en couleur sombre sur fond clair

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é](https://gradiently.design/fr/guide/color-contrast-accessibility). Si la discipline de deux couleurs vous plaît, la même logique traverse [le graphisme minimaliste](https://gradiently.design/fr/guide/minimalist-design-ideas) et, à plein volume, [le graphisme audacieux](https://gradiently.design/fr/guide/bold-design-ideas).

## FAQ

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