# Duotone-effect: elke foto in twee kleuren van je merk [Canonical HTML page](https://gradiently.design/nl/guide/duotone-effect) Duotone maakt van elke foto twee kleuren naar keuze: een voor de schaduwen, een voor het licht. Het is de snelste manier om afbeeldingen die niet bij elkaar passen als één merk te laten ogen. ## The short version - Het duotone-effect geeft een foto twee kleuren: de donkerste tinten krijgen de ene kleur en de lichtste tinten de andere. - Een duotone werkt door de foto grijs te maken en elk grijs te vervangen door het overeenkomstige punt op een kleurverloop van twee kleuren. - De schaduwkleur moet veel donkerder zijn dan de hooglichtkleur, anders verliest de foto zijn vorm. - Duotone is ideaal om foto’s uit verschillende bronnen consistent en passend bij je merk te laten ogen, en om tekst op afbeeldingen te zetten. - In CSS geeft een SVG-filter met feColorMatrix en feComponentTransfer een echte duotone op elke afbeelding. Het **duotone-effect** geeft een foto maar twee kleuren: de schaduwen worden de ene kleur en de hooglichten de andere, met alle tinten ertussen gemengd uit die twee. Een portret in diep indigo en warm goud, een stad in bosgroen en munt. Omdat elke afbeelding in dezelfde twee kleuren eindigt, is duotone de snelste manier om foto’s van verschillende camera’s, seizoenen en bronnen als één merk te laten ogen. ## Hoe het duotone-effect werkt Een duotone is een gradiëntkaart met twee stops. Eerst wordt de foto teruggebracht tot grijstinten, zodat elke pixel alleen nog een helderheid van zwart tot wit is. Daarna wordt elke helderheid vervangen door de kleur op hetzelfde punt van een kleurverloop van twee kleuren: zwart wordt de schaduwkleur, wit de hooglichtkleur en middengrijs de kleur halverwege. De foto behoudt zijn vormen en licht, maar alle oorspronkelijke kleur is weg. - Middernacht en goud: `linear-gradient(90deg, #1b134f 0%, #fad084 100%)` - Marine en koraal: `linear-gradient(90deg, #0f1b3d 0%, #ff8a70 100%)` - Bos en munt: `linear-gradient(90deg, #0b3d2e 0%, #b8f2d0 100%)` - Pruim en perzik: `linear-gradient(90deg, #3b0a45 0%, #ffc9a3 100%)` - Espresso en citroen: `linear-gradient(90deg, #3b1f0a 0%, #fde047 100%)` - Ossenbloed en blos: `linear-gradient(90deg, #3f0d12 0%, #fbcfe8 100%)` - Teal en crème: `linear-gradient(90deg, #073b4c 0%, #f6ecd9 100%)` - Violet en cyaan: `linear-gradient(90deg, #2e1065 0%, #67e8f9 100%)` Elke strook is een duotone van links naar rechts gelezen: de schaduwen van een foto krijgen de linkerkleur, de hooglichten de rechter en al het andere de kleur ertussen. Duotones als kleurverlopen lezen maakt ze makkelijk te beoordelen voordat je een foto aanraakt. Ziet het midden van de strook er modderig uit, dan de middentonen van de foto ook. De bredere techniek, met drie of meer kleuren, staat in [gradiëntkaarten](https://gradiently.design/nl/guide/gradient-map). ## Zo kies je een duotone-kleurenpaar 1. **Maak de schaduwkleur donker** De schaduwkleur draagt de structuur van de foto. Hij moet in lichtheid dicht bij zwart liggen, zoals een diep marineblauw, pruim of bosgroen, anders worden gezichten en details plat. 2. **Maak de hooglichtkleur licht** De hooglichtkleur draagt het licht. Een bleek goud, blos, munt of crème houdt de afbeelding stralend. Een groot verschil in lichtheid houdt de foto leesbaar. 3. **Controleer het midden** Het grootste deel van een foto bestaat uit middentonen, dus de kleur halverwege het paar telt het zwaarst. Wordt die grijs of olijfgroen, kies dan een hooglicht dat qua tint dichter bij de schaduw ligt. Zie [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients). 4. **Neem een kleur uit je merk** Gebruik je merkkleur als schaduw of als hooglicht en kies de andere die erbij past. Daardoor voelt duotone passend bij je merk in plaats van alleen gestileerd. 5. **Test op een gezicht en een landschap** Huid en luchten laten een slecht paar het eerst zien. Zien beide er nog goed uit, dan werkt het paar op bijna alles. ### Zwakke paren - Twee kleuren van gelijke lichtheid, zoals rood en blauw - Een lichte schaduwkleur die de foto uitwast - Tegengestelde tinten waardoor de middentonen grijs worden - Neonhooglichten die huid ziek laten ogen ### Sterke paren - Een bijna zwarte schaduw en een bleek hooglicht - Tinten die op het middelpunt kleurrijk blijven - Een kleur uit het merkpalet - Warme hooglichten voor mensen, koele voor plekken | Sfeer | Schaduw | Hooglicht | | --- | --- | --- | | Warm en redactioneel | Pruim `#3b0a45` | Perzik `#ffc9a3` | | Klassiek en premium | Middernacht `#1b134f` | Goud `#fad084` | | Fris en natuurlijk | Bos `#0b3d2e` | Munt `#b8f2d0` | | Stil en literair | Teal `#073b4c` | Crème `#f6ecd9` | | Luid en elektrisch | Violet `#2e1065` | Cyaan `#67e8f9` | Startparen per sfeer. Vervang een kant door je eigen merkkleur en houd het verschil in lichtheid. ## Wanneer duotone helpt - **Foto’s die niet bij elkaar passen:** stockbeelden, telefoonfoto’s en oude archiefbeelden lijken één set - **Tekst over foto’s:** als de foto is teruggebracht tot twee rustige kleuren, staan woorden er veel makkelijker op; zie [tekst over een afbeelding](https://gradiently.design/nl/guide/text-over-image) - **Merkconsistentie:** elke afbeelding herhaalt je kleuren, wat herkenning opbouwt; zie [merkconsistentie](https://gradiently.design/nl/guide/brand-consistency) - **Posters en covers:** een sterke duotone leest van een afstand en drukt schoon af - **Zwakke foto’s:** slecht licht en dof kleurgebruik doen veel minder ertoe zodra de kleur is vervangen Het helpt minder waar echte kleur telt: eten, mode, producten en vastgoed, waar mensen moeten zien wat ze krijgen. Daar doet een lichtere tint of een kleurwaas over een deel van de afbeelding het werk zonder de echte kleuren te verbergen. ## Zo maak je een duotone in CSS De nauwkeurigste methode is een SVG-filter. `feColorMatrix` maakt de afbeelding grijs met standaard luminantiegewichten, en `feComponentTransfer` koppelt elk kanaal van de schaduwkleur aan de hooglichtkleur. De tabelwaarden zijn per kleur het rood, groen en blauw gedeeld door 255. ```html Portrait ``` Middernacht en goud als SVG-filter. `color-interpolation-filters="sRGB"` houdt de kleuren precies zoals opgegeven. Voeg een derde waarde toe aan elke `tableValues`-lijst en je hebt een tritone, met een zelfgekozen middentoonkleur. Dat is de makkelijkste manier om een paar te redden waarvan het midden modderig wordt. Voor filters en CSS-effecten in het algemeen is [de MDN-gids over filtereffecten](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) een goede referentie. ## Duotone in ontwerptools Beeldbewerkers doen duotone meestal met een gradiëntkaart: voeg een gradiëntkaartaanpassing toe, zet de linkerstop op je schaduwkleur en de rechterstop op je hooglichtkleur en pas het middelpunt aan tot huid en luchten goed ogen. Sommige tools hebben ook een aparte duotone-modus voor drukwerk, die twee echte inktkleuren voorbereidt in plaats van een RGB-afbeelding. In Gradiently kan elke foto in de Studio worden getint in de kleuren van de Mark waarmee je ontwerpt: als mono, als duotone of als zachtere waas. Wissel je van Mark, dan volgt de foto, zodat een hele reeks ontwerpen in één palet blijft. ## FAQ ### Wat is het duotone-effect? Het duotone-effect geeft een foto twee kleuren: de schaduwen worden de ene kleur en de hooglichten de andere, met de middentonen daartussen gemengd. ### Welke kleuren werken het best voor duotone? Een heel donkere schaduwkleur en een heel lichte hooglichtkleur, met tinten die op het middelpunt kleurrijk blijven, zoals marine en koraal of pruim en perzik. ### Hoe maak ik een duotone-afbeelding in CSS? Gebruik een SVG-filter: `feColorMatrix` om grijs te maken, dan `feComponentTransfer` met tabelwaarden voor de schaduw- en hooglichtkleur. ### Wat is het verschil tussen duotone en een gradiëntkaart? Een duotone is een gradiëntkaart met precies twee kleuren. Een gradiëntkaart kan drie of meer kleuren gebruiken over hetzelfde tonenbereik. ### Waarom ziet mijn duotone er plat uit? De twee kleuren liggen te dicht bij elkaar in lichtheid. Maak de schaduwkleur donkerder of de hooglichtkleur lichter.