# Warme en koele kleuren: temperatuur bewust gebruiken

[Canonical HTML page](https://gradiently.design/nl/guide/warm-and-cool-colors)

Elke kleur heeft een temperatuur, ook je grijs en je wit. Leer die te lezen en je laat een ontwerp dichterbij, rustiger of helderder aanvoelen zonder één tint te veranderen.

## The short version

- Warme en koele kleuren zijn de twee helften van de kleurencirkel: rood, oranje en geel voelen warm, terwijl groen, blauw en violet koel voelen.
- Temperatuur is relatief, dus een violet oogt warm naast blauw en koel naast oranje.
- Warme kleuren voelen meestal dichterbij en energieker, terwijl koele kleuren meestal wijken en kalmeren, en daarom ogen verre heuvels in landschappen blauw.
- Ook grijs en wit hebben een temperatuur, en het per ongeluk mengen van warme en koele neutrale kleuren is een veelvoorkomende reden dat een ontwerp net niet klopt.
- Een kleurverloop van warm naar koel blijft zuiver wanneer het via een gedeelde buur loopt, zoals roze of violet, in plaats van via grijs.

**Warme en koele kleuren** zijn de twee helften van de kleurencirkel. Rood, oranje en geel voelen warm, zoals vuur en zonlicht; groen, blauw en violet voelen koel, zoals water, schaduw en avond. Temperatuur verandert hoe een ontwerp aanvoelt voordat iemand het leest: warme kleuren komen naar voren en geven energie, koele kleuren wijken terug en kalmeren. Temperatuur bewust gebruiken is een van de snelste manieren om een palet doordacht te laten aanvoelen.

- Warm rood: #d7263d
- Warm oranje: #f46036
- Warm geel: #f7b32b
- Koel groen: #2e9e6f
- Koel blauw: #1b7fbd
- Koel violet: #5b3cc4

Drie warme en drie koele kleuren van tegenovergestelde kanten van de cirkel. De scheiding loopt ongeveer tussen geelgroen en roodviolet.

## Temperatuur is relatief

De grens tussen warm en koel ligt niet vast. Geelgroen en roodviolet liggen op de rand, en elke kleur oogt warmer naast een koelere. Een magenta naast een hemelsblauw leest warm; hetzelfde magenta naast oranje leest koel. Daarom beoordeel je temperatuur in het palet, niet staal voor staal.

- Magenta naast blauw: warm: `linear-gradient(90deg, #1b7fbd 0% 50%, #b83b8f 50% 100%)`
- Magenta naast oranje: koel: `linear-gradient(90deg, #f46036 0% 50%, #b83b8f 50% 100%)`

Hetzelfde magenta rechts in beide. De temperatuur verandert met de buur.

Kleuren hebben ook temperatuur *binnen* een tint. Een rood dat naar oranje neigt is warmer dan een rood dat naar blauw neigt, en een blauw met een vleugje groen is warmer dan een blauw dat naar violet neigt. Ontwerpers noemen die neiging de ondertoon, en die zorgt ervoor dat twee ‘rode’ kleuren vloeken.

## Hoe warme en koele kleuren diepte maken

Warme kleuren lijken meestal naar voren te komen en koele kleuren terug te wijken. Landschapsschilders gebruiken dit al eeuwen: lucht verstrooit licht, dus verre heuvels ogen echt blauwer en bleker, en onze ogen lezen koel en bleek als ver weg. Je kunt hetzelfde effect lenen in vlak ontwerp.

| Eigenschap | Warme kleuren | Koele kleuren |
| --- | --- | --- |
| Ruimte | Komen naar voren, voelen dichtbij | Wijken terug, voelen ver weg |
| Energie | Actief, urgent, sociaal | Rustig, stabiel, geconcentreerd |
| Het best voor | Knoppen, bedragen, koppen, eten | Achtergronden, grote vlakken, data, gezondheid |
| In grote hoeveelheden | Kunnen luid of heet aanvoelen | Kunnen koud of afstandelijk aanvoelen |
| In licht | Lage kelvinwaarde, zoals een lamp van 2700 K | Hoge kelvinwaarde, zoals daglicht bij bewolking |

Tendensen, geen wetten. Verzadiging en lichtheid kunnen temperatuur omkeren: een bleke perzik wijkt meer dan een elektrisch blauw.

De praktische regel: zet koele kleuren in grote achtergrondvlakken en bewaar warme kleuren voor de dingen die de kijker het eerst moeten bereiken. Een warme call-to-action op een koele pagina valt op zonder groot te hoeven zijn, wat mooi aansluit op de [60-30-10-regel](https://gradiently.design/nl/guide/60-30-10-rule).

## Warme en koele neutrale kleuren

Ook grijs, wit en zwart dragen temperatuur, en dat doet er meer toe dan mensen verwachten. Een warm gebroken wit voelt als papier; een koel wit voelt als een scherm of een kliniek. Een ontwerp dat een warmgrijze achtergrond mengt met koelgrijze tekst oogt vaak een beetje verkeerd zonder dat iemand kan zeggen waarom.

- Warm papier: #f5efe6
- Warme steen: #b8ada0
- Warm antraciet: #3d3530
- Koele mist: #eef2f6
- Koele leisteen: #a3adb8
- Koel antraciet: #2b3240

Warme neutrale kleuren neigen naar bruin en crème, koele naar blauw. Kies één familie voor een heel ontwerp.

```css
:root {
  /* Warm neutrals: pair with reds, oranges, golds */
  --paper: #f5efe6;
  --stone: #b8ada0;
  --charcoal-warm: #3d3530;

  /* Cool neutrals: pair with blues, greens, violets */
  --mist: #eef2f6;
  --slate: #a3adb8;
  --charcoal-cool: #2b3240;
}
```

Door neutrale kleuren in benoemde warme en koele sets te houden, valt per ongeluk mengen makkelijk op bij een codereview.

## Warm en koel mengen in één kleurverloop

Verlopen van warm naar koel behoren tot de opvallendste die er zijn, en zonsondergangen bewijzen dat. Ze gaan ook het makkelijkst mis, omdat warme en koele kleuren vaak tegenover elkaar op de cirkel liggen en een rechte overgang ertussen door grijs loopt. De oplossing is de overgang te leiden via een kleur die bij beide kanten hoort, meestal roze, magenta of violet.

- Oranje naar blauw, direct: `linear-gradient(90deg, #f46036 0%, #1b7fbd 100%)`
- Oranje naar blauw via roze: `linear-gradient(90deg, #f46036 0%, #e0457b 35%, #8a3fb8 65%, #1b7fbd 100%)`
- Schemering: koel boven, warm onder: `linear-gradient(180deg, #2b3a67 0%, #8a3fb8 45%, #f28f6b 80%, #ffd29d 100%)`
- Geel naar groen via limoen: `linear-gradient(135deg, #f7b32b 0%, #8cc63f 50%, #2e9e6f 100%)`

De directe overgang zakt in een dof midden. De andere lopen via een gedeelde buur, dus elk punt onderweg is een echte kleur. [Modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) legt de geometrie uit.

Ook hier doet verhouding ertoe. Laat één temperatuur leiden en de andere als contrast verschijnen. Een overwegend koel verloop met een warme gloed aan één rand voelt als avondlicht; een gelijke verdeling tussen warm en koel voelt besluiteloos. [Zonsondergang-kleurverlopen](https://gradiently.design/nl/guide/sunset-gradient) heeft veel meer voorbeelden van warm en koel die één veld delen.

## Warme en koele kleuren in alledaags ontwerp

- **Een menubord van een café:** warme crème ondergrond, tekst in espressobruin en één terracotta accent, zodat het voelt als de ruimte waarin het hangt
- **Een bankapp:** koele vlakken in leisteen en blauw, met één warm amber voor meldingen die aandacht nodig hebben
- **Een poster voor een nachtevenement:** een diep, koel violet veld met een warme oranje kop die naar voren springt
- **Een huidverzorgingslancering:** koele mist en salie, opgetild door één warme perzik voor de productnaam
- **Een sportpromo:** warm rood en oranje in de hoofdrol, een koel marineblauw alleen voor de kleine lettertjes

In elk geval bepaalt één temperatuur het klimaat en stuurt de andere de aandacht. Die combinatie is ook een milde vorm van contrast met [complementaire kleuren](https://gradiently.design/nl/guide/complementary-colors), zonder de volle botsing van echte tegenpolen.

## Een temperatuur kiezen voor je merk

1. **Begin bij het gevoel** Gastvrije, levendige en praktische merken neigen meestal naar warm. Precieze, rustige en betrouwbare merken neigen meestal naar koel. Geen van beide is beter; kies wat past bij wat je doet.
2. **Kies één leidende temperatuur** Bouw het grootste deel van je palet, inclusief neutrale kleuren, aan één kant. Dat geeft het merk een consistent klimaat.
3. **Voeg één accent van de andere kant toe** Eén warm accent op een koel merk, of een koel accent op een warm merk, geeft contrast en een duidelijke plek waar het oog kan landen.
4. **Test in context** Bekijk het palet op de echte schermen en materialen waarop het gaat leven. Kleuren verschuiven tussen schermen en opnieuw in drukwerk; zie [hoe je merkkleuren kiest](https://gradiently.design/nl/guide/how-to-choose-brand-colors).

## FAQ

### Wat zijn warme en koele kleuren?

Warme kleuren zijn rood, oranje en geel; koele kleuren zijn groen, blauw en violet. De grenskleuren, geelgroen en roodviolet, kunnen beide kanten op lezen, afhankelijk van hun buren.

### Is paars warm of koel?

Dat hangt af van de neiging en de buren. Roodpaars en magenta lezen warm naast blauw, terwijl blauwviolet koel leest, en elk paars oogt koel naast oranje.

### Komen warme kleuren echt naar voren?

Ze lijken meestal dichterbij, vooral als ze verzadigd zijn, terwijl koele, bleke kleuren meestal wijken. Lichtheid en verzadiging kunnen het effect tenietdoen.

### Kun je warme en koele kleuren mengen in één ontwerp?

Ja. Laat één temperatuur leiden, gebruik de andere als accent, en meng in kleurverlopen via een gedeelde buur zoals roze of violet om een grijs midden te vermijden.