Deze eenvoudige app laat je zien hoe Hollywood kleuren gebruikt om je emoties te verwarren

De

Waarom voelt Joker zich zo verontrustend groen en geel?

De

Why does Joker feel so unsettlingly green and yellow?

De

Waarom is Blade Runner ondergedompeld in teal en oranje?

De

Why is Blade Runner soaked in teal and orange?

De

Waarom maakt film de huid er zacht en warm uitzien?

De

Why does film make skin look soft and warm?

Het is geen magie, het is kleur.

En wie de kleur beheerst – beheerst het emotionele gewicht van het frame. Kleurbeoordeling is de visuele taal van de bioscoop – een manier om de sfeer te vormen, de aandacht van de kijker te leiden en de toon van een verhaal te bepalen. Het kan subtiel en bijna onzichtbaar zijn. Of gedurfd en gestileerd, zoals in het werk van Wong Kar-Wai, Fincher, Nolan of Villeneuve.

Waar begint kleurwerk eigenlijk? hoe weten we wat de “juiste” kleur is? en hoe vertaal je creatieve intentie in technische actie?

Spoiler: het begint niet met LUTs of filters.Het begint met kleurdoelen, kalibratie en zorgvuldig geselecteerde paletten. .

In deze serie verkennen we:

De
• welke kleurbeoordeling op het meest fundamentele niveau is;
De
• Waarom het beperken van uw palet een functie is, geen bug;
De
• Hoe kleurdiagrammen werken (en waarom ze van belang zijn);
De
• en hoe je je eigen classificatietool in de browser kunt bouwen – met React en wat eenvoudige wiskunde.
De

We zullen het niet alleen uitleggen, we zullen het laten zien.En je zult in staat zijn om te experimenteren, tinker, en misschien voor de eerste keer echtseevan welke kleur is gemaakt.

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

Kleurbeoordeling is het proces van het aanpassen en styliseren van een afbeelding om een specifieke visuele toon, emotioneel effect of technische standaard te bereiken.

De
• balans van blootstelling en witte punt;
De
• correctie van technische kleurverschuivingen;
De
• het maken van een visuele stijl met contrast, tonen en kleurkurven.
De

Maar beoordelen gaat niet alleen over "het mooi maken." Het gaat om controle - van de stemming, van de focus van de kijker, van de visuele taal van het hele verhaal.

Voordat u een creatieve look toepast, moet u de afbeelding naar eenneutral state, wat betekent:

De
• het corrigeren van ongewenste kleuren (kleurcorrectie);
De
• normalisatie van de opname naar een standaardkleurruimte (zoals Rec.709 of sRGB);
De
• het matchen van materiaal van verschillende camera's in een consistente baseline.
De

En daarvoor gebruiken kleurenaarscolor targetsZoals de *Colorchecker- hetChromaTijd,** of andere referentiekaartjes.

Een kleurdoel is een grafiek van kleurpatches metPrecies gemeten waardenDeze waarden zijn niet willekeurig - ze worden verkregen door middel van spectrofotometrische metingen in gecontroleerde omgevingen met behulp van professionele apparatuur zoals X-Rite ofKonica Minolta spectrofotometers.

