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

ist

Warum fühlt sich der Joker so unruhig grün und gelb an?

ist

Why does Joker feel so unsettlingly green and yellow?

ist

Warum ist Blade Runner in Teal und Orange eingetaucht?

ist

Why is Blade Runner soaked in teal and orange?

ist

Warum macht der Film die Haut weich und warm?

ist

Why does film make skin look soft and warm?

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 Absicht in technische Aktion?

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

In dieser Serie werden wir erforschen:

ist
• welche Farbbewertung auf der grundlegendsten Ebene ist;
ist
• Warum die Beschränkung Ihrer Palette ein Feature ist, kein Bug;
ist
• Wie Farbdiagramme funktionieren (und warum sie wichtig sind);
ist
• und wie Sie Ihr eigenes Ranking-Tool im Browser erstellen – mit React und ein paar einfachen Mathematiken.
ist

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 wirklichseeAus welcher Farbe wird die Klassifizierung hergestellt.

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

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

ist
• Ausgleich von Belichtung und Weißpunkt;
ist
• Korrektur technischer Farbwechsel;
ist
• Erstellen eines visuellen Stils mit Kontrast, Tönen und Farbkurven.
ist

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 zu einemneutral state, was bedeutet:

ist
• Korrektur unerwünschter Farbschichten (Farbkorrektur)
ist
• Normalisierung der Aufnahmen auf einen Standardfarbraum (wie Rec.709 oder sRGB);
ist
• Materialien aus verschiedenen Kameras zu einer einheitlichen Baseline zu kombinieren.
ist

Zu diesem Zweck verwenden Farbencolor targetsSo wie die *ColorChecker, derChromaDuMonde,** oder andere Referenzdiagramme.

Ein Farbziel ist ein Diagramm von Farbpatches mitGenau gemessene WerteDiese Werte sind nicht willkürlich – sie werden durch spektrophotometrische Messungen in kontrollierten Umgebungen mit professioneller Ausrüstung wie X-Rite oderKonica Minolta spectrophotometers.

