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

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.

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.

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 is een goede manier om ze vast te leggen.

Zo haal je kleuren met de hand uit een foto

1. 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. 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. 3

   Verzamel meer dan je nodig hebt

   Neem acht tot twaalf monsters uit verschillende delen van het beeld, inclusief de kleinste heldere details.

4. 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. 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. 6

   Controleer het contrast

   Zorg dat minstens één lichte en één donkere kleur in het palet tegen elkaar leesbaar zijn voor tekst. Zie kleurcontrast.

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.

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.

// 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 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.

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 legt de regel uit.

In Gradiently doet Een afbeelding matchen 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.