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 zelenim i žutim?

Zašto se Joker oseća tako uznemirujuće zelenim i žutim?

Zašto je Blade Runner namočen u teal i naranču?

Zašto je Blade Runner namočen u čašu i naranču?

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

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

To nije magija. To je boja.

I ko god kontrolira boju – kontrolira emotivnu težinu okvira. Razvrstavanje boja je vizualni jezik filma – 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. Ali da biste govorili ovaj jezik tečno, prvo morate razumeti njegovu gramatiku.

Gde stvarno počinje rad u boji? Kako znamo koja je „prava“ boja? i kako prevodite 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 paletama.

U ovoj seriji ćemo istražiti:

• šta je razvrstavanje boja na najosnovnijem nivou;
• zašto je ograničavanje palete značajka, a ne bug;
• kako funkcionišu grafikoni boja (i zašto su važni);
• i kako izgraditi svoj alat za razvrstavanje u pregledniku - uz React i neku jednostavnu matematiku.
  
• šta je razvrstavanje boja na najosnovnijem nivou;
• zašto je ograničavanje palete značajka, a ne bug;
• kako funkcionišu grafikoni boja (i zašto su važni);
• i kako izgraditi sopstveni alat za razvrstavanje u pretraživaču – uz React i neke jednostavne matematike.
  
» Br

Mi to nećemo samo objasniti, mi ćemo to pokazati. I moći ćete eksperimentisati, tinker, i možda po prvi put zapravo videti od čega se izrađuje razvrstavanje boja.

Mi to nećemo samo objasniti, mi ćemo to pokazati.vidjeti

Šta je razvrstavanje boja i zašto početi sa ciljevima boja?

Šta je razvrstavanje boja i zašto početi sa ciljevima boja?

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




• balansiranje izloženosti i bijele tačke;
• korekcija tehničkih promjena boja;
• crtavanje vizualnog stila s kontrastom, tonovima i bojnim krivuljama.
• balansiranje izloženosti i bijele tačke;
• korekcija tehničkih promjena boja;
• crtajući vizualni stil s kontrastom, tonovima i bojnim krivuljama.




Ali razvrstavanje nije samo o „činjenju toga lepim.“ Radi se o kontroli – raspoloženja, fokusa gledatelja, vizualnog jezika čitave priče.








Pre nego što primenite bilo koji kreativni izgled, morate dovesti sliku u neutralno stanje, što znači:

neutralna država




• korekcija neželjenih boja (korekcija boja);

• normaliziranje snimanja na standardni prostor boja (kao što je Rec.709 ili sRGB);

• matching materijal iz različitih kamera u dosljednu baznu liniju.

  
  

• korekcija neželjenih boja (korekcija boja);

korekcija neželjenih boja (korekcija boja);

• normaliziranje snimaka na standardni prostor boja (kao što je Rec.709 ili sRGB);

normaliziranje snimanja na standardni prostor boja (kao što je Rec.709 ili sRGB);

• matching materijal iz različitih kamera u dosljednu baznu liniju.

  
  

prilagođavanje materijala iz različitih kamera u dosljednu baznu liniju.




And for that, colorists use color targets like the **ColorChecker, ChromaDuMonde,**or other reference charts.


boja ciljevaColorCheckerChromaDuMonde» Br

A color target is a chart of color patches with precisely measured values. These values aren’t arbitrary — they’re obtained through spectrophotometric measurements in controlled environments using professional equipment like X-Rite or Konica Minolta spectrophotometers.

preciznije izmjerene vrednostiKonica Minolta spectrophotometers.Konica Minolta spectrophotometers




One of the first widely adopted targets was the Kodak Gray Scale — a strip of neutral gray tones used for exposure control. Later came more advanced charts with full-color patches — like the Macbeth ColorChecker, introduced in 1976 (now known as the X-Rite ColorChecker). It features 24 color swatches designed to represent common real-world colors: human skin, blue sky, green foliage, and more.

Kodak Gray ScaleKodak Gray ScaleMacbeth ColorChecker Sljedeći članakX-Rite ColorChecker Uslovi korišćenja




S porastom 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.











