# Kleurenpalet uit een afbeelding halen: zo doe je het met een foto

[Canonical HTML page](https://gradiently.design/nl/guide/color-palette-from-image)

Een pipet geeft je een pixel. Een palet heeft de kleuren nodig die je je van het beeld herinnert, in de juiste verhoudingen. Zo kom je van het een naar het ander.

## The short version

- Een goed kleurenpalet uit een afbeelding heeft drie soorten kleur: dominante kleuren uit de grootste vlakken, ondersteunende kleuren en een of twee kleine, levendige accenten.
- Losse pipetkeuzes zien er vaak modderig uit, omdat foto’s vol schaduw, ruis en compressie zitten, dus neem meerdere plekken en middel ze.
- Kleuren die je je van een foto herinnert zijn meestal schoner en verzadigder dan de pixels, dus het chroma licht verhogen laat een palet echt aanvoelen.
- Automatische extractors vinden dominante kleuren goed maar missen vaak kleine accenten, die je met de hand moet terugzetten.
- Om een fotopalet in een kleurverloop om te zetten, houd je de kleuren in de volgorde waarin ze in de scène voorkomen, zoals lucht boven water boven kust.

Om een **kleurenpalet uit een afbeelding** te halen, zoek je drie dingen: de dominante kleuren die de grootste vlakken vullen, een paar ondersteunende kleuren en een of twee kleine, levendige accenten die het beeld zijn vonk geven. Neem dan elke kleur van een vlak in plaats van van één pixel, maak hem schoon zodat hij overeenkomt met wat je je herinnert en controleer of de kleuren samenwerken. Goed gedaan voelt het palet als de foto, ook als de foto er niet bij is.

Deze gids loopt door hoe je het met de hand doet, wat automatische tools goed en fout doen en hoe je het resultaat in een kleurverloop omzet. Voor kant-en-klare paletten uit echte scènes, zie [kleurenpaletten uit de natuur](https://gradiently.design/nl/guide/nature-color-palettes).

## Dominante, ondersteunende en accentkleuren

Elke foto heeft een kleurhiërarchie. Stel je een haven in de schemering voor: het grootste deel van het beeld is diepblauw water en een leisteengrijze lucht, een band warme terracotta daken loopt door het midden en een paar kleine natriumlampen gloeien oranje. Het water en de lucht zijn dominant, de daken ondersteunen ze en de lampen zijn het accent. Haal de lampen weg en het palet verliest zijn warmte; maak ze dominant en het wordt een ander beeld.

- Havenwater: #1d2a44
- Leisteenlucht: #3e5c86
- Nevel: #8a9bb5
- Terracottadaken: #b8674e
- Natriumlicht: #f2a65a
- Laatste gloed: #f6dcc0

Een palet uit een haven in de schemering. Twee dominante blauwtinten, een bleke nevel, een ondersteunende terracotta en twee warme accenten die klein moeten blijven.

Schrijf de verhoudingen naast de kleuren op. Een palet is niet alleen een lijst hexcodes: dezelfde zes kleuren in gelijke hoeveelheden zien er totaal niet uit als de foto. De [60-30-10-regel](https://gradiently.design/nl/guide/60-30-10-rule) is een goede manier om ze vast te leggen.

## Zo haal je kleuren met de hand uit een foto

1. **Vervaag de foto eerst** Pas een sterke vervaging toe, of knijp gewoon je ogen half dicht. Detail, textuur en ruis verdwijnen en de echte kleurvlakken komen tevoorschijn. Een vervaagd beeld bemonsteren geeft gemiddelden in plaats van toevalstreffers.
2. **Bemonster vlakken, geen pixels** Gebruik een pipet met een grote monstergrootte, zoals 11 bij 11 pixels, of kies drie punten in elk vlak en middel ze.
3. **Verzamel meer dan je nodig hebt** Neem acht tot twaalf monsters uit verschillende delen van het beeld, inclusief de kleinste heldere details.
4. **Groepeer en kies** Groepeer vergelijkbare monsters, houd de duidelijkste van elke groep en eindig met vijf tot zeven kleuren: twee of drie dominante, twee ondersteunende, een of twee accenten.
5. **Corrigeer richting je herinnering** Vergelijk elk staaltje met de foto op normale grootte. Als een kleur dof of grijs lijkt naast wat je je herinnert, verhoog dan het chroma een beetje of duw de tint iets op.
6. **Controleer het contrast** Zorg dat minstens één lichte en één donkere kleur in het palet tegen elkaar leesbaar zijn voor tekst. Zie [kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility).

## Waarom pipetkeuzes er modderig uitzien

Een foto bestaat niet uit schone kleuren. Een blauwe lucht is duizenden licht verschillende blauwtinten, schaduwen mengen de kleur van wat in de buurt is en jpeg-compressie voegt blokken gemiddelde kleur toe. Klik je één keer, dan land je vaak op een grijsbruine pixel die in het bestand bestaat maar niet in je herinnering van de scène.

### Modderige keuzes

- Eén klik op één pixel
- Bemonsteren uit schaduwen en randen tussen voorwerpen
- Kiezen uit een kleine, gecomprimeerde afbeelding
- Elke kleur precies houden zoals bemonsterd

### Schone keuzes

- Een gemiddeld monster uit een vervaagde kopie
- Bemonsteren uit het midden van verlichte, vlakke gebieden
- De grootste, minst gecomprimeerde versie gebruiken die je hebt
- Elke kleur bijstellen richting wat je je herinnert gezien te hebben

- Keuzes van één pixel: grijze olijf: `linear-gradient(90deg, #6b6a5e 0%, #7d7866 100%)`
- Gemiddelde en gecorrigeerde keuzes: `linear-gradient(90deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 65%, #f2a65a 100%)`

Twee overgangen uit dezelfde havenfoto. Ruwe pixelkeuzes van de rand tussen lucht en daken drijven weg naar grijs; schone keuzes, verbonden via de nevel en de gloed, houden hun blauw en oranje.

## Een palet generator gebruiken voor een afbeelding

Automatische tools verkleinen de afbeelding, groeperen vergelijkbare pixels en geven de grootste groepen terug. Dat vindt dominante kleuren betrouwbaar. De zwakte is het accent: een klein oranje licht kan een procent van het beeld beslaan, dus het haalt de lijst nooit. Zie de uitvoer van elke generator als een eerste versie en zet de accenten met de hand terug.

```js
// Most common colours in an image, grouped into coarse buckets.
// Finds dominant colours well; add small accents by hand.
async function paletteFromImage(url, count = 6) {
  const img = new Image()
  img.crossOrigin = 'anonymous'
  img.src = url
  await img.decode()
  const size = 64 // shrinking first averages away noise
  const canvas = new OffscreenCanvas(size, size)
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, size, size)
  const { data } = ctx.getImageData(0, 0, size, size)
  const buckets = new Map()
  for (let i = 0; i < data.length; i += 4) {
    const key = ((data[i] >> 4) << 8) | ((data[i + 1] >> 4) << 4) | (data[i + 2] >> 4)
    const b = buckets.get(key) ?? { r: 0, g: 0, b: 0, n: 0 }
    b.r += data[i]; b.g += data[i + 1]; b.b += data[i + 2]; b.n++
    buckets.set(key, b)
  }
  const hex = (v) => Math.round(v).toString(16).padStart(2, '0')
  return [...buckets.values()]
    .sort((a, b) => b.n - a.n)
    .slice(0, count)
    .map((b) => `#${hex(b.r / b.n)}${hex(b.g / b.n)}${hex(b.b / b.n)}`)
}
```

Een minimale extractor in de browser. De afbeelding moet op dezelfde site staan of cross-origin gebruik toestaan, anders weigert het canvas hem te lezen.

## Een fotopalet in een kleurverloop omzetten

De makkelijkste manier om een kleurverloop als een foto te laten voelen is de kleuren in de volgorde van de scène te houden. Lucht boven horizon boven water. Bladeren boven fruit boven aarde. Het kleurverloop draagt dan de structuur van het beeld naast zijn kleuren, en mensen voelen de verbinding ook als ze hem niet kunnen benoemen.

- Haven in de schemering: `linear-gradient(180deg, #3e5c86 0%, #8a9bb5 35%, #f6dcc0 50%, #b8674e 62%, #1d2a44 100%)`
- Citroenboomgaard: `linear-gradient(180deg, #fdf3c4 0%, #f4d03f 35%, #6f8f3a 70%, #2f4a2a 100%)`
- Woestijnochtend: `linear-gradient(180deg, #f7d9c4 0%, #e8a87c 40%, #c1666b 75%, #4a2c3a 100%)`
- Gletsjermeer: `linear-gradient(180deg, #d8ecef 0%, #7fb7be 40%, #2e6f7e 75%, #13303a 100%)`

Vier kleurverlopen uit fotopaletten, elk met zijn kleuren in scènevolgorde van boven naar beneden.

Let op de overgangen tussen buren. Twee kleuren die in de foto ver uit elkaar zitten, zoals een warm dak en een koude lucht, kunnen elkaar in grijs ontmoeten als je ze direct mengt. Zet er een kleur tussen die in de scène ertussen zit, zoals de bleke gloed erboven, en de overgang blijft schoon. [Modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) legt de regel uit.

In Gradiently doet [Een afbeelding matchen](/forge/match) dit in één stap: zet een afbeelding neer en je krijgt het palet en de meest verwante bestaande Marks, of nieuwe Marks die erop lijken. Je kunt er daarna meteen mee ontwerpen.

## FAQ

### Hoe haal ik een kleurenpalet uit een afbeelding?

Vervaag de afbeelding, bemonster de grootste kleurvlakken plus een of twee kleine levendige accenten, middel elk monster over meerdere pixels en stel de kleuren bij richting wat je je herinnert gezien te hebben.

### Hoeveel kleuren moet een palet uit een foto hebben?

Vijf tot zeven leggen meestal een foto vast: twee of drie dominante kleuren, twee ondersteunende kleuren en een of twee accenten.

### Waarom zien de kleuren die ik uit een foto kies er dof uit?

Losse pixels komen vaak uit schaduwen, randen of compressieartefacten. Bemonster gemiddelde vlakken uit verlichte, vlakke delen van het beeld en verhoog het chroma iets als een kleur nog grijs oogt.

### Waarom mist mijn palet generator de helderste kleur?

Generators rangschikken kleuren naar hoeveel van het beeld ze beslaan, dus kleine accenten halen de lijst zelden. Zet ze met de hand terug.