Diese einfache App lässt Sie sehen, wie Hollywood Farbe verwendet, um mit Ihren Emotionen zu verwechseln

Warum ist Blade Runner in Teal und Orange eingetaucht?

Warum ist Blade Runner in Teal und Orange eingetaucht?

Warum macht der Film die Haut weich und warm aussehen?

Warum macht der Film die Haut weich und warm aussehen?

Es ist keine Magie. Es ist Farbe.

Und wer die Farbe kontrolliert – kontrolliert das emotionale Gewicht des Rahmens. Die Farbbewertung ist die visuelle Sprache des Kinos – eine Möglichkeit, die Atmosphäre zu gestalten, die Aufmerksamkeit des Betrachters zu lenken und den Ton einer Geschichte festzulegen. Es kann subtil und fast unsichtbar sein. oder mutig und gestylt, wie in den Werken von Wong Kar-Wai, Fincher, Nolan oder Villeneuve.

Wo beginnt die Farbarbeit eigentlich?Wie wissen wir, was die „richtige“ Farbe überhaupt ist?Und wie übersetzen Sie kreative Absichten in technische Aktionen?

Spoiler: Es beginnt nicht mit LUTs oder Filtern. Es beginnt mit Farbzielen, Kalibrierung und sorgfältig ausgewählten Paletten.

In dieser Serie werden wir untersuchen:

• was ist die Farbbewertung auf der grundlegendsten Ebene;
• why limiting your palette is a feature, not a bug;
• how color charts work (and why they matter);
• and how to build your own grading tool in the browser — with React and some simple math.
  
• was ist die Farbbewertung auf der grundlegendsten Ebene;
• warum die Beschränkung Ihrer Palette ein Feature ist, kein Bug;
• wie Farbdiagramme funktionieren (und warum sie von Bedeutung sind);
• und wie Sie Ihr eigenes Einstufungswerkzeug im Browser erstellen – mit React und ein paar einfachen Mathematiken.
  
»br«

Wir werden es nicht nur erklären.Wir werden es zeigen. Und Sie werden in der Lage sein, zu experimentieren, tinker, und vielleicht zum ersten Mal tatsächlich siehe, was Farbbewertung besteht aus.

Wir werden es nicht nur erklären, wir werden es zeigen.siehe auch

Was ist Farbgradierung und warum mit Farbzielen anfangen?

Was ist Farbgradierung und warum mit Farbzielen anfangen?

Farbbewertung ist der Prozess der Anpassung und Stilisierung eines Bildes, um einen spezifischen visuellen Ton, emotionalen Effekt oder technischen Standard zu erreichen.




• ausgleichende Exposition und weißer Punkt;
• korrigierende technische Farbschwankungen;
• ein visueller Stil mit Kontrast, Tönen und Farbkurven.
• ausgleichende Exposition und weißer Punkt;
• korrektur technischer Farbwechsel;
• Entwerfen eines visuellen Stils mit Kontrast, Tönen und Farbkurven.




Aber Bewertung geht nicht nur darum, es schön zu machen.

Es geht um die Kontrolle – von der Stimmung, vom Fokus des Betrachters, von der visuellen Sprache der gesamten Erzählung.








Bevor Sie einen kreativen Look anwenden, müssen Sie das Bild in einen neutralen Zustand bringen, was bedeutet:

neutraler Staat




• korrigiert unerwünschte Farbabstände (Farbkorrektur);

• normalisiert das Bild in einen Standardfarbraum (wie Rec.709 oder sRGB);

• matches Material aus verschiedenen Kameras in eine konsistente Ausgangslinie.

  
  

• korrigieren von unerwünschten Farbguss (Farbkorrektur);

korrigieren unerwünschter Farbguss (Farbkorrektur);

• normalisieren der Aufnahme zu einem Standard-Farbraum (wie Rec.709 oder sRGB);

Normalisierung der Aufnahmen auf einen Standardfarbraum (wie Rec.709 oder sRGB);

• Matchmaterial aus verschiedenen Kameras in eine konsistente Ausgangslinie.

  
  

Matchmaterial aus verschiedenen Kameras in eine konsistente Ausgangslinie.




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


FarbzieleColorCheckerChromaDuMonde»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.

Genau gemessene WerteKonica 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 Einfach auswählen




Mit dem Aufstieg der digitalen Fotografie und des digitalen Kinos wurden Farbziele noch kritischer.Sie sind jetzt wichtige Werkzeuge für die Kalibrierung nicht nur von Kameras, sondern auch von Monitoren, Druckern, Scannern – und jedem Gerät, das mit Farbe umgeht.











Jeder Patch wird unter standardisierter Beleuchtung gemessen (in der Regel D65 oder D50), wobei die Ergebnisse in CIE XYZ-Koordinaten aufgezeichnet sind – ein geräteunabhängiges Farbmodell.D65 Auf der SeiteD50 AufnahmeCIE XYZ KoordinatenRGB WertesRGB und Rec.709AdobeRGB




