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

Waarom maakt een film de huid zacht en warm?

Waarom maakt de film de huid zacht en 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 film – 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. Maar om deze taal vloeiend te spreken, moet je eerst de grammatica begrijpen.

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

Spoiler: het begint niet met LUT's of filters. Het begint met kleurdoelstellingen, kalibratie en zorgvuldig geselecteerde paletten.

In deze serie zullen we onderzoeken:

• wat is kleurrating op het meest fundamentele niveau;
• waarom het beperken van je palet een functie is, geen bug;
• hoe kleurdiagrammen werken (en waarom ze belangrijk zijn);
• en hoe je je eigen ratingtool in de browser kunt bouwen - met React en wat eenvoudige wiskunde.
  
• wat is de kleurbeoordeling op het meest fundamentele niveau;
• waarom het beperken van je palet een functie is, geen bug;
• hoe kleurdiagrammen werken (en waarom ze van belang zijn);
• en hoe je je eigen classificatietool in de browser kunt bouwen - met React en wat eenvoudige wiskunde.
  
‘br’

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 echt zie wat kleur classificatie is gemaakt van.

We zullen het niet alleen uitleggen, we zullen het laten zien.zie

Wat is kleurgraden en waarom beginnen met kleurdoelstellingen?

Wat is kleurrating en waarom beginnen met kleurdoelstellingen?

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




• balansering van blootstelling en wit punt;
• correctie van technische kleurverschuivingen;
• ontwerpen van een visuele stijl met contrast, tonen en kleurcurven.
• balans van blootstelling en wit punt;
• correctie van technische kleurverschuivingen;
• maken van een visuele stijl met contrast, tonen en kleurcurven.




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 een neutrale toestand brengen, wat betekent:

neutrale staat




• correctie van ongewenste kleuren (kleurcorrectie);

• normalisatie van de opname naar een standaardkleurruimte (zoals Rec.709 of sRGB);

• matching materiaal van verschillende camera's in een consistente baseline.

  
  

• correctie van ongewenste kleuren (kleurcorrectie);

correctie van ongewenste kleuren (kleurcorrectie);

• normaliseren van de opname naar een standaardkleurruimte (zoals Rec.709 of sRGB);

normaliseren van de opname naar een standaardkleurruimte (zoals Rec.709 of sRGB);

• matching materiaal van verschillende camera's tot een consistente baseline.

  
  

matching materiaal van verschillende camera's tot een consistente baseline.




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


kleurdoelstellingenColorCheckerChromaDuMonde‘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.

nauwkeurig gemeten waardenKonica 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 ColorCheckerX-Rite ColorChecker




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.











Elke patch wordt gemeten onder gestandaardiseerde verlichting (meestal D65 of D50), met resultaten opgenomen in CIE XYZ coördinaten – een apparaat-onafhankelijk kleurmodel.D65D50CIE XYZ coördinatenRGB waarden sRGB Rec.709AdobeRGB




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







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

Als uw opname iets anders laat zien, is dat een teken van een kleur cast - en een uitgangspunt voor correctie.







The Catch: Kleurdiagrammen zijn pas het begin

The Catch: Kleurdiagrammen zijn pas het begin

Kleurdoelstellingen zijn essentieel voor kalibratie - maar dat is alles wat ze zijn. Een begin. Ze rekenen niet op:

Een begin.
• hoe kleuren zich gedragen in hoogtepunten of schaduwen;
• de unieke kenmerken van filmmateriaal of lenzen;
• of de creatieve intentie achter een bepaalde look.
• hoe kleuren zich gedragen in highlights of schaduwen;
• de unieke kenmerken van filmmateriaal of lenzen;
• of de creatieve intentie achter een bepaalde blik.




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 ResolveDehancerDehancereen grafiek is een kalibratietool - geen stijl.

CinePalette: een minimale tool voor het verkennen van kleurpaletten

CinePalette: een minimale tool voor het verkennen van kleurpaletten

Om te laten zien hoe het kiezen van een palet een afbeelding beïnvloedt, hebben we CinePalette gebouwd - een eenvoudige webapp die visualisert wat er gebeurt wanneer u uw kleurruimte beperkt (een proces dat bekend staat als paletreductie).

CinePalettepalet vermindering




Wat kun je doen met CinePalette:

Wat je kunt doen met CinePalette:
• upload elke afbeelding;
• pick een palette (ColorChecker, Portra, Sepia, etc.);
• remap elke pixel naar de dichtstbijzijnde kleur in dat palet;
• vergelijk voor & na met een interactieve slider;
• opslaan van het resultaat;
• bouwen uw eigen palet vanaf nul.
• upload een afbeelding;
• pick een palet (ColorChecker, Portra, Sepia, etc.);
• remap elke pixel naar de dichtstbijzijnde kleur in dat palet;
• vergelijk voor & na met een interactieve slider;
• save het resultaat;
• of bouw je eigen palet vanaf nul.




