Ova jednostavna aplikacija omogućuje vam da vidite kako Holivud koristi boju da meša s vašim emocijama

Zašto se Joker osjeća tako uznemirujuće zeleno i žuto?

Korišćenje

Why does Joker feel so unsettlingly green and yellow?

Korišćenje

Zašto je Blade Runner natopljen u čaj i naranču?

Korišćenje

Why is Blade Runner soaked in teal and orange?

Korišćenje

Zašto film čini kožu mekom i toplom?

Korišćenje

Why does film make skin look soft and warm?

To nije magija, to je boja.

A ko god kontrolira boju – kontrolira emocionalnu težinu okvira. Označavanje boja je vizualni jezik kinematografije – način oblikovanja atmosfere, usmjeravanja pažnje gledatelja i postavljanja tona priče. Može biti suptilno i gotovo nevidljivo. ili smelo i stilizovano, kao u radu Wong Kar-Wai, Fincher, Nolan ili Villeneuve.

Gde stvarno počinje rad boja? kako znamo koja je „prava“ boja? i kako prevesti kreativnu namjeru u tehničku akciju?

Spoiler: ne počinje sa LUT-ovima ili filtrima.Počinje sa ciljevima boja, kalibracijom i pažljivo odabranim paletamaNaši

U ovoj seriji ćemo istražiti:

Korišćenje
• koje je razvrstavanje boja na najosnovnijem nivou;
Korišćenje
• zašto je ograničavanje palete značajka, a ne bug;
Korišćenje
• Kako funkcionišu grafike boja (i zašto su važne);
Korišćenje
• i kako izgraditi sopstveni alat za razvrstavanje u pregledniku - sa React i nekom jednostavnom matematikom.
Korišćenje

Mi to nećemo samo objasniti, mi ćemo to pokazati.I moći ćete da eksperimentišete, tinker, a možda i prvi put stvarnoseeOd kojih boja je napravljen.

What is Color Grading, and Why Start with Color Targets?

Raspored boja je proces prilagođavanja i stilizovanja slike kako bi se postigao određeni vizualni ton, emocionalni efekat ili tehnički standard.

Korišćenje
• balansiranje izloženosti i bijele tačke;
Korišćenje
• ispravljanje tehničkih promena boja;
Korišćenje
• kreiranje vizualnog stila s kontrastom, tonovima i bojnim krivuljama.
Korišćenje

Ali razvrstavanje nije samo o "poboljšanju".To je o kontroli - raspoloženja, fokusa gledatelja, vizualnog jezika čitavog pripovjedača.

Prije nego što primenite bilo koji kreativni izgled, morate donijeti sliku naneutral statešto znači:

Korišćenje
• ispravljanje neželjenih boja (korekcija boja);
Korišćenje
• normaliziranje snimanja na standardni prostor boja (kao što je Rec.709 ili sRGB);
Korišćenje
• usklađivanje materijala iz različitih kamera u dosljednu bazu.
Korišćenje

U tu svrhu, farmer koristicolor targetsKao što je **bojačU pitanju jeHromaUredi,** ili druge referentne karte.

Ciljna boja je grafikon boja sPrecizno izmerene vrednostiTe vrednosti nisu proizvoljne – dobivene su spektroskopskim mjerenjima u kontrolisanim okruženjima koristeći profesionalnu opremu kao što je X-Rite iliSpektrofotometri Konica Minolta.

