このシンプルなアプリは、ハリウッドがあなたの感情と混同するために色を使用する方法を見せてくれます

♪

なぜジョーカーはこんなに緑と黄色に不安を感じるのか?

♪

Why does Joker feel so unsettlingly green and yellow?

♪

なぜBlade Runnerはオレンジとティールに浸かっているのか?

♪

Why is Blade Runner soaked in teal and orange?

♪

なぜフィルムは肌を柔らかく、温かくするのか?

♪

Why does film make skin look soft and warm?

魔法じゃない、色だ。

そして、誰が色をコントロールするかは、フレームの感情的な重みをコントロールします。カラー評価は、映画の視覚的な言語です - 雰囲気を形作り、視聴者の注意を導き、物語のトーンを設定する方法です。それは微妙でほぼ目に見えないかもしれません。または大胆でスタイリッシュ、ウォン・カルワイ、フィンチャー、ノーラン、またはヴィルヌーヴの作品のように。

実際の色作業はどこから始まるのか? 「正しい」色が何であるかをどのように知るか? そして、どのようにして創造的な意図を技術的行動に翻訳するのか?

Spoiler:それはLUTやフィルターで始まらない。それは色のターゲット、カリブレーション、そして慎重に選択されたパレットから始まります。で。

このシリーズでは、私たちは探索します:

♪
• 最も基本的なレベルでどの色を評価するか。
♪
• なぜパレットを制限することはバグではなく機能なのか。
♪
• 色のグラフがどのように機能するか(そしてなぜ重要なのか)
♪
• and how to build your own grading tool in the browser — with React and some simple math. ブラウザで独自の評価ツールを構築する方法
♪

説明するのではなく、見せてあげましょう。そして、あなたは実験することができ、Tinker、そして、おそらく初めて実際にseeどんな色が作られていますか?

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

色の評価は、特定の視覚的トーン、感情的効果、または技術的基準を達成するためにイメージを調整しスタイリングするプロセスです。

♪
• 露出と白い点のバランスをとる。
♪
• 技術的な色の変化の修正
♪
• コントラスト、トーン、および色の曲線で視覚的なスタイルを作成する。
♪

しかし、評価は単に「美しくする」ことではなく、気分、視聴者の焦点、全物語のビジュアル言語のコントロールについてです。

クリエイティブな外観を適用する前に、あなたは画像をAに持ち込む必要があります。neutral stateつまり:

♪
• 不要な色彩を修正する(色の修正)
♪
• 撮影を標準カラースペース(Rec.709またはsRGBなど)に正常化する。
♪
• さまざまなカメラの素材を一貫したベースラインに合わせる。
♪

そのために、カラーは使います。color targets同様に♪カラーチェックで、クリスマス◎その他の参考図

A color target is a chart of color patches with正確に測定した値これらの値は任意ではありません - X-Rite や X-Rite などのプロフェッショナルな機器を使用した制御された環境におけるスペクトロフォトメトリック測定によって得られます。Konica Minolta spectrophotometers.

