Bu Basit Uygulama Hollywood'un Duygularınızla Nasıl Karıştığını Görmenizi Sağlar

Neden Joker bu kadar rahatsız edici bir şekilde yeşil ve sarı hissediyor?

Neden Joker bu kadar rahatsız edici bir şekilde yeşil ve sarı hissediyor?

Neden Blade Runner teal ve portakal içine dökülür?

Neden Blade Runner teal ve portakal içine dökülür?

Neden film cildin yumuşak ve sıcak görünmesini sağlar?

Neden film cildin yumuşak ve sıcak görünmesini sağlar?

Bu bir sihir değil.

Ve kim renk kontrol ediyorsa – çerçeve duygusal ağırlığını kontrol ediyor. Renk sınıflandırması sinemanın görsel dilidir – bir atmosferi şekillendirmek, izleyicinin dikkatini yönlendirmek ve bir hikayenin tonunu ayarlamak için bir yoldur. Bu ince ve neredeyse görünmez olabilir. Ya da Wong Kar-Wai, Fincher, Nolan veya Villeneuve’nin çalışmalarında olduğu gibi cesur ve stilize edilmiştir. Ama bu dili akıcı bir şekilde konuşmak için öncelikle dilbilgisini anlamak gerekir.

Renk işleri nerede başlar? “doğru” renk ne demek biliyor muyuz? ve yaratıcı niyetleri teknik eylemlere nasıl çeviriyorsunuz?

Spoiler: LUT veya filtrelerle başlamaz. Renk hedefleri, kalibrasyon ve dikkatle seçilen paletlerle başlar.

Bu seride, biz araştırmak olacak:

• renk derecelendirme en temel düzeyde nedir;
• neden paletinizi sınırlamak bir özelliktir, bir hata değil;
• renk grafikleri nasıl çalışır (ve neden önemlidir);
• ve tarayıcınızda kendi derecelendirme aracınızı nasıl oluşturursunuz - React ve bazı basit matematiklerle.
• ne renk derecelendirme en temel düzeyde;
• neden paletinizi kısıtlamak bir özellik, bir hata değil;
• Renk grafikleri nasıl çalışır (ve neden önemlidir);
• ve tarayıcıda kendi derecelendirme aracınızı nasıl oluşturursunuz - React ve basit bir matematik ile.
  
» Br »

Bunu sadece açıklamayacağız, bunu göstereceğiz. Ve deneyimleyebileceksiniz, tinker edebileceksiniz ve belki de ilk kez aslında bilirsiniz hangi renk sınıflandırması yapılır.

Bunu sadece açıklamayacağız, bunu göstereceğiz.Güçlü Görüntüler

Renk Sınıflandırması Nedir ve Neden Renk Hedefleri ile Başlamak Gerekir?

Renk Sıralaması Nedir ve Neden Renk Hedefleri ile Başlamak Gerekir?Renk derecelendirmesi, bir görüntüyi belirli bir görsel tonu, duygusal etki veya teknik standart elde etmek için ayarlamak ve stilize etme işlemidir. film, fotoğraf veya dijital üretimde olsun, derecelendirme genellikle şunları içerir:







• ekspansiyon ve beyaz nokta dengelemek;
• teknik renk değişikliklerini düzeltmek;
• kontrast, tonlar ve renk eğilimleri ile görsel bir stil oluşturmak.
• balans göstergesi ve beyaz nokta;
• teknik renk değişikliklerini düzeltmek;
• kontrast, tonlar ve renk eğilimleri ile görsel bir stil oluşturmak.




Ama derecelendirme sadece “iyi hale getirmek” ile ilgili değildir.

Düzenleme, ruh halini, izleyicinin odaklanışını, tüm anlatının görsel dilini kontrol etmekle ilgilidir.








Herhangi bir yaratıcı görünüm uygulamadan önce, resmin tarafsız durumuna getirmesi gerekir, yani:

tarafsız devlet




