Färgpalett från bild: så plockar du fram en ur ett foto

För att bygga en färgpalett från en bild letar du efter tre saker: de dominerande färgerna som fyller de största ytorna, några stödjande färger och en eller två små, levande accenter som ger bilden dess gnista. Sedan hämtar du var och en från en yta i stället för en enda pixel, rensar upp den så att den stämmer med det du minns att du såg och kontrollerar att färgerna fungerar tillsammans. Gjord på rätt sätt känns paletten som fotot även när fotot inte är där.

Den här guiden går igenom hur du gör det för hand, vad automatiska verktyg gör rätt och fel, och hur du gör resultatet till en gradient. För färdiga paletter från verkliga miljöer, se färgpaletter från naturen.

Dominerande, stödjande och accentfärger

Varje foto har en färghierarki. Tänk dig en hamn i skymningen: det mesta av bilden är djupblått vatten och en skiffergrå himmel, ett band av varma terrakottataken löper över mitten och några små natriumlampor glöder orange. Vattnet och himlen dominerar, taken stöder dem och lamporna är accenten. Ta bort lamporna och paletten förlorar sin värme; låt dem dominera och det blir en annan bild.

Skriv ner proportionerna tillsammans med färgerna. En palett är inte bara en lista med hexkoder: samma sex färger i lika stora mängder ser inte alls ut som fotot. 60-30-10-regeln är ett bra sätt att notera dem.

Så hämtar du färger ur ett foto för hand

1. 1

   Sudda ut fotot först

   Lägg på en kraftig oskärpa, eller kisa helt enkelt. Detaljer, struktur och brus försvinner och de verkliga färgytorna syns. Att ta prov från en suddig bild ger medelvärden i stället för tillfälligheter.

2. 2

   Ta prov från ytor, inte pixlar

   Använd en pipett med stor provstorlek, till exempel 11 gånger 11 pixlar, eller välj tre punkter i varje yta och ta medelvärdet.

3. 3

   Samla mer än du behöver

   Ta åtta till tolv prover från olika delar av bilden, inklusive de minsta ljusa detaljerna.

4. 4

   Gruppera och välj

   Gruppera liknande prover, behåll det tydligaste från varje grupp och landa på fem till sju färger: två eller tre dominerande, två stödjande, en eller två accenter.

5. 5

   Justera mot minnet

   Jämför varje färgruta med fotot i normal storlek. Om en färg ser matt eller grå ut bredvid det du minns, höj dess kromatiska styrka något eller putta på nyansen.

6. 6

   Kontrollera kontrasten

   Se till att minst en ljus och en mörk färg i paletten syns mot varandra för text. Se färgkontrast.

Därför ser pipettval grumliga ut

Ett foto består inte av rena färger. En blå himmel är tusentals lite olika blå nyanser, skuggor blandar in färgen på det som finns intill, och JPEG-komprimering lägger till block av medelfärg. Klicka en gång så hamnar du ofta på en gråbrun pixel som finns i filen men inte i ditt minne av motivet.

Att använda en palettgenerator från en bild

Automatiska verktyg krymper bilden, grupperar liknande pixlar och returnerar de största grupperna. Det hittar dominerande färger pålitligt. Svagheten är accenten: ett litet orange ljus kan täcka en procent av bilden, så det kommer aldrig med på listan. Se varje generators resultat som ett första utkast och lägg tillbaka accenterna för hand.

// 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 fotopalett till en gradient

Det enklaste sättet att få en gradient att kännas som ett foto är att behålla färgerna i den ordning de förekommer i motivet. Himmel ovanför horisont ovanför vatten. Löv ovanför frukt ovanför jord. Gradienten bär då bildens uppbyggnad och inte bara dess färger, och folk anar sambandet även när de inte kan sätta ord på det.

Se upp för övergångarna mellan grannar. Två färger som ligger långt från varandra i fotot, som ett varmt tak och en kall himmel, kan mötas i grått när de blandas direkt. Lägg in en färg som ligger mellan dem i motivet, som det bleka skenet ovan, så förblir blandningen ren. Grumliga gradienter förklarar regeln.

I Gradiently gör Matcha en bild det här i ett steg: släpp en bild så returnerar den paletten och de närmaste befintliga Marks, eller gör nya Marks som känns som den. Du kan sedan designa med vilken av dem som helst direkt.