Eines der ersten weit verbreiteten Ziele war dieDer Kodak Gray Scale- ein Streifen von neutralen Grautönen, der zur Belichtungskontrolle verwendet wurde. Später kamen fortschrittlichere Charts mit vollfarbigen Patches - wie dieMacbeth ColorChecker1976 eingeführt (jetzt bekannt alsX-Rite ColorCheckerEs verfügt über 24 Farbschleifen, die die gemeinsamen Farben der realen Welt darstellen: menschliche Haut, blauer Himmel, grüne Blätter und mehr.

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.

Nehmen wir zum Beispiel den ColorChecker von X-Rite. Jeder Patch wird unter standardisierter Beleuchtung gemessen (normalerweiseD65oderD50Mit den Ergebnissen, die inCIE XYZ coordinates— ein Geräteunabhängiges Farbmodell. Diese Koordinaten werden dann inRGB valuesabhängig von Ihrem Arbeitsfarbraum (wiesRGB, derRec.709oderAdobeRGBder )

Die RGB-Arrays, die wir in unserer App verwenden, sind also keine Vermutung – sie sind präzise digitale Repräsentationen standardisierter, physikalisch gemessener Patches.

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

The Catch: Color Charts Are Just the Beginning

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

ist
• wie sich Farben in Highlights oder Schatten verhalten;
ist
• die einzigartigen Eigenschaften des Filmbestands oder der Linsen;
ist
• Oder die kreative Absicht hinter einem bestimmten Blick.
ist

In professionellen Werkzeugen wieDaVinci beschließtoderVerteidiger, Farbdiagramme sind nur ein Schritt in einer langen Pipeline. Von dort aus gehen Sie in fortgeschrittene Prozesse wie Filmemulation, Tonkartierung, Getreide, Halation, Blüte und andere stilistische Transformationen.a chart is a calibration tool — not a style.

CinePalette: A Minimal Tool for Exploring Color Palettes

Um zu zeigen, wie sich die Auswahl einer Palette auf ein Bild auswirkt, haben wirCinePaletteEine einfache Web-App, die visualisiert, was passiert, wenn Sie Ihren Farbraum einschränken (ein Prozess, der alsPalettenreduzierungder )

What You Can Do with CinePalette:

ist
• ein beliebiges Bild hochladen;
ist
• wählen Sie eine Palette (ColorChecker, Portra, Sepia usw.);
ist
• Umschalten jedes Pixel auf die nächste Farbe in dieser Palette;
ist
• Vergleich vor und nach mit einem interaktiven Schieberegler;
ist
• das Ergebnis speichern;
ist
• Oder bauen Sie Ihre eigene Palette von Grund auf.
ist

How It Works in Code

Unsere App läuft vollständig im Browser mitReactUnd dieCanvas APIDas Projekt – genanntCinePalette— wird Open-Source sein und auf GitHub verfügbar sein (Link am Ende der Serie).

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 hier ist, was dieKodak Portra 400Palette sieht aus wie:

"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, und diese werden zur visuellen Sprache des Rahmens – zu den Grundtönen, die seine Stimmung und seinen Stil bestimmen.

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

ist
1. Das Bild wird in einen versteckten <canvas> abgebildet – dies gibt uns pixel-level-zugriff, um die daten zu manipulieren.
ist
2. Wir extrahieren das ImageData-Objekt, das eine Array enthält, in der jeder Pixel durch vier Werte dargestellt wird: [R, G, B, A].
ist
3. Wir schleifen durch jeden Pixel und extrahieren seine RGB-Farbe.
ist
4. Für jeden Pixel finden wir die am nächsten übereinstimmende Farbe aus der ausgewählten Palette, indem wir die Euclid-Distanz im RGB-Raum verwenden - und ersetzen sie.
ist

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

Der Kern der Magie liegt in einer Funktion, die analysierteach individual pixelund findet dieclosest matching colorAus der ausgewählten Palette:

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

Danach ersetzen wir die ursprüngliche Farbe des Pixels in der ImageData durch die nächste Übereinstimmung aus der Palette.for every single pixelIn dem Bild.

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 mit .toDataURL().see the result instantly in the browser- und das gefilterte Bild mit einem einzigen Klick herunterladen.

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

Hier verwenden wirEuclidean distance in RGB space— eine klassische Methode, um zu messen, wie „nah“ zwei Farben sind:

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

Hier (r, g, b) ist die Farbe des aktuellen Pixels, und (pr, pg, pb) ist eine der Farben in der Palette.closest visual matchinnerhalb der ausgewählten Palette.

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

Wir nutzen diesen Ansatz inCinePaletteAls einfache und zugängliche Möglichkeit, das grundlegende Prinzip der Farbkartierung zu demonstrieren. jedoch, auch in seiner aktuellen Form, können Sie bemerken, dass einige Farben in einer Weise ersetzt werden, die unerwartet oder "off" fühlen.

In future versions, we plan to add a toggle between RGB and CIELABFarbräume – Benutzer können vergleichen, wie verschiedene Modelle die Genauigkeit der Farbübereinstimmung beeinflussen.

Why Does This Matter?

CinePalette zeigt einen grundlegenden, aber grundlegenden Schritt in der Farbbewertung:palette restrictionHier beginnt jeder visuelle Stil – mit der Frage:“What if we only used these colors?”.

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.Farbe ist ein Werkzeug für Stil und Geschichtenerzählen.

What’s Next?

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

ist
• Wir werden CinePalette mit der Möglichkeit erweitern, eine Palette aus einem Referenzbild auszuwählen;
ist
• fügen Sie die automatische Extraktion von Farbschemata aus jedem Rahmen oder Foto hinzu;
ist
• Einführung einer Verschiebung zwischen RGB und LAB für eine wahrnehmungsmäßig genaue Übereinstimmung;
ist
• und wie Farbharmonie funktioniert – und wie Sie sie in der realen Klassifizierung verwenden können.
ist

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