Why does Joker feel so unsettlingly green and yellow?
Why does Joker feel so unsettlingly green and yellow?
Why does Joker feel so unsettlingly green and yellow? ジョーカー Why is Blade Runner soaked in teal and orange? Why is Blade Runner soaked in teal and orange? なぜ映画は肌を柔らかく温かく見せるのか? なぜフィルムは肌を柔らかく温かく見せるのか? それは魔法ではない、それは色です。 そして、誰が色をコントロールするかは、フレームの感情的な重みをコントロールします。カラー評価は、映画の視覚的な言語であり、雰囲気を形作り、視聴者の注意を導き、物語のトーンを設定する方法です。それは微妙でほぼ見えません。または勇敢でスタイリッシュな、 Wong Kar-Wai、Fincher、Nolan、またはVilleneuveの作品のように。しかし、この言語を流暢に話すためには、まずその文法を理解する必要があります。 色作業はどこから始まるのか? 「正しい」色が何であるかをどのように知るか? そして、創造的な意図を技術的な行動にどのように変換するか? Spoiler:それはLUTsやフィルターで始まらない。 それは色のターゲット、カリブレーション、そして慎重に選択されたパレットから始まる。それは色のターゲット、カリブレーション、そして慎重に選択されたパレットから始まる このシリーズでは、 我々はそれを説明するだけではなく、我々はそれを示します。 そして、あなたは実験し、Tinker、およびおそらく初めて実際に見る何色の分類が作られているか。我々はそれを説明するのではなく、我々はそれを示す。見る Color grading is the process of adjusting and stylizing an image to a specific visual tone, emotional effect, or technical standard. Whether in film, photography, or digital production, grading usually includes: But grading is not just about “making it pretty.” It’s about control – of the mood, of the viewer’s focus, of the visual language of the entire narrative. しかし、グレードアップは単に“美しくすること”のことではありません。 クリエイティブな外観を適用する前に、画像を 中立状態に に戻す必要があります。neutral state シングル 不必要なカラーキャスト(カラー修正)を修正する; 標準カラースペース(Rec.709 または sRGB など)に撮影を標準化する; 異なるカメラからの素材を一致したベースラインに合わせる。 不必要な色彩を修正する(色の修正); needed color casts (color correction) を修正します。 撮影を標準のカラースペース(Rec.709 または sRGB など)に標準化する。 撮影を標準カラースペース(Rec.709 または sRGB など)に標準化する。 異なるカメラからの素材を一貫したベースラインにまとめる。 matching material from different cameras into a consistent baseline. And for that, colorists use color targets like the **ColorChecker, ChromaDuMonde,**or other reference charts. 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. 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. デジタル写真とデジタル映画の出現に伴い、カラーターゲットはますます重要な役割を果たし、カメラだけでなく、モニター、プリンター、スキャナ、そして色を扱うあらゆるデバイスをカリブレートするための不可欠なツールとなりました。 ColorChecker Classicの皮膚のトーンパッチがRGBで[194, 150, 130]と定義されている場合は、正しい条件下でこのように見えるべきです。 Color targets are essential for calibration — but that's all they are. A beginning. They don't account for: 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. パレットの選択が画像にどのように影響するかを示すために、我々はCinePalette - あなたがあなたのカラースペースを制限するときに何が起こるかを視覚化するシンプルなウェブアプリケーション(palette reduction)として知られるプロセス)を構築しました。CinePaletteパレット削減 What You Can Do with CinePalette: Our app runs entirely in the browser using React and the Canvas API. The project — called CinePalette — will be open-source and available on GitHub (link at the end of the series). We start with a set of predefined palettes, but users can also build and save their own. Palettes are defined as array of RGB values — for example, here is what the Kodak Portra 400 palette looks like: 選択したパレットは、最終画像にどの色が「許される」かを定義します。これらは、フレームのビジュアル言語となり、その雰囲気とスタイルを設定する基本的なトーンになります。 ユーザーが画像をアップロードしてパレットを選択すると、キャップの下で何が起こるかです。 シャーリーカードをアップロードし、異なるパレットを適用してみましょう - パレット選択が画像を形作る方法をすぐに見ることができます。 魔法の核心は、それぞれの個々のピクセル を分析し、選択したパレットから が最も近い一致する色 を見つける関数です。各個別ピクセルnearest matching color <前> その後、ImageDataのピクセルのオリジナル色をパレットから最も接近した色に置き換えます.And we repeat this — for every single pixel in the image. すべてのピクセルが処理されると、結果を <canvas> に戻し、 .toDataURL() を使用して画像に変換します。see the result instantly in the browser ブラウザですぐに結果を見る ここでは、RGB空間におけるEuclidean distance を使用します ― 二つの色がどれほど「近い」かを測定するための古典的な方法です。RGB空間におけるユークリッド距離 ここで、(r、g、b)は現在のピクセルの色であり、(pr、pg、pb)はパレット内の色の1つです。計算された距離のうち、我々は、選択したパレット内で 最も近い視覚的な合致 を選択します。nearest visual match このアプローチは直感的で実装しやすいが、限界がある: RGBスペースは、人間が実際にどのように色を認識するかを反映していない - 例えば、私たちは青よりも緑に敏感であり、明るさの違いは誤解を招く可能性があります。RGB空間は、人間が実際にどのように色を認識するかを反映していない We use this approach in CinePalette as a simple and accessible way to demonstrate the basic principle of color mapping. However, even in its current form, you may notice that some colors get replaced in ways that feel unexpected or "off." 将来のバージョンでは、RGBとCIELABカラースペース間の切り替えを追加することを計画しており、ユーザーが異なるモデルが色の一致の精度にどのように影響するかを比較できるようにします。RGBとCIELAB CinePaletteは、カラー分類における基本的だが根本的なステップを示しています: パレット制限. ここであらゆるビジュアルスタイルが始まります - 質問: 「もし私たちがこれらの色だけを使っていたらどうでしょうか?」 Portraパレットは温かいノスタルジックなトーンをもたらします。Pro 400はクールで柔らかい感じです。Teal & Orangeは高コントラストの映画ポンチを提供します。DehancerやResolveのようなツールとは異なり、CinePaletteは映画の物理をシミュレートしません。しかし、それは本質をキャプチャします: colorはスタイルとストーリーを語るためのツールです。 This is just the beginning. シリーズの次の部分: カラーを学ぶだけではなく、本当に see it を学ぶ準備をしてください。Stay tuned - and get ready to not only learn color, but truly see it.see
カラーグレードとは何ですか、そしてなぜカラーターゲットを始めるのですか?
カラーグレードとは何ですか、そしてなぜカラーターゲットから始めるのですか?
The Catch: Color Charts Are Just the Beginning
The Catch: Color Charts Are Just the Beginning
CinePalette: A Minimal Tool for Exploring Color Palettes
CinePalette: A Minimal Tool for Exploring Colour Palettes
How It Works in Code
How It Works in Code
"Portra 400": [ [ [75, 60, 50], // shadows [160, 130, 110], // skin tones [220, 200, 180], // highlights [60, 100, 80], // foliage [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
],
const findClosestColor = (r, g, b) => { let minDist = Infinity; let closest = [r, g, b]; for (let [pr, pg, pb]) { const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); もし (dist < minDist) { minDist = dist; closest = [pr, pg, pb]; } } 戻る最寄り; }; 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;
};
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;
}
ctx.putImageData(imageData, 0, 0); setFilteredImage(canvas.toDataURL()); ctx.putImageData(imageData, 0, 0);
setFilteredImage(canvas.toDataURL());
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);
Why Does This Matter?
Why Does This Matter?
次は何ですか?
次は?