• istenmeyen renk atışlarını düzeltme ( renk düzeltme);

• resimleri standart bir renk aralığına (Rec.709 veya sRGB gibi) normalleştirme;

• farklı kameraların materyallerini tutarlı bir başlangıç çizgisine dönüştürme.

  
  

• istenmeyen renk yalıtımı düzeltme ( renk düzeltme);

istenmeyen renk yalıtımı düzeltme ( renk düzeltme);

• resmin standart bir renk aralığına (Rec.709 veya sRGB gibi);

gömleği standart bir renk aralığına (Rec.709 veya sRGB gibi) normalleştirme;

• birbirinden farklı kameraların materyallerini tutarlı bir başlangıç çizgisine dönüştürür.

  
  

farklı kameraların materyalini tutarlı bir başlangıç çizgisine dönüştürmek.




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


renk hedefleriColorCheckerChromaDuMonde» 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.

güçlü ölçüm değerleriKonica 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 GörüntülemeX-Rite ColorChecker İndir




Dijital fotoğrafçılık ve dijital sinema gelişimiyle birlikte, renk hedefleri daha da kritik hale geldi.Artık sadece fotoğraf makineleri değil, aynı zamanda monitörleri, yazıcıları, tarayıcıları ve renkleri ele alan herhangi bir cihazı kalibre etmek için gerekli araçlardır.Renk eşleştirme, profilleme ve tarafsız dengeleme iş akışları - film üretimiden bilimsel görüntülemeye kadar.











Örneğin, X-Rite'in ColorChecker'ı kullanın. her düzeltme standart aydınlatma altında ölçülür (genellikle D65 veya D50), sonuçlar CIE XYZ koordinatları - aygıt bağımsız bir renk modelinde kaydedilir.D65 / GüçlüD50 ile ilgili yorumlarCIE XYZ koordinatlarıRGB değerlerisRGB > GüçlüRec.709 HakkındaAdobeRGB İndir




Öyleyse uygulamamızda kullandığımız RGB aralığı tahmin değil - bunlar standartlaştırılmış, fiziksel olarak ölçülen düzeltmelerin hassas dijital temsilidir.




ColorChecker Classic'deki cilt tonu patch RGB'de [194, 150, 130] olarak tanımlanırsa, doğru koşullar altında bu şekilde görünmelidir.




The Catch: Color Charts Are Just the Beginning Renk grafikleri sadece başlangıçtır

The Catch: Color Charts Are Just the Beginning (← bağlantılar değiştir)

Renk hedefleri kalibrasyon için gereklidir - ama hepsi bu. Bir başlangıç. Bunlar şunları içermez:

Bir başlangıç.
• resimlerde veya gölgelerde renklerin davranış biçimi;
• film stoklarının veya lenslerin benzersiz özellikleri;
• veya belirli bir görünümün arkasındaki yaratıcı niyet.
• resimlerde veya gölgelerde renklerin davranışları;
• film stoklarının veya lenslerin benzersiz özellikleri;
• veya belirli bir bakışın arkasındaki yaratıcı niyet.




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 ResolveDehancerDehancerdiagram bir kalibrasyon aracıdır - bir stil değildir.

CinePalette: Renk Paletlerini Keşfetmek için Minimum Bir Araç

CinePalette: Renk paletlerini keşfetmek için minimal bir araçBir palet seçimin bir görüntüye nasıl etki ettiğini göstermek için CinePalette oluşturduk - renk alanınızı kısıtladığınızda neler olduğunu görselleştiren basit bir web uygulaması (palet azaltma olarak bilinen bir süreç).




CinePalette için yorumlarpalet azaltma




CinePalette ile neler yapılabilir:

