# Tweekleurenontwerp: sterke looks met maar twee kleuren

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

Twee goed gekozen kleuren kunnen een heel merk dragen: posters, menu’s, posts en foto’s. Zo kies je het paar, haal je er meer bereik uit en voorkom je dat het plat oogt.

## The short version

- Tweekleurenontwerp bouwt elk element uit twee kleuren, meestal één donkere en één lichte, zonder derde kleur behalve tinten van de twee.
- Het paar heeft een duidelijk verschil in helderheid nodig, zodat tekst en vormen leesbaar blijven welke kleur er ook bovenop zit.
- Tinten en schaduwen van de twee kleuren geven een tweekleurenpalet genoeg bereik voor achtergronden, vlakken en secundaire tekst.
- Duotoonfoto’s koppelen de schaduwen van een afbeelding aan de donkere kleur en de lichten aan de lichte, zodat fotografie bij een tweekleurige opmaak past.
- Tweekleurige opmaken vallen op in drukke feeds omdat ze bewust ogen, en ze drukken goedkoop als twee steunkleuren.

**Tweekleurenontwerp** betekent alles, letters, vormen, achtergronden en zelfs foto’s, bouwen uit maar twee kleuren: meestal één donkere en één lichte, met een sterk verschil in helderheid ertussen. Kobalt en mandarijn, bos en blos, inkt en boter. De beperking is het punt. Twee kleuren ogen bewust, lezen helder op elk formaat en geven een merk sneller een herkenbare signatuur dan een volledig palet kan.

## Tweekleurig, duotoon en monochroom zijn niet hetzelfde

De woorden worden losjes gebruikt, dus het helpt ze uit elkaar te halen. Ze overlappen, en veel goede opmaken gebruiken alle drie de ideeën tegelijk.

| Term | Wat het betekent | Typisch gebruik |
| --- | --- | --- |
| Tweekleurig | Een heel ontwerp uit twee verschillende kleuren | Posters, menu’s, verpakkingen, merksystemen |
| Duotoon | Een foto omgezet naar twee kleuren, schaduwen naar de ene en lichten naar de andere | Fotografie binnen een tweekleurige opmaak |
| Monochroom | Alleen tinten en schaduwen van één kleurtoon | Rustige merken in één kleur |
| Verloop met twee kleuren | Twee kleuren die soepel in elkaar overgaan | Achtergronden en herosecties |

Tweekleurig houdt de kleuren gescheiden; een verloop mengt ze. Beide kunnen in één merk wonen.