So sind die RGB-Arrays, die wir in unserer App verwenden, keine Vermutung – sie sind präzise digitale Repräsentationen von standardisierten, physisch gemessenen Patches.




Wenn der Hautton-Patch im ColorChecker Classic in RGB als [194, 150, 130] definiert ist, sollte er unter den richtigen Bedingungen so aussehen.

Wenn Ihre Aufnahmen etwas anderes zeigen, ist dies ein Zeichen eines Farbgusses – und ein Ausgangspunkt für die Korrektur.







The Catch: Farbdiagramme sind erst der Anfang

The Catch: Color Charts sind erst der Anfang

Farbziele sind für die Kalibrierung unerlässlich – aber das ist alles. Ein Anfang. Sie berücksichtigen nicht:

Ein Anfang.
• wie sich Farben in Highlights oder Schatten verhalten;
• die einzigartigen Eigenschaften von Filmmaterial oder Linsen;
• oder die kreative Absicht hinter einem bestimmten Look.
• wie sich Farben in Highlights oder Schatten verhalten;
• die einzigartigen Eigenschaften des Filmbestands oder der Linsen;
• oder die kreative Absicht hinter einem bestimmten Blick.




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 ResolveDehancerDehancerEin Diagramm ist ein Kalibrierwerkzeug – kein Stil.

CinePalette: Ein minimales Werkzeug zur Erkundung von Farbpaletten

CinePalette: Ein minimales Werkzeug zur Erkundung von Farbpaletten

Um zu zeigen, wie sich die Auswahl einer Palette auf ein Bild auswirkt, haben wir CinePalette erstellt – eine einfache Web-App, die visualisiert, was passiert, wenn Sie Ihren Farbraum einschränken (ein Prozess, der als palette reduction bekannt ist).

CinePalettePalettenreduzierung




Was Sie mit CinePalette tun können:

Was Sie mit CinePalette tun können:
• laden Sie jedes Bild;
• wählen Sie eine Palette (ColorChecker, Portra, Sepia, etc.);
• remap jedes Pixel auf die nächste Farbe in dieser Palette;
• vergleichen Sie vor und nach mit einem interaktiven Schieber;
• speichern Sie das Ergebnis;
• bauen Sie Ihre eigene Palette von Grund auf.
• Aufladen eines beliebigen Bildes;
• wählen Sie eine Palette (ColorChecker, Portra, Sepia usw.);
• Remap jedes Pixel auf die nächste Farbe in dieser Palette;
• vergleichen vor & nach mit einem interaktiven Schieberegler;
• save das Ergebnis;
• oder bauen Sie Ihre eigene Palette von Grund auf.




Wie es in Code funktioniert

Wie es in Code funktioniert





Unsere App läuft vollständig im Browser unter Verwendung von React und der Canvas API. Das Projekt - genannt CinePalette - wird Open-Source sein und auf GitHub verfügbar sein (Link am Ende der Serie).

Reagieren Canvas API AuflösungCinePalette




Wir beginnen mit einer Reihe von vordefinierten Paletten, aber Benutzer können auch ihre eigenen erstellen und speichern. Paletten werden als Array von RGB-Werten definiert – zum Beispiel ist hier, wie die Kodak Portra 400 Palette aussieht:

Kodak Portra 400