CinePalette ile neler yapılabilir:
• herhangi bir görüntü yükleyin;
• bir palet seçin (ColorChecker, Portra, Sepia, vb.);
• her pikselin o paletteki en yakın rengine geri yükleyin;
• etkileşimli bir kaydırıcı ile önce ve sonra karşılaştırın;
• sonucu kaydedin;
• veya kendi paletinizi sıfırdan oluşturun.
• herhangi bir görüntü yükleyin;
• bir palet seçin (ColorChecker, Portra, Sepia, vb.);
• her pikseli o paletteki en yakın renge dönüştürür;
• interaktif bir kaydırıcı ile önce & sonra karşılaştırın;
Sonuçları kaydedin
• veya kendi paletinizi sıfırdan oluşturun.




Dünyada nasıl çalışır

Kodda Nasıl Çalışır





Bizim uygulamamız tamamen tarayıcıda React ve Canvas API kullanılarak çalışıyor. projenin adı CinePalette olacak ve GitHub'da açık kaynaklı olacak.

React ile ilgili yorumlarCanvas API Kullanım KılavuzuCinePalette için yorumlar




Bir dizi önceden tanımlanmış paletle başlayabiliriz, ancak kullanıcılar kendi paletleri oluşturabilir ve kaydedebilirler. Paletler RGB değerlerinin aralığı olarak tanımlanır - örneğin, Kodak Portra 400 paletinin nasıl göründüğünü görüyorsunuz:

Kodak Portra 400 Ürün Özellikleri

"Portra 400": [ [75, 60, 50], // gölgeler [160, 130, 110], // cilt tonları [220, 200, 180], // vurgulamalar [60, 100, 80], // folyo [180, 150, 100] // tarafsız ], 

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




Seçilen palet, nihai görüntüde hangi renklerin “geçilmesine izin verilmesi” gerektiğini belirler.

Bu renkler çerçeveyi görsel dil olarak tanımlar.







Bir kullanıcı bir görüntü yükler ve bir palet seçerken, kapağın altında neler olur:

1. Resim gizli bir <canvas>'a dönüştürülür - bu bize verileri manipüle etmek için piksel düzeyinde erişim sağlar.
2. Biz ImageData nesnesi, her pikselin dört değerle temsil edildiği bir aralığı içerir.
3. Biz her piksel aracılığıyla her piksel
, RGB rengini çıkarıyoruz.
• Her piksel için, seçilen paletten en yakın eşleşen renk buluruz, RGB alanında Euclid mesafesini kullanırız - ve değiştiririz.
• Resim gizli bir <canvas> olarak gösterilir - bu da verileri manipüle etmek için piksel düzeyinde erişim sağlar.
Resim gizli bir hale getirilir <canvas>
• Her pikselin dört değerle temsil edildiği bir tabaka içeren ImageData nesnesi'ı çıkarırız: [R, G, B, A].
ImageData nesnesini çıkarıyoruz
• Biz her pikselin içinden geçiyoruz, RGB rengini çıkarıyoruz.
We loop through every pixel Her pikselin içinden geçiyoruz
• Her piksel için, RGB alanında Euclid mesafesini kullanarak seçilen paletten en yakın eşleşen renkleri bulur ve değiştiririz.
Her piksel için, seçilen paletten en yakın eşleşen renk buluruz




Bir Shirley kartı yükleyin ve farklı paletleri uygulayın - palet seçimi resmin nasıl şekillendiğini hemen göreceksiniz.








Bilinç büyüsü, her bireysel piksel 'ı analiz eden ve seçilen paletten en yakın eşleşen renk'ı bulan bir işlevi içerir:

her bireysel pikselen yakın eşleşen renk

const findClosestColor = (r, g, b) => { let minDist = Infinity; let closest = [r, g, b]; için (let [pr, pg, pb] palet) { const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); eğer (dist < minDist) {minDist = dist; closest = [pr, pg, pb]; } geri en yakın; }; 

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; };




Sonra, ImageData'da pikselin orijinal rengini paletteki en yakın eşleşme ile değiştiririz.

Resimdeki her bir piksel için bunu tekrar ederiz.




her bir piksel için

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; }