Wil je de overgang in plaats van de scheiding, dan behandelt [verlopen met twee kleuren](https://gradiently.design/nl/guide/two-color-gradients) die kant, en [monochrome kleurenschema’s](https://gradiently.design/nl/guide/monochromatic-color-scheme) de versie met één kleurtoon.

## Twaalf tweekleurenpaletten

Elk paar hieronder heeft een kleur die donker genoeg is om tekst op de andere te zetten. Contrast tussen kleurtonen telt minder dan contrast in helderheid: een paar kan warm en koel zijn, of twee buren, zolang één duidelijk donkerder is.

- Kobalt en mandarijn: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Bos en blos: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Inkt en boter: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Klein-blauw en papier: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Racinggroen en mosterd: `linear-gradient(135deg, #004225 0%, #004225 50%, #e1ad01 50%, #e1ad01 100%)`
- Aubergine en limoen: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Posterrood en crème: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Diep teal en perzik: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Chocolade en lucht: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Ossenbloed en bleekroze: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Zwart en fluorgeel: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Diep violet en lila: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Twaalf paren, diagonaal gesplitst. Elk kan wisselen welke kleur de ondergrond is, wat je opmaken verdubbelt.

Sommige hiervan zijn complementair, zoals kobalt en mandarijn, wat maximale energie geeft. Andere zijn naaste verwanten, zoals diep violet en lila, wat rustiger en duurder voelt. [Complementaire kleuren](https://gradiently.design/nl/guide/complementary-colors) legt uit waarom tegenpolen zoemen als ze elkaar ontmoeten.

## Hoe je je twee kleuren kiest

1. **Kies eerst de donkere kleur** Hij draagt elke kop en alinea, dus hij moet leesbaar zijn op de lichte kleur. Marine, bos, aubergine, chocolade en bijna zwart werken allemaal.
2. **Kies de lichte kleur voor de sfeer** Dit is de kleur die mensen onthouden. Warme lichten als perzik en boter voelen vriendelijk; koele lichten als lucht en lila voelen rustiger.
3. **Controleer het contrast beide kanten op** Donkere tekst op de lichte kleur moet 4,5:1 halen voor lopende tekst. Elk paar in het raster hierboven haalt die test.
4. **Probeer het op drie formaten** Een vierkante post, een story van 1080×1920 en een A5-flyer. Voelt het paar op alle drie nog als jij, hou het dan.

## Hoe je meer bereik haalt uit twee kleuren

Twee vlakke kleuren kunnen dun aanvoelen zodra je een secundair vlak, een bijschrift of een uitgeschakelde knop nodig hebt. De oplossing is geen derde kleur. Meng tinten van de lichte kleur en schaduwen van de donkere, zodat elke nieuwe toon nog bij het paar hoort.

- Kobalt: #172e70
- Kobalt 75: #516294
- Kobalt 40: #a2abc6
- Mandarijn 10: #fdf0e6
- Mandarijn 55: #ffb780
- Mandarijn: #ff7a1a

Eén paar, zes tonen. De 10% mandarijn maakt een warme papieren ondergrond, en de 40% kobalt werkt voor secundaire tekst op donkere vlakken.

- **Ondergrond:** de lichtste tint, voor grote vlakken en tekstpagina’s.
- **Hoofdkleur:** de donkere kleur, voor koppen, lopende tekst en effen blokken.
- **Klap:** de lichte kleur op volle sterkte, voor één vorm, één woord of één prijs.
- **Middentonen:** een middentint van elk, voor scheidingslijnen, bijschriften en illustratievlakken.

## Tweekleurige foto’s met duotoon

Foto’s zijn waar tweekleurige opmaken meestal stukgaan: een kleurenafbeelding brengt een derde, vierde en vijfde kleur op de pagina. Een duotoonbehandeling zet de foto om zodat de schaduwen je donkere kleur worden en de lichten je lichte. [Het duotoon-effect](https://gradiently.design/nl/guide/duotone-effect) gaat dieper; op het web kan het met blendmodi.

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

Een duotoon in kobalt en mandarijn. De afbeelding wordt grijs, vermenigvuldigt op de lichte toon, en dan tilt de donkere toon de schaduwen naar kobalt.

In Gradiently kun je elke foto inkleuren in de kleuren van de Mark als mono, duotoon of wassing, zodat afbeeldingen deel van het ontwerp worden in plaats van ermee te vechten.

## Ideeën voor tweekleurenontwerp om te proberen

Een staande post in twee kleurblokken gesplitst, met Vrijdag laat open aan één kant

Een gesplitste opmaak: één kleur houdt de woorden, de andere de sfeer.

Een minimale staande post met de tekst Lentemenu in een donkere kleur op een lichte ondergrond

Een minimale opmaak waarin de lichte kleur de ondergrond is en de donkere alle letters doet.

- **Concert- en eventposters:** twee steunkleuren drukken goedkoop en ogen bewust vanaf de overkant van de straat.
- **Restaurantmenu’s:** een donkere kleur voor de gerechten, de lichte voor het papier, een middentint voor prijzen.
- **Instagram-carrousels:** wissel op elke slide welke kleur de ondergrond is, zodat swipen ritmisch voelt.
- **Verpakkingen:** één kleur per productlijn, de andere gedeeld over het assortiment.
- **Presentaties:** sectieslides in de donkere kleur, inhoudsslides op de lichte tint.
- **Visitekaartjes:** één kant in elke kleur.

### Vermijd

- Twee kleuren van vergelijkbare helderheid
- Een derde kleur binnensmokkelen voor één knop
- Onbehandelde kleurenfoto’s erin zetten
- Lichte tekst op de lichte kleur

### Doe

- Eén duidelijk donker, één duidelijk licht
- In plaats daarvan tinten en schaduwen van het paar
- Elke foto in duotoon in de twee kleuren
- Controleer contrast beide kanten op

Meet het contrast beide kanten op met de gereedschappen in [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility). Houd je van de discipline van twee kleuren, dan loopt hetzelfde denken door [minimalistisch grafisch ontwerp](https://gradiently.design/nl/guide/minimalist-design-ideas) en, op volle sterkte, [gedurfd grafisch ontwerp](https://gradiently.design/nl/guide/bold-design-ideas).

## FAQ

### Wat is tweekleurenontwerp?

Een ontwerp dat helemaal uit twee kleuren is opgebouwd, meestal één donkere en één lichte, met tinten van die twee toegestaan maar geen derde kleur.

### Welke twee kleuren passen goed samen voor een ontwerp?

Elk paar met een duidelijk verschil in helderheid, zoals kobalt en mandarijn, bos en blos, of inkt en boter. De donkerste moet leesbaar zijn op de lichtste.

### Wat is het verschil tussen tweekleurig en duotoon?

Tweekleurig beschrijft een hele opmaak uit twee kleuren. Duotoon beschrijft een foto die zo is omgezet dat schaduwen en lichten twee kleuren worden.

### Hoe maak ik een duotoonafbeelding in CSS?

Maak de afbeelding grijswaarden, meng hem met `mix-blend-mode: multiply` op de lichte kleur en leg dan de donkere kleur eroverheen met `mix-blend-mode: lighten`.

### Is drukken in twee kleuren goedkoper?

Bij zeefdruk en offset met steunkleuren betekenen minder inkten meestal minder zeven of platen, dus opdrachten in twee kleuren zijn doorgaans goedkoper dan full colour.