# Duotone-foto’s in je merkkleuren: mono, duotone en wash

[Canonical HTML page](https://gradiently.design/nl/guide/photo-duotone-in-mark-colours)

Foto’s die niet bij elkaar passen laten een feed meteen geleend lijken. Kleur je ze in je eigen kleuren, dan horen stockfoto’s, telefoonfoto’s en productfoto’s ineens bij elkaar.

## The short version

- Een duotone-foto vervangt de tinten van een afbeelding door twee kleuren: één voor de schaduwen en één voor de lichte delen.
- In Gradiently kun je elke foto inkleuren als mono, duotone of wash, en duotone en wash nemen hun kleuren over van de Mark van het ontwerp.
- Foto’s inkleuren in dezelfde kleuren als de achtergrond laat gemengde bronnen, van stockfoto tot telefoonfoto, als één bewuste set ogen.
- Foto’s kun je ook bijstellen op licht en kleur, afwerken met filters als Film of Noir en bijsnijden tot bogen, cirkels en blobs.
- Elke foto-aanpassing blijft bewerkbaar, dus je kunt de tint wijzigen of de Mark later verwisselen en de foto volgt.

Een **duotone-foto** vervangt de natuurlijke kleuren van een afbeelding door twee gekozen kleuren: een donkere voor de schaduwen en een lichte voor de lichte delen, met alle tinten ertussen opgebouwd uit dat paar. In je merkkleuren maakt het van elke foto iets dat duidelijk bij jou hoort. In Gradiently kun je een foto op drie manieren inkleuren, mono, duotone of wash, en duotone en wash nemen hun kleuren rechtstreeks van de Mark van het ontwerp, zodat foto en achtergrond altijd bij elkaar passen.

## Hoe een duotone-foto werkt

Zie de foto eerst als zwart-wit. Elke pixel heeft een helderheid van 0 tot 100 procent. Een duotone verft de donkerste pixels in je schaduwkleur, de lichtste in je lichtkleur en al het andere op het bijpassende punt van het verloop daartussen. Het resultaat behoudt alle details van de foto, maar niets van de oorspronkelijke kleur.

- Indigo naar blush: `linear-gradient(90deg, #1e1b4b 0%, #be185d 55%, #fbcfe8 100%)`
- Diep petrol naar zand: `linear-gradient(90deg, #052e2b 0%, #0f766e 50%, #f5d0a9 100%)`
- Ossenbloed naar boter: `linear-gradient(90deg, #2b0a0a 0%, #b45309 55%, #fde68a 100%)`
- Marine naar ijs: `linear-gradient(90deg, #0b1020 0%, #2563eb 55%, #e0f2fe 100%)`

Vier duotone-verlopen. Schaduwen krijgen de kleur links, lichte delen de kleur rechts en de middentonen van de foto komen er tussenin te liggen.

Wat een duotone mooi maakt in plaats van modderig, is het contrast tussen de twee uiteinden. Een heel donkere schaduw en een heel licht hooglicht houden gezichten en producten leesbaar. Twee middentonen geven een vlak, troebel beeld. Voor de geschiedenis en de bredere toepassingen van de look, zie [het duotone-effect](https://gradiently.design/nl/guide/duotone-effect).

## Mono, duotone en wash: drie manieren om te kleuren

| Tint | Wat het doet | Kleuren uit | Gebruik het voor |
| --- | --- | --- | --- |
| **Mono** | Maakt de foto zwart-wit | Neutrale grijstinten | Portretten, quotes, alles wat serieus of tijdloos moet zijn |
| **Duotone** | Koppelt schaduwen en lichte delen aan twee kleuren | De Mark | Opvallende posts, evenementposters, teamfoto’s die niet bij elkaar passen |
| **Wash** | Legt de kleur van de Mark over de foto en laat een deel van de eigen kleur zien | De Mark | Productfoto’s en eten, waar het onderwerp er nog echt uit moet zien |
| Geen | Laat de kleur van de foto met rust | De foto | Hero-productfoto’s waar een juiste kleur telt |

De tintopties bij het bewerken van foto’s. Duotone en Wash gebruiken de kleuren van je Mark, dus als je de Mark verwisselt, krijgt de foto een nieuwe tint.

Een portretpost met de titel Maak kennis met het team en een regel over vijf mensen en een espressomachine, op een warme verloop-Mark

Het soort post dat een duotone redt: teamfoto’s met verschillende telefoons, samengebracht tot één set door de kleuren van de Mark.

Een portret-productpost die een koffieblend voor de herfst aankondigt, op dezelfde verloop-Mark

Een productpost: het soort waar een zachte wash de foto aan de achtergrond verbindt, maar koffie er nog als koffie uitziet.

## Zo maak je een duotone-foto in Gradiently

1. **Voeg de foto toe** Upload of plak je eigen foto, of kies er een uit de gratis stockfoto’s in de Studio.
2. **Open fotobewerking** Selecteer de foto en open het bewerkpaneel, waar licht, kleur, filters en tint zitten.
3. **Kies Duotone onder Mark-kleuren** De foto wordt meteen omgezet naar het palet van de Mark. Probeer ook Wash en Mono; vergelijken kost niets.
4. **Stel het contrast in** Verhoog het contrast als het resultaat vlak oogt, en de helderheid als gezichten in de schaduwkleur verdwijnen.
5. **Snij bij tot een vorm** Kader de foto als vierkant, cirkel, boog of blob, passend bij de opmaak.
6. **Verwissel de Mark om te testen** Wissel de Mark van het ontwerp en de tint volgt, zodat je meerdere looks op dezelfde foto kunt proberen.

> **Alles blijft bewerkbaar** Tinten en filters worden nooit in de foto ingebakken. Je kunt ze op elk moment wijzigen of terugzetten, wat handig is als een campagne halverwege van kleur verandert.

## Filters, licht en kleur voor de afwerking

De tint bepaalt de kleurfamilie; de overige aanpassingen bepalen het gevoel. Ze zitten in drie groepen, en de presets zijn een snelle start voordat je verfijnt. Is de foto een productfoto, zorg dan eerst voor de juiste achtergrond: [achtergronden voor productfoto’s](https://gradiently.design/nl/guide/product-photo-backgrounds) legt dat uit.

| Groep | Instellingen | Waar je naar grijpt |
| --- | --- | --- |
| Licht | Helderheid, contrast | Bij elke duotone eerst contrast; dat scheidt de twee kleuren |
| Kleur | Verzadiging, temperatuur, groen naar magenta, tint | Temperatuur om een wash warmer of koeler te maken; laat verzadiging bij een duotone met rust |
| Afwerking | Vervaging, vignet | Een licht vignet trekt het oog bij portretten naar binnen |
| Presets | Origineel, Levendig, Zacht, Warm, Koel, Vervaagd, Noir, Film | Film of Vervaagd onder een wash geeft makkelijk een gedrukt gevoel |

Instellingen voor fotobewerking. Begin met een preset en pas licht aan vóór kleur.

## Bijsnijvormen: bogen, cirkels en blobs

Een ingekleurde foto in een zachte vorm lijkt ontworpen in plaats van erin gegooid. Bogen voelen architecturaal en rustig, mooi voor interieurs, bloemisten en bruiloften, en een natuurlijke match voor [fotografen-branding](https://gradiently.design/nl/guide/photographer-branding). Cirkels passen bij mensen: teampagina’s, sprekers, getuigenissen. Blobs zijn speels en passen bij eten, kindermerken en alles wat informeel is. Houd het bij één vorm per ontwerp, zodat de set consistent oogt.

### Vermijd

- Twee middentoonkleuren die de foto grijs maken
- Een duotone op die ene foto waar de echte kleur verkoopt, zoals een jurk
- Een andere tint op elke foto in een carrousel
- Tekst over het drukste deel van de foto

### Doen

- Een diepe schaduwkleur en een bleek hooglicht
- Een wash voor producten, duotone voor mensen en plekken
- Eén tint voor elke foto in een set
- Tekst in het rustige deel, met Auto-inkt die de kleur kiest

Staat er tekst op de foto zelf, dan behandelt [tekst leesbaar maken op foto’s](https://gradiently.design/nl/guide/readable-text-on-photos) de plaatsing, en een consistente tint is een van de simpelste gewoontes achter [merkconsistentie](https://gradiently.design/nl/guide/brand-consistency).

## Een duotone in CSS

Op een website bouw je hetzelfde effect met blend modes: maak de foto grijswaarden, multiply hem over de lichtkleur en hel hem dan op met de schaduwkleur.

```css
.duotone {
  position: relative;
  background: #fbcfe8; /* highlight colour */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1e1b4b; /* shadow colour */
  mix-blend-mode: lighten;
  pointer-events: none;
}
```

Indigo schaduwen en blush hooglichten. Zie [mix-blend-mode op MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) voor browserondersteuning.

## FAQ

### Wat is een duotone-foto?

Een foto waarvan de kleuren door twee zijn vervangen: één voor de schaduwen en één voor de lichte delen, met de tinten ertussen opgebouwd uit dat paar.

### Hoe maak ik een duotone-foto in mijn merkkleuren?

Selecteer in Gradiently de foto, open fotobewerking en kies Duotone; die gebruikt de kleuren van de Mark van het ontwerp. In CSS combineer je een grijswaardenafbeelding met blend modes.

### Wat is het verschil tussen duotone en een kleur-wash?

Een duotone vervangt alle kleur van de foto door twee kleuren. Een wash legt een kleur over de foto en laat een deel van de eigen kleur zien, zodat onderwerpen natuurlijk blijven ogen.

### Welke kleuren maken een goede duotone?

Een heel donkere schaduwkleur en een heel licht hooglichtkleur. Twee middentonen maken de foto vlak en troebel.

### Kan ik foto’s in vormen bijsnijden in Gradiently?

Ja. Foto’s kunnen worden gekaderd als vierkant, cirkel, boog of blob.