Fargepalett fra bilde: slik henter du en fra et foto

For å lage en fargepalett fra et bilde ser du etter tre ting: hovedfargene som fyller de største flatene, noen få støttefarger og én eller to små, livlige aksenter som gir bildet gnisten. Deretter tar du prøve fra et område i stedet for en enkelt piksel, renser hver farge så den stemmer med det du husker å ha sett, og sjekker at fargene fungerer sammen. Gjort godt føles paletten som fotoet selv når fotoet ikke er der.

Denne guiden går gjennom hvordan du gjør det for hånd, hva automatiske verktøy får til og ikke, og hvordan du gjør resultatet om til en gradient. For ferdige paletter fra ekte motiver, se fargepaletter fra naturen.

Hoved-, støtte- og aksentfarger

Hvert foto har et fargehierarki. Se for deg en havn i skumringen: mesteparten av bildet er dypblått vann og en skifergrå himmel, et bånd av varme terrakotta-tak går tvers gjennom midten, og noen få små natriumlykter gløder oransje. Vannet og himmelen er hovedfargene, takene støtter dem, og lysene er aksenten. Ta bort lysene, og paletten mister varmen sin. Gjør dem dominerende, og den blir et annet bilde.

Skriv ned forholdene sammen med fargene. En palett er ikke bare en liste med hex-koder: de samme seks fargene brukt i like store mengder ser ikke ut som fotoet i det hele tatt. 60-30-10-regelen er en god måte å notere dem på.

Slik henter du farger ut av et foto for hånd

1. 1

   Gjør bildet uskarpt først

   Bruk en kraftig uskarphet, eller myk bare på øynene. Detaljer, tekstur og støy forsvinner, og de virkelige fargeflatene trer fram. Å ta prøver fra et uskarpt bilde gir gjennomsnitt i stedet for tilfeldigheter.

2. 2

   Ta prøver fra områder, ikke piksler

   Bruk en pipette med stor prøvestørrelse, for eksempel 11 ganger 11 piksler, eller velg tre punkter i hvert område og ta gjennomsnittet.

3. 3

   Samle mer enn du trenger

   Ta åtte til tolv prøver fra ulike deler av bildet, også de minste lyse detaljene.

4. 4

   Grupper og velg

   Grupper like prøver, behold den tydeligste fra hver gruppe, og avslutt med fem til sju farger: to eller tre dominerende, to støttende, én eller to aksenter.

5. 5

   Korriger mot hukommelsen

   Sammenlign hver fargeprøve med fotoet i normal størrelse. Hvis en farge ser sløv eller grå ut ved siden av det du husker, øk kromaen litt eller juster fargetonen.

6. 6

   Sjekk kontrast

   Pass på at minst én lys og én mørk farge i paletten leses mot hverandre til tekst. Se fargekontrast.

Hvorfor pipettevalg ser sølete ut

Et foto er ikke laget av rene farger. En blå himmel er tusenvis av litt ulike blåtoner, skygger blander inn fargen på det som er i nærheten, og JPEG-komprimering legger til blokker av gjennomsnittsfarge. Klikker du én gang, lander du ofte på en gråbrun piksel som finnes i filen, men ikke i minnet ditt om motivet.

Slik bruker du en palettgenerator fra et bilde

Automatiske verktøy krymper bildet, grupperer like piksler og returnerer de største gruppene. Det finner hovedfarger pålitelig. Svakheten er aksenten: et lite oransje lys kan dekke én prosent av bildet, så det kommer aldri med på listen. Se på resultatet fra en hvilken som helst generator som et førsteutkast og legg aksentene tilbake for hånd.

// 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)}`)
}

Slik gjør du en fotopalett om til en gradient

Den enkleste måten å få en gradient til å føles som et foto på, er å holde fargene i den rekkefølgen de har i motivet. Himmel over horisont over vann. Blader over frukt over jord. Gradienten bærer da bildets oppbygning i tillegg til fargene, og folk kjenner sammenhengen selv når de ikke kan sette ord på den.

Se på overgangene mellom naboer. To farger som ligger langt fra hverandre i fotoet, som et varmt tak og en kald himmel, kan møtes i grått når de blandes direkte. Legg inn en farge som ligger mellom dem i motivet, som den bleke gløden over, så holder blandingen seg ren. Sølete gradienter forklarer regelen.

I Gradiently gjør Match et bilde dette i ett steg: slipp inn et bilde, så returnerer det paletten og de nærmeste eksisterende Marks, eller lager nye Marks som føles som det. Du kan deretter designe med hvilken som helst av dem med en gang.