# Effet duotone : une photo aux couleurs de votre marque [Canonical HTML page](https://gradiently.design/fr/guide/duotone-effect) Le duotone transforme n’importe quelle photo en deux couleurs de votre choix : une pour les ombres, une pour la lumière. C’est le moyen le plus rapide d’unifier des images disparates sous une même marque. ## The short version - L’effet duotone recolore une photo avec deux couleurs, en associant ses tons les plus sombres à une couleur et ses tons les plus clairs à une autre. - Un duotone fonctionne en passant la photo en niveaux de gris, puis en remplaçant chaque gris par le point correspondant d’un dégradé de deux couleurs. - La couleur des ombres doit être bien plus sombre que celle des hautes lumières, sinon la photo perd sa forme. - Le duotone est idéal pour que des photos de sources différentes paraissent cohérentes et fidèles à la marque, et pour poser du texte sur des images. - En CSS, un filtre SVG avec feColorMatrix et feComponentTransfer produit un vrai duotone sur n’importe quelle image. L’**effet duotone** recolore une photo avec seulement deux couleurs : ses ombres deviennent une couleur et ses hautes lumières une autre, chaque ton intermédiaire étant un mélange des deux. Un portrait en indigo profond et or chaud, une ville en vert forêt et menthe. Comme chaque image finit dans les deux mêmes couleurs, le duotone est le moyen le plus rapide de faire que des photos venues d’appareils, de saisons et de sources différents semblent appartenir à une même marque. ## Comment fonctionne l’effet duotone Un duotone est une carte de dégradé à deux points. La photo est d’abord réduite en niveaux de gris : chaque pixel n’est plus qu’une luminosité, du noir au blanc. Puis chaque luminosité est remplacée par la couleur du même point le long d’un dégradé de deux couleurs : le noir devient la couleur des ombres, le blanc la couleur des hautes lumières, et le gris moyen la couleur à mi-chemin. La photo garde ses formes et sa lumière, mais toute sa couleur d’origine disparaît. - Minuit et or: `linear-gradient(90deg, #1b134f 0%, #fad084 100%)` - Marine et corail: `linear-gradient(90deg, #0f1b3d 0%, #ff8a70 100%)` - Forêt et menthe: `linear-gradient(90deg, #0b3d2e 0%, #b8f2d0 100%)` - Prune et pêche: `linear-gradient(90deg, #3b0a45 0%, #ffc9a3 100%)` - Expresso et citron: `linear-gradient(90deg, #3b1f0a 0%, #fde047 100%)` - Sang-de-bœuf et rose pâle: `linear-gradient(90deg, #3f0d12 0%, #fbcfe8 100%)` - Bleu canard et crème: `linear-gradient(90deg, #073b4c 0%, #f6ecd9 100%)` - Violet et cyan: `linear-gradient(90deg, #2e1065 0%, #67e8f9 100%)` Chaque bande est un duotone lu de gauche à droite : les ombres d’une photo prennent la couleur de gauche, ses hautes lumières celle de droite, et tout le reste la couleur intermédiaire. Lire les duotones comme des dégradés permet de les juger avant de toucher une photo. Si le milieu de la bande paraît boueux, les tons moyens de la photo le seront aussi. La technique plus large, avec trois couleurs ou plus, est présentée dans [les cartes de dégradé](https://gradiently.design/fr/guide/gradient-map). ## Comment choisir un duo de couleurs duotone 1. **Prenez une couleur d’ombre sombre** La couleur des ombres porte la structure de la photo. Elle doit être proche du noir en luminosité, comme un bleu marine, une prune ou un vert forêt profonds, sinon visages et détails s’aplatissent. 2. **Prenez une couleur de hautes lumières claire** La couleur des hautes lumières porte la lumière. Un or pâle, un rose poudré, une menthe ou une crème garde l’image lumineuse. Un grand écart de luminosité est ce qui garde la photo lisible. 3. **Vérifiez le milieu** Une photo est surtout faite de tons moyens : la couleur à mi-chemin du duo compte donc le plus. Si elle vire au gris ou à l’olive, choisissez des hautes lumières de teinte plus proche de celle des ombres. Voyez [les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients). 4. **Reprenez une couleur de votre marque** Utilisez la couleur de votre marque comme ombre ou comme haute lumière, et choisissez l’autre pour lui aller. C’est ce qui fait que le duotone paraît fidèle à la marque plutôt que simplement stylisé. 5. **Testez sur un visage et un paysage** La peau et le ciel sont les endroits où un mauvais duo se voit en premier. Si les deux restent beaux, le duo fonctionnera sur presque tout. ### Duos faibles - Deux couleurs de luminosité proche, comme rouge et bleu - Une couleur d’ombre claire qui délave la photo - Des teintes opposées qui grisent les tons moyens - Des hautes lumières fluo qui donnent mauvaise mine à la peau ### Duos forts - Une ombre presque noire et une haute lumière pâle - Des teintes qui restent colorées au point médian - Une couleur tirée de la palette de la marque - Des hautes lumières chaudes pour les personnes, froides pour les lieux | Ambiance | Ombre | Haute lumière | | --- | --- | --- | | Chaud et éditorial | Prune `#3b0a45` | Pêche `#ffc9a3` | | Classique et premium | Minuit `#1b134f` | Or `#fad084` | | Frais et naturel | Forêt `#0b3d2e` | Menthe `#b8f2d0` | | Calme et littéraire | Bleu canard `#073b4c` | Crème `#f6ecd9` | | Fort et électrique | Violet `#2e1065` | Cyan `#67e8f9` | Des duos de départ par ambiance. Remplacez un côté par la couleur de votre marque et gardez l’écart de luminosité. ## Quand le duotone aide - **Photos disparates :** photos de banque d’images, clichés de téléphone et vieilles archives forment un même ensemble - **Texte sur photo :** avec la photo réduite à deux couleurs calmes, les mots s’y posent bien plus facilement ; voyez [le texte sur une image](https://gradiently.design/fr/guide/text-over-image) - **Cohérence de marque :** chaque image reprend vos couleurs, ce qui bâtit la reconnaissance ; voyez [la cohérence de marque](https://gradiently.design/fr/guide/brand-consistency) - **Affiches et couvertures :** un duotone fort se lit de loin et s’imprime proprement - **Photos faibles :** un mauvais éclairage et des couleurs ternes comptent bien moins une fois la couleur remplacée Il aide moins là où la vraie couleur compte : cuisine, mode, produits et immobilier, où l’on doit voir ce que l’on obtient. Dans ces cas, une teinte plus légère ou un voile de couleur sur une partie de l’image fait le travail sans cacher les vraies couleurs. ## Comment faire un duotone en CSS La méthode la plus exacte est un filtre SVG. `feColorMatrix` passe l’image en niveaux de gris avec les pondérations standard de luminance, et `feComponentTransfer` associe chaque canal de la couleur des ombres à celle des hautes lumières. Les valeurs de la table sont le rouge, le vert et le bleu de chaque couleur divisés par 255. ```html Portrait ``` Minuit et or en filtre SVG. `color-interpolation-filters="sRGB"` garde les couleurs exactement comme spécifié. Ajoutez une troisième valeur à chaque liste `tableValues` et vous obtenez un trichrome, avec une couleur de ton moyen choisie. C’est le moyen le plus simple de sauver un duo dont le milieu devient boueux. Pour les filtres et les effets CSS en général, [le guide MDN des effets de filtre](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) est une bonne référence. ## Le duotone dans les outils de design Les éditeurs d’images font en général le duotone avec une carte de dégradé : ajoutez un réglage de carte de dégradé, placez la couleur des ombres sur le repère de gauche et celle des hautes lumières sur le repère de droite, puis ajustez le point médian jusqu’à ce que la peau et le ciel soient beaux. Certains outils proposent aussi un mode duotone dédié à l’impression, qui prépare deux vraies encres plutôt qu’une image RVB. Dans Gradiently, toute photo du Studio peut être teintée aux couleurs du Mark avec lequel vous créez : en mono, en duotone ou en voile plus doux. Changez le Mark et la photo suit : toute une série de designs reste dans une seule palette. ## FAQ ### Qu’est-ce que l’effet duotone ? L’effet duotone recolore une photo avec deux couleurs : ses ombres deviennent une couleur et ses hautes lumières une autre, avec les tons moyens mélangés entre les deux. ### Quelles couleurs fonctionnent le mieux pour un duotone ? Une couleur d’ombre très sombre et une couleur de haute lumière très claire, avec des teintes qui restent colorées au point médian, comme marine et corail ou prune et pêche. ### Comment faire une image duotone en CSS ? Utilisez un filtre SVG : `feColorMatrix` pour passer en niveaux de gris, puis `feComponentTransfer` avec des valeurs de table pour les couleurs des ombres et des hautes lumières. ### Quelle différence entre un duotone et une carte de dégradé ? Un duotone est une carte de dégradé à exactement deux couleurs. Une carte de dégradé peut utiliser trois couleurs ou plus sur la même plage tonale. ### Pourquoi mon duotone paraît-il plat ? Les deux couleurs sont trop proches en luminosité. Assombrissez la couleur des ombres ou éclaircissez celle des hautes lumières.