Tüm piksellerin işlenmesinden sonra, sonucu <canvas>'ye geri döndürüyoruz ve .toDataURL() kullanarak bir görüntüye dönüştürüyoruz. sonuçları tarayıcıda anında görebilirsiniz




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

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




Burada, RGB alanında Euclidean mesafesini kullanıyoruz - iki renkin ne kadar yakın olduğunu ölçmek için klasik bir yöntem:

RGB alanında Euclid mesafesi

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);




Burada (r, g, b) mevcut piksel rengidir ve (pr, pg, pb) paletdeki renklerden biridir. hesaplanan tüm mesafelerden en küçükini seçiyoruz - seçilen palet içinde en yakın görsel eşleşme.

en yakın görsel maç




Bu yaklaşım sezgisel ve uygulanması kolaydır, ancak sınırlamaları vardır: RGB alanı aslında insanların renk algılamasının nasıl olduğunu anlamaz - örneğin, yeşil ile mavi arasında daha duyarlıyız ve parlaklık farklılıkları yanıltıcı olabilir.

RGB alanı, insanların gerçekte renk algılaması hakkında bilgi vermez





Bu yaklaşımı CinePalette'da, renk haritasının temel ilkesini göstermek için basit ve erişilebilir bir yol olarak kullanıyoruz. Bununla birlikte, mevcut biçiminde bile, bazı renklerin beklenmedik veya "dışarı" hissettiren şekillerde değiştirildiğini fark edebilirsiniz.

CinePalette için yorumlar




Gelecekteki sürümlerde, RGB ve CIELAB renk aralıkları arasında bir geçiş eklemeyi planlıyoruz - kullanıcıların farklı modellerin renk eşleşmesinin doğruluğunu nasıl etkilediğini karşılaştırmalarını sağlar.

RGB ve CIELAB

Neden bu önemli?

Neden Bu Önemli?

CinePalette, renk derecelendirmesinde temel ama temel bir adım sunar: palet kısıtlaması. Her görsel tarzın başladığı yer burasıdır: “Bu renkleri kullanırsak ne olur?”

palet kısıtlaması “Eğer sadece bu renkleri kullansaydık ne olurdu?”




Bir Portra paleti sıcak, nostaljik tonlar getirir. Pro 400 serin ve hafif hissediyor. Teal & Orange yüksek kontrastlı sinema puçları sağlar. Dehancer veya Resolve gibi araçlar aksine, CinePalette film fiziklerini simüle etmez. Ama özü yakalar: color stil ve hikaye anlatımı için bir araçtır.

color stil ve hikaye anlatımı için bir araçtır.








Sonraki Ne Olur?

Sonraki İçerikBugün Ne Olur? / What’s Next?

Bu sadece başlangıç. serinin sonraki bölümlerinde:

• bir referans görüntüden bir palet seçme yeteneği ile CinePalette'ı genişleteceğiz;
• herhangi bir çerçeve veya fotoğraftan renk şemalarının otomatik çıkarılması ekleyeceğiz;
• RGB ve LAB arasındaki bir geçişin daha algısal olarak doğru bir eşleşme için uygulanması;
• ve renk uyumunun nasıl çalıştığını ve gerçek dünyada sınıflandırmada nasıl kullanabileceğinizi açıklayacağız.
• bir referans görüntüsünden bir palet seçme yeteneği ile CinePalette genişleteceğiz;
CinePalette için yorumlar
• herhangi bir çerçeve veya fotoğraftan renk şemalarının otomatik çıkarılması;
• daha hassas algılama için RGB ve LAB arasında bir geçiş yapar;
RGB ve LAB
• ve renk harmoni nasıl çalışır - ve gerçek dünyada sınıflandırmada nasıl kullanabilirsiniz.
renk harmoni




Dönüşte kalın - ve sadece renk öğrenmeye değil, gerçekten see onu hazırlayın.

Dönüşte kalın - ve sadece renk öğrenmeye değil, gerçekten see onu hazırlayın.örneğin