Jedan od prvih široko prihvaćenih ciljeva bio jeKodak Gray skala– traka neutralnih sivih nijansi koja se koristi za kontrolu izlaganja. Kasnije su došli napredniji grafikoni sa punim bojama – kao što jeMacbeth ColorChecker, uveden 1976. godine (sada poznat kaoX-Rite ColorCheckerPoseduje 24 boja koje su dizajnirane da predstavljaju zajedničke boje stvarnog svijeta: ljudsku kožu, plavo nebo, zeleno lišće i još mnogo toga.

Uz porast digitalne fotografije i digitalnog filma, ciljevi boja postali su još kritičniji. Oni su sada bitni alati za kalibraciju ne samo kamera, već i monitora, štampača, skenera - i bilo kojeg uređaja koji se bavi bojama.

Uzmite na primer X-Rite ColorChecker. Svaki patch se meri pod standardizovanim osvetljenjem (običnoD65iliD50), sa rezultatima zabeleženim uCIE XYZ coordinates— model boje nezavisne od uređaja. Te koordinate se zatim pretvaraju uRGB values, ovisno o radnom prostoru boja (kao što jesRGBU pitanju jeRec.709iliAdobeRGBU svakom slučaju)

Dakle, RGB serije koje koristimo u našoj aplikaciji nisu nagađanja – to su precizne digitalne reprezentacije standardiziranih, fizički izmjerenih patchova.

Ako je patch za ton kože u ColorChecker Classic-u definisan kao [194, 150, 130] u RGB-u, to bi trebalo da izgleda pod ispravnim uslovima.

The Catch: Color Charts Are Just the Beginning

Ciljevi boje su neophodni za kalibraciju - ali to je sve što jesu.Jedan početakOni ne računaju za:

Korišćenje
• kako se boje ponašaju u naglascima ili senkama;
Korišćenje
• jedinstvene karakteristike filma ili leća;
Korišćenje
• ili kreativnu namjeru iza određenog pogleda.
Korišćenje

U profesionalnim alatima kao što suDaVinci ResolveiliOporavak, grafikoni boja su samo korak jedan u dugoj rupi. Odatle se krećete u napredne procese kao što su emulacija filma, toniranje, žitarice, halation, cvetanje i druge stilističke transformacije.a chart is a calibration tool — not a style.

CinePalette: A Minimal Tool for Exploring Color Palettes

Da bismo pokazali kako izbor palete utiče na sliku, izgradili smoCinePalette— jednostavna web aplikacija koja vizualizira što se događa kada ograničite prostor boja (proces poznat kaoPaleta smanjenjaU svakom slučaju)

What You Can Do with CinePalette:

Korišćenje
• preuzimanje bilo koje slike;
Korišćenje
• izaberite paletu (ColorChecker, Portra, Sepia itd.);
Korišćenje
• ponovite svaki piksel na najbližu boju u toj paleti;
Korišćenje
• usporedite prije i poslije sa interaktivnim slajdom;
Korišćenje
• sačuvajte rezultat
Korišćenje
• ili izgraditi vlastitu paletu od nule.
Korišćenje

How It Works in Code

Naša aplikacija radi u potpunosti u pregledniku koristećiReacti oCanvas APIProjekat - nazvanCinePalette— biće otvorenog koda i dostupan na GitHub (link na kraju serije).

Počnimo sa skupom unaprijed definisanih paleta, ali korisnici takođe mogu izgraditi i sačuvati svoje. Palete su definirane kao nalozi RGB vrednosti – na primjer, evo šta jeKodak Portra 400Paleta izgleda kao:

"Portra 400": [
  [75, 60, 50],     // shadows
  [160, 130, 110],  // skin tones
  [220, 200, 180],  // highlights
  [60, 100, 80],    // foliage
  [180, 150, 100]   // neutral
],

Odabrana paleta definira koje boje su "dozvoljene" da se pojave u konačnoj slici.To postaje vizualni jezik okvira - osnovni tonovi koji određuju njegovo raspoloženje i stil.

Kada korisnik učita sliku i odabere paletu, evo šta se događa ispod poklopca:

Korišćenje
1. Slika se prikazuje na skrivenu <canvas> - to nam daje pristup na nivou piksela za manipulaciju podacima.
Korišćenje
2. Izvadimo ImageData objekt, koji sadrži niz u kojem je svaki piksel predstavlja četiri vrednosti: [R, G, B, A].
Korišćenje
3. Krećemo kroz svaki piksel, izvlačeći njegovu RGB boju.
Korišćenje
4. Za svaki piksel, pronađemo najbližu odgovarajuću boju iz odabrane palete, koristeći Euclidsku udaljenost u RGB prostoru – i zamenimo je.
Korišćenje

Uložimo kartu Shirley i pokušajmo primijeniti različite palete - odmah ćete vidjeti kako izbor palete oblikuje sliku.

Suština magije leži u funkciji koja analiziraeach individual pixelI nađe seclosest matching colorIzabrana paleta:

const findClosestColor = (r, g, b) => {
  let minDist = Infinity;
  let closest = [r, g, b];
  for (let [pr, pg, pb] of palette) {
    const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);
    if (dist < minDist) {
      minDist = dist;
      closest = [pr, pg, pb];
    }
  }
  return closest;
};