Take X-Rite's ColorChecker, na primjer. Svaki patch se mjeri pod standardizovanim osvetljenjem (obično D65 ili D50), sa rezultatima zabilježenima u CIE XYZ koordinatama – uređaj-neovisnom modelu boja. Te koordinate se zatim konvertuju u RGB vrednosti, ovisno o vašem radnom rasponu boja (kao što su sRGB, Rec.709, ili AdobeRGB).

D65 PreduzetnikD50 IzložbaCIE XYZ koordinacijeRGB vrednostisRGB StručnjaciRec.709 Preporučuje seAdobeRGB Preuzimanje




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 definiran kao [194, 150, 130] u RGB-u, to bi trebalo da izgleda u ispravnim uvjetima.

Ako vaš snimak pokazuje nešto drugačije, to je znak bojanja - i polazna točka za ispravku.







The Catch: Color Charts su samo početak

The Catch: Color Charts su samo početak

Crveni ciljevi su neophodni za kalibraciju – ali to je sve što jesu. Početak. Oni ne računaju:

Za početak.
• kako se boje ponašaju u naglascima ili senkama;
• jedinstvene karakteristike filma ili leća;
• ili kreativna namera iza određenog izgleda.
• kako se boje ponašaju u naglascima ili senkama;
• jedinstvene karakteristike filma ili leća;
• ili kreativna namera iza određenog pogleda.




In professional tools like DaVinci Resolve or Dehancer, color charts are just step one in a long pipeline. From there, you move into advanced processes like film emulation, tone mapping, grain, halation, bloom, and other stylistic transformations. So it’s critical to understand: a chart is a calibration tool — not a style.

DaVinci ResolveDaVinci ResolveDehancerDehancergraf je alat za kalibraciju, a ne stil.

CinePalette: Minimalni alat za istraživanje paleta boja

CinePalette: Minimalni alat za istraživanje paleta boja

Da bismo pokazali kako izbor palete utiče na sliku, izgradili smo CinePalette – jednostavnu web aplikaciju koja vizualizira što se događa kada ograničite prostor boja (proces poznat kao palete reduction).

CinePalette IzložbaSmanjenje palete




Šta možete učiniti sa CinePalette:

Šta možete učiniti sa CinePalette:
• upload bilo koju sliku;
• pick a palette (ColorChecker, Portra, Sepia, itd.);
• remap svaki piksel na najbližu boju u toj paleti;
• compare before & after sa interaktivnim slider;
• save the result;
• build your own palette from scratch.
• upload bilo koju sliku;
• pick palete (ColorChecker, Portra, Sepia, itd.);
• remap svaki piksel na najbližu boju u toj paleti;
• usporedite prije & nakon sa interaktivnim slajdom;
• sačuvaj rezultat;
• ili izgradite svoju paletu od nule.




Kako to funkcioniše u kodi

Kako to funkcioniše u kodu





Naša aplikacija radi u potpunosti u pregledniku koristeći React i Canvas API. Projekt - nazvan CinePalette - bit će otvorenog koda i dostupan na GitHub-u (link na kraju serije).

OdgovoriCanvas API PreduzetnikCinePalette Izložba




Mi počinjemo sa skupom unaprijed definiranih paleta, ali korisnici također mogu izgraditi i sačuvati svoje. Palete su definirane kao nizu RGB vrijednosti – na primjer, evo kako izgleda Kodak Portra 400 paleta:

Kodak Portra 400 Sljedeći članak

