Väripaletti kuvasta: näin poimit sen valokuvasta

Väripaletin kuvasta rakentamiseen etsit kolmea asiaa: hallitsevia värejä, jotka täyttävät suurimmat alueet, muutamaa tukevaa väriä sekä yhtä tai kahta pientä, eloisaa korostusta, joka antaa kuvalle sen kipinän. Poimit sitten jokaisen alueelta yksittäisen pikselin sijaan, siistit sen vastaamaan sitä, mitä muistat nähneesi, ja tarkistat, että värit toimivat yhdessä. Hyvin tehtynä paletti tuntuu valokuvalta silloinkin, kun valokuvaa ei ole.

Tämä opas käy läpi, miten se tehdään käsin, mitä automaattiset työkalut tekevät oikein ja väärin ja miten tuloksen muuttaa liukuväriksi. Valmiita paletteja oikeista näkymistä löydät oppaasta luonnon väripaletit.

Hallitsevat, tukevat ja korostavat värit

Jokaisella valokuvalla on värihierarkia. Kuvittele satama hämärässä: suurin osa kuvasta on syvänsinistä vettä ja liuskeenharmaa taivas, keskellä kulkee kaista lämpimiä terrakottakattoja, ja muutama pieni natriumkatuvalo hehkuu oranssina. Vesi ja taivas ovat hallitsevia, katot tukevat niitä ja valot ovat korostus. Ota valot pois, ja paletti menettää lämpönsä. Tee niistä hallitsevia, ja siitä tulee eri kuva.

Kirjoita suhteet ylös värien viereen. Paletti ei ole vain lista heksakoodeja: samat kuusi väriä yhtä suurina määrinä käytettyinä eivät näytä lainkaan valokuvalta. 60-30-10-sääntö on hyvä tapa kirjata ne.

Miten poimit värit valokuvasta käsin

1. 1

   Sumenna valokuva ensin

   Käytä voimakasta sumennusta tai vain siristä silmiäsi. Yksityiskohdat, tekstuuri ja kohina katoavat, ja oikeat väri-alueet paljastuvat. Sumennetusta kuvasta poimiminen antaa keskiarvoja vahinkojen sijaan.

2. 2

   Poimi alueita, ei pikseleitä

   Käytä pipettiä suurella näytekoolla, kuten 11 × 11 pikseliä, tai valitse kolme pistettä jokaiselta alueelta ja laske keskiarvo.

3. 3

   Kerää enemmän kuin tarvitset

   Ota kahdeksasta kahteentoista näytettä kuvan eri osista, myös pienimmistä kirkkaista yksityiskohdista.

4. 4

   Ryhmittele ja valitse

   Ryhmittele samankaltaiset näytteet, säilytä selkein kustakin ryhmästä ja päädy viiteen tai seitsemään väriin: kaksi tai kolme hallitsevaa, kaksi tukevaa, yksi tai kaksi korostusta.

5. 5

   Korjaa muistin suuntaan

   Vertaa jokaista värinäytettä valokuvaan normaalikoossa. Jos väri näyttää tylsältä tai harmaalta muistamaasi verrattuna, nosta sen kromaa hieman tai nykäise sen sävyä.

6. 6

   Tarkista kontrasti

   Varmista, että vähintään yksi vaalea ja yksi tumma väri paletissa erottuvat toisistaan tekstiä varten. Katso värikontrasti.

Miksi pipettipoiminnat näyttävät mutaisilta

Valokuva ei koostu puhtaista väreistä. Sininen taivas on tuhansia hieman erilaisia sinisiä, varjot sekoittavat sisäänsä lähellä olevan värin, ja JPEG-pakkaus lisää keskiarvoistettujen värien lohkoja. Klikkaa kerran, ja päädyt usein harmaanruskeaan pikseliin, joka on tiedostossa mutta ei muistissasi näkymästä.

Palettigeneraattorin käyttö kuvasta

Automaattiset työkalut pienentävät kuvan, ryhmittelevät samankaltaiset pikselit ja palauttavat suurimmat ryhmät. Se löytää hallitsevat värit luotettavasti. Heikkous on korostus: pieni oranssi valo voi kattaa prosentin kehyksestä, joten se ei koskaan pääse listalle. Kohtele minkä tahansa generaattorin tulosta ensimmäisenä luonnoksena ja lisää korostukset takaisin käsin.

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

Valokuvan paletin muuttaminen liukuväriksi

Helpoin tapa saada liukuväri tuntumaan valokuvalta on pitää värit siinä järjestyksessä, jossa ne esiintyvät näkymässä. Taivas horisontin yllä, horisontti veden yllä. Lehdet hedelmän yllä, hedelmä mullan yllä. Liukuväri kantaa silloin kuvan rakenteen värien lisäksi, ja ihmiset aistivat yhteyden, vaikka eivät osaisi nimetä sitä.

Seuraa naapurien välisiä siirtymiä. Kaksi väriä, jotka ovat valokuvassa erillään, kuten lämmin katto ja kylmä taivas, voivat kohdata harmaassa häivytettäessä suoraan. Laita niiden väliin väri, joka on niiden välissä näkymässä, kuten yllä oleva vaalea hehku, niin häivytys pysyy puhtaana. Mutaiset liukuvärit selittää säännön.

Gradientlyssä Sovita kuvaan tekee tämän yhdellä askeleella: pudota kuva, niin se palauttaa paletin ja lähimmät olemassa olevat Markit tai tekee uusia Markeja, jotka tuntuvat siltä. Voit sitten suunnitella millä tahansa niistä heti.