Zatim, zamijenimo originalnu boju piksela u ImageData sa najbližim podudaranjem iz palete.for every single pixelU ovoj slici.

for (let i = 0; i < data.length; i += 4) {
  const [r, g, b] = [data[i], data[i + 1], data[i + 2]];
  const [nr, ng, nb] = findClosestColor(r, g, b);
  data[i] = nr;
  data[i + 1] = ng;
  data[i + 2] = nb;
}

Nakon što su svi pikseli obrađeni, rezultat vraćamo na <canvas> i pretvaramo ga u sliku pomoću .toDataURL().see the result instantly in the browser— i preuzmite filtriranu sliku jednim klikom.

ctx.putImageData(imageData, 0, 0);
setFilteredImage(canvas.toDataURL());

Ovde, koristimoEuclidean distance in RGB space— klasična metoda za mjerenje koliko su dve boje „blize“:

const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);

Ovde, (r, g, b) je boja trenutnog piksela, a (pr, pg, pb) je jedna od boja u paleti.closest visual matchUnutar odabrane palete.

Ovaj pristup je intuitivan i jednostavan za primjenu, ali ima ograničenja:RGB prostor ne uzima u obzir kako ljudi stvarno percipiraju bojeNa primer, mi smo osetljiviji na zeleno nego na plavo, a razlike u svetlosti mogu biti zavaravajuće.

Koristimo ovaj pristup uCinePalettekao jednostavan i pristupačan način da se dokaže osnovno načelo bojnog mape. međutim, čak i u svom trenutnom obliku, možete primijetiti da neke boje se zamjenjuju na načine koji se osećaju neočekivano ili "izbačeni".

U budućim verzijama planiramo dodati preklapanje izmeđuRGB and CIELABraspon boja – omogućava korisnicima da uporede kako različiti modeli utiču na točnost usklađivanja boja.

Why Does This Matter?

CinePalette prikazuje osnovni, ali temeljni korak u razvrstavanju boja:palette restrictionOvde počinje svaki vizualni stil – sa pitanjem:“What if we only used these colors?”.

Portra paleta donosi tople, nostalgične tonove. Pro 400 se osjeća hladno i podmuklo. Teal & Orange pruža visokokontrastni kinematografski udarac. Za razliku od alata kao što su Dehancer ili Resolve, CinePalette ne simulira fiziku filma.Boja je alat za stil i pričanje priča.

What’s Next?

Ovo je tek početak.U narednim delovima serije:

Korišćenje
• ćemo proširiti CinePalette sa sposobnošću odabira palete iz referentne slike;
Korišćenje
• dodajte automatsku ekstrakciju shema boja iz bilo kojeg okvira ili fotografije;
Korišćenje
• uvesti prebacivanje između RGB-a i LAB-a za perceptualno preciznije podudaranje;
Korišćenje
• i razbiti kako funkcioniše harmonija boja - i kako ga možete koristiti u stvarnom svetu razvrstavanja.
Korišćenje

Ostanite usklađeni – i budite spremni ne samo da naučite boju, već da je zaista vidite.