"Portra 400": [ [75, 60, 50], // senke [160, 130, 110], // tonovi kože [220, 200, 180], // naglasci [60, 100, 80], // lišće [180, 150, 100] // neutral ], 

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




Izabrana 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:

1. Slika je prikazana na skrivenu <canvas> – to nam daje pristup na razini piksela za manipulaciju podacima.
2. Izbacujemo ImageData objekt, koji sadrži niz u kojem je svaki piksel predstavljen sa četiri vrednosti: [R, G, B, A].
3. Pokrećemo svaki piksel, izvučemo njegovu RGB boju.
4. Za svaki piksel pronađemo najbližu odgovarajuću boju iz odabrane palete, koristeći Euclidsku udaljenost u RGB prostoru – i zamijenimo je.
• Slika je prikazana na skrivenu <canvas> - to nam daje pristup na nivou piksela za manipulaciju podacima.
Slika je prikazana na skrivenu <canvas>
• Izbacujemo ImageData objekt, koji sadrži raspon u kojem je svaki piksel predstavljen sa četiri vrednosti: [R, G, B, A].
Izvadimo objekat ImageData
• Mi prolazimo kroz svaki piksel, izvlačeći njegovu RGB boju.
Mi prolazimo kroz svaki piksel
• Za svaki piksel pronađemo najbližu odgovarajuću boju iz odabrane palete, koristeći Euclidsku udaljenost u RGB prostoru – i zamenimo je.
Za svaki piksel pronađemo najbližu odgovarajuću boju iz odabrane palete




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








Srce magije leži u funkciji koja analizira svaki pojedini piksel i pronalazi najbližu odgovarajuću boju iz odabrane palete:

po svakom pojedinom pikselunajbliža odgovarajuća boja

const findClosestColor = (r, g, b) => { let minDist = Infinity; let closest = [r, g, b]; za (let [pr, pg, pb]) { const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); ako (dist < minDist) {minDist = dist; closest = [pr, pg, pb]; } vrati najbliže; }; 

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 zamenimo originalnu boju piksela u ImageData sa najbližom podudaranjem iz palete.I ponovimo to - za svaki pojedini piksel na slici.

za svaki pojedini piksel

for (let i = 0; i < data.length; i += 4) { const [r, g, b] = [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; } 

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 koristeći .toDataURL(). Ovo omogućava korisniku da vidi rezultat odmah u pregledniku – i preuzme filtriranu sliku jednim klikom.

vidi rezultat odmah u pretraživaču




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

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




Ovde koristimo Euclidsku udaljenost u RGB prostoru – klasičan metod za merenje koliko su dve boje „blizu“:

Euklidska udaljenost u RGB prostoru

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

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. Iz svih izračunanih udaljenosti biramo najmanju – najbližu vizualnu podudaranost unutar odabrane palete.

najbliža vizualna utakmica




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

RGB prostor ne uzima u obzir kako ljudi stvarno percipiraju boje





Mi koristimo ovaj pristup u CinePalette kao jednostavan i pristupačan način da se dokaže osnovno načelo bojnih 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 "off."

CinePalette Izložba




U budućim verzijama, planiramo da dodamo prebacivanje između RGB i CIELAB rasponova boja - omogućujući korisnicima da uporede kako različiti modeli utiču na točnost podudaranja boja.

RGB i CIELAB

Zašto je ovo važno?

Zašto je ovo važno?

CinePalette prikazuje osnovni, ali temeljni korak u razvrstavanju boja: ograničenje palete. Ovde počinje svaki vizualni stil – sa pitanjem: „Šta ako bismo koristili samo ove boje?“

Ograničenje palete „Šta ako bismo koristili samo ove boje?“




A Portra paleta donosi tople, nostalgične tonove. Pro 400 se osjeća cool i subdued. Teal & Orange pruža visokokontrast kinematografski punch. Za razliku od alata kao što su Dehancer ili Resolve, CinePalette ne simulira fiziku filma. Ali ona hvata suštinu: color je alat za stil i pričanje priča.

color je alat za stil i pričanje priča.








Šta je sledeće?

Šta je sledeće?

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

• mi ćemo proširiti CinePalette sa sposobnošću odabira palete iz referentne slike;
• dodati automatsku ekstrakciju shema boja iz bilo kojeg okvira ili fotografije;
• uvesti prebacivanje između RGB i LAB za perceptujuće točnije podudaranje;
• i razbiti kako harmonija boja radi - i kako ga možete koristiti u stvarnom svijetu razvrstavanja.
• mi ćemo proširiti CinePalette sa sposobnošću odabira palete iz referentne slike;
CinePalette Izložba
• dodaje automatsku ekstrakciju shema boja iz bilo kojeg okvira ili fotografije;
• uvodi prebacivanje između RGB i LAB za perceptualno preciznije podudaranje;
RGB i LAB
• i razbiti kako harmonija boja funkcioniše - i kako ga možete koristiti u realnom svijetu razvrstavanja.
harmonija boja




Ostanite prilagođeni - i budite spremni ne samo da naučite boju, već i da je stvarno vidi.

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