Esta aplicación sinxela permítelle ver como Hollywood usa a cor para confundir coas súas emocións

que

Por que o Joker se sente tan inquietante verde e amarelo?

que

Why does Joker feel so unsettlingly green and yellow?

que

Por que Blade Runner está inmerso en teal e laranxa?

que

Why is Blade Runner soaked in teal and orange?

que

Por que a película fai que a pel se vexa suave e quente?

que

Why does film make skin look soft and warm?

Non é máxico, é unha cor.

E quen controla a cor - controla o peso emocional do cadro. A clasificación de cores é a linguaxe visual do cine - unha forma de moldar a atmosfera, guiar a atención do espectador e definir o ton dunha historia. Pode ser sutil e case invisible. Ou ousado e estilizado, como no traballo de Wong Kar-Wai, Fincher, Nolan ou Villeneuve.

Onde realmente comeza o traballo de cor? como sabemos cal é a cor “correcta”? e como traducir a intención creativa en acción técnica?

Spoiler: non comeza con LUTs ou filtros.Comeza cos obxectivos de cores, a calibración e as paletas coidadosamente seleccionadas.. .

Nesta serie exploraremos:

que
• cal é a clasificación de cores no nivel máis fundamental;
que
• por que limitar a súa paleta é unha característica, non un bug;
que
• como funcionan os gráficos de cores (e por que importan);
que
• e como construír a súa propia ferramenta de clasificación no navegador - con React e algunhas matemáticas simples.
que

Non imos simplemente explicalo, imos amosalo.E vai ser capaz de experimentar, tinker, e quizais por primeira vez realmenteseede que cor está feita.

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

A clasificación de cores é o proceso de axustar e estilizar unha imaxe para lograr un ton visual específico, efecto emocional ou estándar técnico.

que
• equilibrar a exposición e o punto branco;
que
• corrección de cambios técnicos de cor;
• Desenvolver un estilo visual con contrastes, tons e curvas de cores.
que

Pero a clasificación non é só sobre "facelo fermoso".É sobre o control - do humor, do foco do espectador, da linguaxe visual de toda a narración.

Antes de aplicar calquera aspecto creativo, ten que traer a imaxe aneutral stateO que significa:

que
• Corrección de cores non desexadas (corrección de cores).
que
• normalización da imaxe a un espazo de cores estándar (como Rec.709 ou sRGB);
que
• combinar o material de diferentes cámaras nunha base consistente.
que

E para iso, os coloristas usancolor targetscomo o *Coleccionista,ChromaMundo,** ou outros gráficos de referencia.

Un obxectivo de cor é un gráfico de patches de cor conValores medidos con precisiónEstes valores non son arbitrarios: obtéñense a través de medicións espectroscópicas en ambientes controlados utilizando equipos profesionais como X-Rite ou X-Rite.Espectrofotómetros Konica Minolta.