"Portra 400": [ [75, 60, 50], // Schatten [160, 130, 110], // Hauttönen [220, 200, 180], // Highlights [60, 100, 80], // Blätter [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 ],




Die ausgewählte Palette definiert, welche Farben im endgültigen Bild „erlaubt“ sind.




Wenn ein Benutzer ein Bild hochlädt und eine Palette auswählt, ist hier, was unter der Kappe passiert:

1. Das Bild wird in einen versteckten <canvas> abgebildet – dies gibt uns Pixel-Ebene-Zugriff, um die Daten zu manipulieren.
2. Wir extrahieren das ImageData-Objekt, das eine Reihe enthält, in der jeder Pixel durch vier Werte repräsentiert wird: [R, G, B, A].
3. Wir durchlaufen jeden Pixel, extrahieren seine RGB-Farbe.
4. Für jeden Pixel finden wir die am nächsten passende Farbe aus der ausgewählten Palette, wobei die Euclidische Entfernung im RGB-Raum verwendet wird – und ersetzen Sie ihn.
5. Das Bild wird in einen versteckten <canvas> abgebildet – dies gibt uns Pixel-Ebene-Zugriff, um die Daten zu manipulieren.
Das Bild wird zu einem versteckten <canvas>
6. Wir extrahieren das ImageData-Objekt, das eine Array enthält, in der jeder Pixel durch vier Werte dargestellt wird: [R, G, B, A].
Wir extrahieren das ImageData-Objekt
7. Wir durchlaufen jeden Pixel und extrahieren seine RGB-Farbe.
Wir durchlaufen jeden Pixel
8. Für jeden Pixel finden wir die am nächsten übereinstimmende Farbe aus der ausgewählten Palette und ersetzen sie mithilfe der euclidischen Distanz im RGB-Raum.
Für jeden Pixel finden wir die am nächsten übereinstimmende Farbe aus der ausgewählten Palette




Lassen Sie uns eine Shirley-Karte hochladen und versuchen, verschiedene Paletten anzuwenden - Sie werden sofort sehen, wie die Palettewahl das Bild formt.








Der Kern der Magie liegt in einer Funktion, die jeden einzelnen Pixel analysiert und aus der ausgewählten Palette die nächst passende Farbe findet:

für jeden einzelnen Pixelnächste übereinstimmende Farbe

const findClosestColor = (r, g, b) => { let minDist = Infinity; let closest = [r, g, b]; für (let [pr, pg, pb] der Palette) { const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); wenn (dist < minDist) { minDist = dist; closest = [pr, pg, pb]; } zurückkehren näher; }; 

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




Dann ersetzen wir die ursprüngliche Farbe des Pixels in der ImageData durch die nächste Übereinstimmung aus der Palette. für jeden einzelnen Pixel

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




Nachdem alle Pixel verarbeitet wurden, zeichnen wir das Ergebnis zurück auf den <canvas> und konvertieren es in ein Bild mithilfe von .toDataURL(). Dies ermöglicht es dem Benutzer, das Ergebnis sofort im Browser zu sehen

– und das gefilterte Bild mit einem einzigen Klick herunterzuladen.




siehe das Ergebnis sofort im Browser




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

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




Hier verwenden wir Euclid-Distanz im RGB-Raum – eine klassische Methode, um zu messen, wie „nah“ zwei Farben sind:

Euklidische Entfernung im RGB-Raum

konst 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 ist (r, g, b) die Farbe des aktuellen Pixels, und (pr, pg, pb) ist eine der Farben in der Palette. Von allen berechneten Entfernungen wählen wir die kleinste – die nächste visuelle Übereinstimmung

innerhalb der ausgewählten Palette.




Nächste visuelle Übereinstimmung




Dieser Ansatz ist intuitiv und einfach zu implementieren, hat aber Einschränkungen: RGB-Raum berücksichtigt nicht, wie Menschen tatsächlich Farben wahrnehmen - zum Beispiel sind wir empfindlicher auf Grün als auf Blau, und Helligkeitsunterschiede können irreführend sein.

RGB-Raum berücksichtigt nicht, wie Menschen tatsächlich Farben wahrnehmen





Wir verwenden diesen Ansatz in CinePalette als eine einfache und zugängliche Möglichkeit, um das grundlegende Prinzip der Farbkartierung zu demonstrieren.CinePalette




In zukünftigen Versionen planen wir, einen Wechsel zwischen RGB und CIELAB Farbräumen hinzuzufügen - so dass Benutzer vergleichen können, wie verschiedene Modelle die Genauigkeit der Farbmatching beeinflussen.

RGB und CIELAB

Warum ist das so wichtig?

Warum ist das so wichtig?

CinePalette zeigt einen grundlegenden, aber grundlegenden Schritt in der Farbbewertung: Palettenbeschränkung. Hier beginnt jeder visuelle Stil – mit der Frage: „Was wäre, wenn wir nur diese Farben verwenden würden?“

Beschränkung der Palette „Was wäre, wenn wir nur diese Farben benutzen würden?“




Eine Portra-Palette bringt warme, nostalgische Töne mit sich. Pro 400 fühlt sich cool und unterdrückt an. Teal & Orange liefert hochkontrastigen filmischen Punch. Im Gegensatz zu Tools wie Dehancer oder Resolve simuliert CinePalette nicht die Physik des Films. Aber es fängt die Essenz: color ist ein Werkzeug für Stil und Geschichtenerzählung.

color ist ein Werkzeug für Stil und Storytelling.








Was ist das nächste?

Was ist als nächstes?

Dies ist nur der Anfang.In den nächsten Teilen der Serie:

• wir werden CinePalette mit der Möglichkeit erweitern, eine Palette aus einem Referenzbild zu wählen;
• fügt automatische Extraktion von Farbschemata aus jedem Rahmen oder Foto hinzu;
• einführen Sie einen Umstieg zwischen RGB und LAB für eine wahrnehmlich genaue Übereinstimmung;
• und brechen Sie ab, wie Farbharmonie funktioniert - und wie Sie es in der realen Klassifizierung verwenden können.
• wir erweitern CinePalette mit der Möglichkeit, eine Palette aus einem Referenzbild zu wählen;
CinePalette
• fügt automatische Extraktion von Farbschemata aus jedem Rahmen oder Foto hinzu;
• einführen einen Umstieg zwischen RGB und LAB für eine besser wahrnehmbare Übereinstimmung;
RGB und LAB
• und wie Farbharmonie funktioniert - und wie Sie es in der realen Klassifizierung verwenden können.
Farbe Harmonie




Bleiben Sie angepasst - und machen Sie sich bereit, nicht nur Farbe zu lernen, sondern wirklich siehe es.

Bleiben Sie angepasst - und machen Sie sich bereit, nicht nur Farbe zu lernen, sondern wirklich siehe es.siehe