Farvepalet fra billede: sådan henter du en fra et foto

For at lave en farvepalet fra et billede leder du efter tre ting: de dominerende farver, der fylder de største områder, nogle få understøttende farver og én eller to små, levende accenter, der giver billedet dets gnist. Derefter tager du en prøve fra hvert område i stedet for en enkelt pixel, renser den, så den svarer til det, du husker, og tjekker, at farverne fungerer sammen. Gjort godt føles paletten som fotoet, selv når fotoet ikke er der.

Denne guide gennemgår, hvordan du gør det i hånden, hvad automatiske værktøjer gør rigtigt og forkert, og hvordan du gør resultatet til en gradient. For færdige paletter fra rigtige motiver, se naturfarvepaletter.

Dominerende, understøttende og accentfarver

Ethvert foto har et farvehierarki. Forestil dig en havn i skumringen: det meste af billedet er dybblåt vand og en skifergrå himmel, et bånd af varme terrakottataget løber hen over midten, og nogle få små natriumlamper gløder orange. Vandet og himlen er dominerende, tagene understøtter dem, og lamperne er accenten. Fjern lamperne, og paletten mister sin varme. Gør dem dominerende, og det bliver et andet billede.

Skriv proportionerne ned sammen med farverne. En palet er ikke kun en liste af hexkoder: de samme seks farver brugt i lige store mængder ligner slet ikke fotoet. 60-30-10-reglen er en god måde at notere dem på.

Sådan henter du farver fra et foto i hånden

1. 1

   Slør fotoet først

   Brug en kraftig sløring, eller knib blot øjnene sammen. Detaljer, tekstur og støj forsvinder, og de rigtige farveområder træder frem. En prøve fra et sløret billede giver gennemsnit i stedet for tilfældigheder.

2. 2

   Tag prøver af områder, ikke pixler

   Brug en pipette med stor prøvestørrelse, for eksempel 11 gange 11 pixel, eller vælg tre punkter i hvert område, og find gennemsnittet.

3. 3

   Saml mere, end du har brug for

   Tag otte til tolv prøver fra forskellige dele af billedet, også de mindste lyse detaljer.

4. 4

   Gruppér og vælg

   Gruppér ens prøver, behold den klareste fra hver gruppe, og slut med fem til syv farver: to eller tre dominerende, to understøttende og en eller to accenter.

5. 5

   Ret ind efter hukommelsen

   Sammenlign hver farveprøve med fotoet i normal størrelse. Ser en farve mat eller grå ud ved siden af det, du husker, så løft dens kromatik lidt, eller ryk let på farvetonen.

6. 6

   Tjek kontrasten

   Sørg for, at mindst én lys og én mørk farve i paletten kan læses mod hinanden som tekst. Se farvekontrast.

Hvorfor pipettevalg ser mudrede ud

Et foto er ikke lavet af rene farver. En blå himmel er tusindvis af let forskellige blå nuancer, skygger blander farven fra det, der er i nærheden, og JPEG-kompression tilføjer blokke af gennemsnitsfarver. Klikker du én gang, lander du ofte på en gråbrun pixel, der findes i filen, men ikke i din erindring om motivet.

Sådan bruger du en paletgenerator fra et billede

Automatiske værktøjer formindsker billedet, grupperer ensartede pixler og returnerer de største grupper. Det finder dominerende farver pålideligt. Svagheden er accenten: et lille orange lys dækker måske én procent af billedet, så det kommer aldrig på listen. Se enhver generators resultat som et første udkast, og tilføj accenterne i hånden.

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

Gør en fotopalet til en gradient

Den nemmeste måde at få en gradient til at føles som et foto er at beholde farverne i den rækkefølge, de optræder i motivet. Himmel over horisont over vand. Blade over frugt over jord. Gradienten bærer så billedets struktur og ikke kun dets farver, og folk fornemmer forbindelsen, selv når de ikke kan sætte ord på den.

Hold øje med overgangene mellem naboer. To farver, der ligger langt fra hinanden på fotoet, som et varmt tag og en kold himmel, kan mødes i gråt, når de blandes direkte. Sæt en farve ind, der ligger mellem dem i motivet, som det blege skær ovenfor, og blandingen forbliver ren. Mudrede gradienter forklarer reglen.

I Gradiently gør Match et billede det i ét trin: slip et billede, og du får paletten og de nærmeste eksisterende Marks, eller Gradiently laver nye Marks, der føles som det. Så kan du designe med dem med det samme.