Unha das primeiras medidas adoptadas foi aCategoría: Kodak Gray Scale- unha tira de tons de gris neutro usado para o control de exposición. Máis tarde chegaron os gráficos máis avanzados con parches de cor completa - como oMacbeth ColorChecker, introducido en 1976 (agora coñecido como oX-Rite ColorCheckerDispón de 24 swatches de cores deseñados para representar as cores comúns do mundo real: pel humana, ceo azul, follaxe verde e máis.

Coa aparición da fotografía dixital e do cine dixital, os obxectivos de cores tornáronse aínda máis críticos.Agora son ferramentas esenciais para calibrar non só as cámaras, senón tamén os monitores, impresoras, escáneres e calquera dispositivo que xestione a cor.

Tome o ColorChecker de X-Rite, por exemplo. Cada parche é medido baixo iluminación estandarizada (normalmenteD65ouD50), con resultados rexistrados enCIE XYZ coordinates- un modelo de cores independente do dispositivo. Estas coordenadas son convertidas enRGB values, dependendo do seu espazo de cor de traballo (comosRGB,Rec.709ouAdobeRGB) da

Así que os arreglos RGB que usamos na nosa aplicación non son adiviñas - son representacións dixitais precisas de parches estandarizados, fisicamente medidos.

Se o parche de ton da pel no ColorChecker Classic está definido como [194, 150, 130] en RGB, é así como debería ollar baixo as condicións correctas.

The Catch: Color Charts Are Just the Beginning

Os obxectivos de cor son esenciais para a calibración, pero iso é todo.Unha comezo.Non contan con:

que
• como se comportan as cores en relevos ou sombras;
que
• as características únicas do material ou lentes de película;
que
• ou a intención creativa detrás dunha mirada particular.
que

Ferramentas profesionais comoDa Vinci ResolveouDefensores, os gráficos de cores son só un paso nunha longa canle. A partir de aí, pasa a procesos avanzados como a emulación de películas, o mapeamento de tonos, o gran, a halatación, a floración e outras transformacións estilísticas.a chart is a calibration tool — not a style.

CinePalette: A Minimal Tool for Exploring Color Palettes

Para mostrar como a elección dunha paleta afecta a unha imaxe, construímosCinePaletteunha simple aplicación web que visualiza o que sucede cando restrinxe o seu espazo de cores (un proceso coñecido comoRedución da paleta) da

What You Can Do with CinePalette:

que
• cargar calquera imaxe;
que
• escoller unha paleta (ColorChecker, Portra, Sepia, etc.);
que
• remapa cada píxel á cor máis próxima nesa paleta;
que
• comparar antes e despois cun deslizador interactivo;
que
• gardar o resultado;
que
• ou construír a súa propia paleta desde cero.
que

How It Works in Code

A nosa aplicación funciona enteiramente no navegador usandoReacte oCanvas APIO proxecto - chamadoCinePalette— será de código aberto e dispoñible en GitHub (enlace ao final da serie).

Comezamos cun conxunto de paletas predefinidas, pero os usuarios tamén poden construír e gardar as súas propias.Kodak Portra 400A paleta parece:

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

A paleta seleccionada define que cores están "permitidas" para aparecer na imaxe final. Estes se converten na linguaxe visual do cadro - os tons básicos que establecen o seu estado de ánimo e estilo.

Cando un usuario carga unha imaxe e elixe unha paleta, aquí está o que acontece baixo o capó:

que
1. A imaxe é renderizada a un <canvas> oculto, o que nos dá acceso a nivel de píxeles para manipular os datos.
que
2. Extraemos o obxecto ImageData, que contén unha matriz onde cada píxel está representado por catro valores: [R, G, B, A].
que
3. Loquemos a través de cada píxel, extraendo a súa cor RGB.
que
4. Para cada píxel, atopamos a cor correspondente máis próxima da paleta seleccionada, utilizando a distancia euclidiana no espazo RGB, e substituímola.
que

Imos cargar unha tarxeta Shirley e tentar aplicar diferentes paletas - verá inmediatamente como a elección de paleta forma a imaxe.

O núcleo da maxia está nunha función que analizaeach individual pixele atopa oclosest matching colorA partir da paleta seleccionada:

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

A continuación, substituímos a cor orixinal do píxel no ImageData pola máis próxima da paleta.for every single pixelna súa imaxe.

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

Despois de que todos os píxeles teñan sido procesados, devolvemos o resultado ao <canvas> e convertémolo nunha imaxe usando .toDataURL().see the result instantly in the browser- e descargar a imaxe filtrada cun só clic.

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

Aquí, usamosEuclidean distance in RGB space— un método clásico para medir o “cerca” de dúas cores son:

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

Aquí, (r, g, b) é a cor do píxel actual, e (pr, pg, pb) é unha das cores na paleta.closest visual matchdentro da paleta seleccionada.

Este enfoque é intuitivo e fácil de implementar, pero ten limitacións:O espazo RGB non conta como os humanos realmente perciben as coresPor exemplo, somos máis sensibles ao verde que ao azul, e as diferenzas de brillo poden ser enganosas.

Utilizamos este enfoque paraCinePaletteNon obstante, mesmo na súa forma actual, pode notar que algunhas cores son substituídas de formas que se senten inesperadas ou "desactivadas".

En futuras versións, planeamos engadir unha ligazón entreRGB and CIELABEspazos de cores: permiten aos usuarios comparar como diferentes modelos afectan á precisión da correspondencia de cores.

Why Does This Matter?

CinePalette presenta un paso básico pero fundamental na clasificación de cores:palette restrictionAquí é onde cada estilo visual comeza - coa pregunta:“What if we only used these colors?”.

Unha paleta de Portra trae tonos cálidos e nostálxicos. Pro 400 séntese fresco e suave. Teal & Orange proporciona un golpe cinematográfico de alto contraste. A diferenza de ferramentas como Dehancer ou Resolve, CinePalette non simula a física da película.A cor é unha ferramenta para o estilo e a narración.

What’s Next?

Este é só o comezo, nas seguintes páxinas:

que
• we’ll expand CinePalette with the ability to pick a palette from a reference image;
que
• engade a extracción automática de esquemas de cores de calquera marco ou foto;
que
• introducir un cambio entre RGB e LAB para unha correspondencia máis precisa perceptualmente;
que
• e romper como funciona a harmonía de cores - e como pode usalo na clasificación do mundo real.
que

Manteña-se axustado - e estar preparado para non só aprender a cor, pero realmente velo.