Een van de eerste doelstellingen die algemeen werd aangenomen, was deDe Kodak Gray Scale- een strip van neutrale grijze tinten gebruikt voor blootstelling controle. Later kwamen meer geavanceerde grafieken met full-color patches - zoals deMacbeth ColorChecker, ingevoerd in 1976 (nu bekend alsX-Rite ColorCheckerHet beschikt over 24 kleurswitten die zijn ontworpen om gemeenschappelijke echte kleuren te vertegenwoordigen: menselijke huid, blauwe hemel, groene bladeren en meer.

Met de opkomst van digitale fotografie en digitale bioscoop werden kleurdoelen nog kritischer. ze zijn nu essentiële hulpmiddelen voor het kalibreren van niet alleen camera's, maar ook monitors, printers, scanners - en elk apparaat dat met kleur omgaat. ze worden gebruikt in kleurmatching, profilering en neutrale balancering workflows - van filmproductie tot wetenschappelijke beeldvorming.

Neem bijvoorbeeld de ColorChecker van X-Rite.Elke patch wordt gemeten onder gestandaardiseerde verlichting (meestalD65ofD50Met de resultaten die zijn vastgelegd inCIE XYZ coordinates- een apparaatonafhankelijk kleurmodel. Deze coördinaten worden vervolgens omgezet inRGB valuesafhankelijk van uw werkomgeving (zoalssRGB- hetRec.709, ofAdobeRGB) van

Dus de RGB-array's die we in onze app gebruiken, zijn geen gissingen - ze zijn nauwkeurige digitale representaties van gestandaardiseerde, fysiek gemeten patches.

Als de huidtone patch in de ColorChecker Classic is gedefinieerd als [194, 150, 130] in RGB, is dat hoe het moet zien onder de juiste omstandigheden.

The Catch: Color Charts Are Just the Beginning

Kleurdoelen zijn essentieel voor kalibratie, maar dat is alles.Een begin .Zij rekenen niet op:

De
• hoe kleuren zich gedragen in highlights of schaduwen;
De
• de unieke kenmerken van de film of lenzen;
De
• of de creatieve intentie achter een specifieke blik.
De

Met professionele tools zoalsDaVinci opgelostofDehancer, kleurdiagrammen zijn slechts een stap in een lange pijplijn. Vanaf daar ga je over naar geavanceerde processen zoals filmemulatie, tonemaping, graan, halatie, bloei en andere stylistische transformaties.a chart is a calibration tool — not a style.

CinePalette: A Minimal Tool for Exploring Color Palettes

Om te laten zien hoe het kiezen van een palet een afbeelding beïnvloedt, hebben weCinePaletteEen eenvoudige webapp die visualiseren wat er gebeurt wanneer u uw kleurruimte beperkt (een proces dat bekend staat alsPalet vermindering) van

What You Can Do with CinePalette:

De
• uploaden van een afbeelding;
De
• kies een palet (ColorChecker, Portra, Sepia, enz.);
De
• elke pixel naar de dichtstbijzijnde kleur in dat palet;
De
• vergelijk voor en na met een interactieve slider;
De
• het resultaat opslaan;
De
• Of bouw je eigen palet vanaf het niets.
De

How It Works in Code

Onze app werkt volledig in de browser met behulp vanReactEn deCanvas APIHet project - genoemdCinePalette— zal open source zijn en beschikbaar zijn op GitHub (link aan het einde van de serie).

We beginnen met een reeks vooraf gedefinieerde pallets, maar gebruikers kunnen ook hun eigen pallets bouwen en opslaan.Kodak Portra 400Palette ziet eruit als:

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

De geselecteerde palet definieert welke kleuren "toelaatbaar" zijn om te verschijnen in de uiteindelijke afbeelding.

Wanneer een gebruiker een afbeelding uploadt en een palet kiest, is hier wat er gebeurt onder de hoed:

De
1. De afbeelding wordt weergegeven naar een verborgen <canvas> - dit geeft ons pixel-niveau toegang om de gegevens te manipuleren.
De
2. We extraheren het ImageData-object, dat een matrix bevat waar elk pixel wordt vertegenwoordigd door vier waarden: [R, G, B, A].
De
3. We schuiven door elke pixel, extraheren de RGB-kleur.
De
4. Voor elke pixel vinden we de dichtst bij elkaar overeenkomende kleur uit het geselecteerde palet, met behulp van de Euclidische afstand in RGB-ruimte - en vervangen deze.
De

Laten we een Shirley-kaart laden en proberen verschillende pallets toe te passen - je zult meteen zien hoe de palletkeuze het beeld vormgeeft.

De kern van de magie ligt in een functie dieeach individual pixelEn vindt declosest matching colorvan de geselecteerde palet:

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

Then, we replace the pixel’s original color in the ImageData with the closest match from the palette. And we repeat this — for every single pixelIn het beeld.

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

Nadat alle pixels zijn verwerkt, geven we het resultaat terug naar de <canvas> en converteren we het naar een afbeelding met behulp van .toDataURL().see the result instantly in the browser- en download de gefilterde afbeelding met één klik.

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

Hier gebruiken weEuclidean distance in RGB space- een klassieke methode om te meten hoe "dicht" twee kleuren zijn:

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

Hier (r, g, b) is de kleur van de huidige pixel, en (pr, pg, pb) is een van de kleuren in het palet.closest visual matchbinnen de geselecteerde palet.

Deze aanpak is intuïtief en gemakkelijk te implementeren, maar het heeft beperkingen:RGB-ruimte houdt niet rekening met hoe mensen eigenlijk kleuren waarnemenWe zijn bijvoorbeeld gevoeliger voor groen dan voor blauw, en verschillen in helderheid kunnen misleidend zijn.

Wij gebruiken deze aanpak inCinePaletteAls een eenvoudige en toegankelijke manier om het basisprincipe van kleurmapping te demonstreren.Echter, zelfs in zijn huidige vorm, kunt u merken dat sommige kleuren worden vervangen op manieren die onverwacht of "uit" voelen.

In toekomstige versies zijn we van plan een verschuiving tussenRGB and CIELABKleurruimtes – waarmee gebruikers kunnen vergelijken hoe verschillende modellen de nauwkeurigheid van kleurmatching beïnvloeden.

Why Does This Matter?

CinePalette toont een basis, maar fundamentele stap in de kleur rangschikking:palette restrictionDit is waar elke visuele stijl begint – met de vraag:“What if we only used these colors?”.

Een Portra-palet brengt warme, nostalgische tonen met zich mee. Pro 400 voelt koel en subdued. Teal & Orange levert een hoogcontrast filmpunch. In tegenstelling tot gereedschappen zoals Dehancer of Resolve simuleert CinePalette niet de fysica van de film.Kleur is een instrument voor stijl en verhalen vertellen.

What’s Next?

Dit is nog maar het begin, in de volgende delen van de serie:

• we’ll expand CinePalette with the ability to pick a palette from a reference image;
De
• toevoegen automatische extractie van kleurenschema's uit elk frame of foto;
De
• introduceert een schakeling tussen RGB en LAB voor een meer perceptueel nauwkeurige matching;
De
• en hoe kleurharmonie werkt - en hoe je het kunt gebruiken in real-world classificatie.
De

Blijf ingesteld - en maak je klaar om niet alleen kleur te leren, maar het echt te zien.