広く採用された最初の目標の1つは、コダックグレイスケール— 露出制御のために使用された中立の灰色の色合いのストリップ. Later came more advanced charts with full-color patches — like theMacbeth ColorChecker1976年に導入された(現在は「X-Rite ColorCheckerそれは、現実世界の共通の色を表すように設計された24色のスワッチを備えています:人間の皮膚、青い空、緑の葉、その他。

デジタル写真とデジタル映画の出現に伴い、カラーターゲットはますます重要な役割を果たし、カメラだけでなく、モニター、プリンター、スキャナ、そして色を扱うあらゆるデバイスをカリブレートするための不可欠なツールとなりました。

たとえば、X-Rite の ColorChecker を用いて、各パッチは標準化された照明下で測定されます(通常はD65またはD50)で記録された結果CIE XYZ coordinatesデバイス独立のカラーモデルで、これらの座標が変換されます。RGB valuesあなたの作業色空間(たとえばsRGBで、Rec.709あるいはAdobeRGB( )

したがって、当社のアプリで使用するRGBアーレイは推測ではなく、標準化された物理的に測定されたパッチの正確なデジタル表示です。

ColorChecker Classic の皮膚のトーンパッチが RGB で [194, 150, 130] と定義されている場合は、正しい条件下でそのように見えるべきです。

The Catch: Color Charts Are Just the Beginning

色のターゲットは校正に不可欠ですが、それだけです。1 始まり彼らは計算しない:

♪
• どのように色がハイライトや影で振る舞うか
♪
• フィルムまたはレンズのユニークな特徴
♪
• あるいは、特定の視点の背後にある創造的な意図。
♪

プロのようなツールで、DaVinci Resolveまたは防衛, カラーグラフは長いパイプラインのステップ1に過ぎません。そこから、あなたはフィルムエミュレーション、トーンマッピング、穀物、ハライト、フローム、その他のスタイリッシュな変換などの高度なプロセスに移行します。a chart is a calibration tool — not a style.

CinePalette: A Minimal Tool for Exploring Color Palettes

パレットの選択が画像にどのように影響するかを示すために、我々はCinePaletteあなたの色空間を制限するときに起こることを視覚化するシンプルなウェブアプリケーション(カラースペースとして知られるプロセス)パレット削減( )

What You Can Do with CinePalette:

♪
• 画像をアップロードし、
♪
• パレット(ColorChecker、Portra、Sepiaなど)を選択します。
♪
• それぞれのピクセルをそのパレットの最も近い色にリメイクします。
♪
• インタラクティブなスライダーで前と後を比較する
♪
• 結果を保存し、
♪
• あるいは、自分自身のパレットをゼロから作る。
♪

How It Works in Code

私たちのアプリは、使用するブラウザで完全に実行されます。Reactそして、TheCanvas APIプロジェクト - CalledCinePalette— オープンソースで、GitHubで利用可能になります(シリーズの最後のリンク)。

私たちは、事前に定義されたパレットのセットから始めますが、ユーザーは独自のパレットを作成して保存することもできます。Kodak Portra 400パレットはこんな感じ:

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

選択したパレットは、最終画像にどの色が「許される」かを定義します これらは、フレームのビジュアル言語 - 雰囲気とスタイルを設定する基本的なトーンになります。

ユーザーが画像をアップロードしてパレットを選択すると、キャップの下で起こることは以下の通りです。

♪
1. 画像は隠された <canvas> にレンダリングされます - これは、データを操作するためのピクセルレベルのアクセスを提供します。
♪
2. We extract the ImageData object, which contains an array where each pixel is represented by four values: [R、G、B、A].
♪
3. それぞれのピクセルをロープし、RGB色を抽出します。
♪
4. 各ピクセルでは、選択したパレットから最も近い一致する色を見つけて、RGB空間のユークリッド距離を使用して、それを置き換えます。
♪

シャーリーカードをアップロードし、異なるパレットを適用してみましょう - あなたはすぐにパレット選択が画像を形作る方法を見ることができます。

魔法の核心は、分析する機能にあります。each individual pixeland finds theclosest matching color選択したパレットから:

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

次に、ImageData でピクセルの元の色をパレットから最も接近した色に置き換えます。for every single pixelイメージの中。

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

すべてのピクセルが処理されると、結果を <canvas> に戻し、 .toDataURL() を使用して画像に変換します。see the result instantly in the browserフィルターされた画像を1クリックでダウンロード

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

ここで、我々は使用Euclidean distance in RGB space— 二つの色がどれほど「近い」かを測るための古典的な方法:

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

ここで(r、g、b)は現在のピクセルの色であり、(pr、pg、pb)はパレットの色の1つです。closest visual match選択したパレット内で

このアプローチは直感的で実装しやすいが、限界がある:RGB空間は、人間が実際の色をどのように認識しているかを反映していない。たとえば、私たちは青よりも緑に敏感であり、明るさの違いは誤解する可能性があります。

私たちはこのアプローチを用いて、CinePaletteただし、現在の形でさえ、一部の色が予想外または「オフ」と感じる方法で置き換えられることに気付くかもしれません。

将来のバージョンでは、私たちは交差点を追加する予定です。RGB and CIELAB色スペース - ユーザーが異なるモデルが色の一致の精度にどのように影響するかを比較できるようにします。

Why Does This Matter?

CinePaletteは、カラー分類における基本的だが根本的なステップを示しています。palette restrictionこれが、あらゆるビジュアルスタイルが始まる場所です―質問:“What if we only used these colors?”.

ポルトラパレットは温かいノスタルギーのトーンをもたらします。プロ400はクールで柔らかい感じがします。ティール&オレンジは高コントラストの映画ポンチを提供します。デハンサーやResolveのようなツールとは異なり、CinePaletteは映画の物理をシミュレートしません。しかし、それは本質をキャプチャします:色はスタイルとストーリーを語るためのツールです。

What’s Next?

これは始まりに過ぎないが、シリーズの次の部分では、

♪
• CinePalette を拡張し、参考画像からパレットを選択できるようになります。
♪
• すべてのフレームや写真から自動的にカラースケジュールの抽出を追加します。
♪
• より知覚的に正確な一致のためにRGBとLABの交差を導入する。
♪
• 色調調和がどのように機能するか、そして実際の世界の評価でどのように使用できるかを解説します。
♪

調和を保ち、色を学ぶだけでなく、真にそれを見る準備をしてください。