Hoe het werkt in Code

Hoe het werkt in code





Onze app loopt volledig in de browser met behulp van React en de Canvas API. Het project - genaamd CinePalette - zal open-source zijn en beschikbaar zijn op GitHub (link aan het einde van de serie).

Reactie Canvas APICinePalette




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

"Portra 400": [ [75, 60, 50], // schaduwen [160, 130, 110], // huidtonen [220, 200, 180], // hoogtepunten [60, 100, 80], // bladeren [180, 150, 100] // neutraal ], 

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

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




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








De kern van de magie ligt in een functie die elk afzonderlijk pixel analyseert en de dichtst bij elkaar overeenkomende kleur vindt uit het geselecteerde palet:

elke afzonderlijke pixelde dichtst bij elkaar overeenkomende kleur

const findClosestColor = (r, g, b) => { laat minDist = Infinity; laat dichtst = [r, g, b]; voor (let [pr, pg, pb]) { const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); als (dist < minDist) { minDist = dist; dichtst = [pr, pg, pb]; } terugkeer dichtst; }; 

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




Vervolgens vervangen we de oorspronkelijke kleur van de pixel in de ImageData door de dichtstbijzijnde match uit de palet. voor elke pixel

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




Zodra alle pixels zijn verwerkt, renderen we het resultaat terug op de <canvas> en converteren het naar een afbeelding met behulp van .toDataURL(). zie het resultaat direct in de browser




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

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




Hier gebruiken we Euclidean afstand in RGB ruimte - een klassieke methode om te meten hoe "dicht" twee kleuren zijn:

Euclidische afstand in RGB ruimte

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




Hier, (r, g, b) is de kleur van de huidige pixel, en (pr, pg, pb) is een van de kleuren in het palet.de dichtstbijzijnde visuele match




Deze benadering is intuïtief en gemakkelijk te implementeren, maar het heeft beperkingen: RGB-ruimte geeft geen rekening met hoe mensen eigenlijk kleuren waarnemen - we zijn bijvoorbeeld gevoeliger voor groen dan voor blauw, en helderheidsverschillen kunnen misleidend zijn.

RGB-ruimte houdt niet rekening met hoe mensen eigenlijk kleuren waarnemen





We gebruiken deze benadering in CinePalette als een eenvoudige en toegankelijke manier om het basisprincipe van kleurmapping te demonstreren.CinePalette




In toekomstige versies zijn we van plan om een schakeling tussen RGB en CIELAB kleurruimtes toe te voegen - zodat gebruikers kunnen vergelijken hoe verschillende modellen de nauwkeurigheid van kleurmatching beïnvloeden.

RGB en CIELAB

Waarom is dit belangrijk?

Waarom is dit belangrijk?

CinePalette toont een fundamentele maar fundamentele stap in de kleurenbeoordeling: palet beperking. Hier begint elke visuele stijl - met de vraag: "Wat als we alleen deze kleuren zouden gebruiken?

palet beperking “Wat als we alleen deze kleuren zouden gebruiken?”




Een Portra-palet brengt warme, nostalgische tonen met zich mee. Pro 400 voelt cool en subdued. Teal & Orange levert filmische punch met een hoog contrast. In tegenstelling tot gereedschappen zoals Dehancer of Resolve, simuleert CinePalette niet de fysica van de film. Maar het vangt de essentie: color is een tool voor stijl en storytelling.

color is een tool voor stijl en storytelling.








Wat is het volgende?

Wat is het volgende?

Dit is nog maar het begin.In de volgende delen van de serie:

• we zullen de CinePalette uitbreiden met de mogelijkheid om een palet uit een referentiebeeld te selecteren;
• voegt automatische extractie van kleurenschema's uit een frame of foto toe;
• voert een schakeling in tussen RGB en LAB voor meer perceptueel nauwkeurige matches;
• en breekt af hoe kleurharmonie werkt - en hoe je het kunt gebruiken in real-world grading.
• we zullen de CinePalette uitbreiden met de mogelijkheid om een palet uit een referentiebeeld te kiezen;
CinePalette
• add automatische extractie van kleurenschema's uit elk frame of foto;
• introduceert een schakeling tussen RGB en LAB voor meer perceptueel nauwkeurige matching;
RGB en LAB
• en hoe kleurharmonie werkt - en hoe je het kunt gebruiken in real-world classificatie.
kleur harmonie




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

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