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

Por que Joker sente tan inquietante verde e amarelo?

Por que Joker sente tan inquietante verde e amarelo?

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

Por que é Blade Runner mergullado en teal e laranxa?

Por que é Blade Runner mergullado en teal e laranxa?

Por que é Blade Runner mergullado en teal e laranxa?Páxina oficial de Blade Runner

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

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

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

Non é máxico.

Non é máxico, é a 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 comeza realmente o traballo de cor? como sabemos cal é a cor “correcta”? e como traduces a intención creativa á acción técnica?

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

Comeza cos obxectivos de cor, a calibración e as paletas coidadosamente seleccionadas

Nesta serie, imos explorar:

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

cal é a clasificación de cores no nivel máis fundamental;

por que limitar a súa paleta é unha característica, non un bug;

como funcionan os gráficos de cores (e por que importan);

e como construír a súa propia ferramenta de clasificación no navegador - con React e algunhas matemáticas simples.

Non imos só explicalo. imos amosalo. E poderás experimentar, tinker, e quizais por primeira vez realmente ver de que está feita a clasificación de cores.

Non imos só explicalo, imos amosalo.ver

Que é a clasificación de cores e por que comezar con obxectivos de cores?

Que é a clasificación de cores e por que comezar con obxectivos de cores?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.

• balanceando a exposición e o punto branco;
• correccionando os cambios técnicos de cor;
• construíndo un estilo visual con contrastes, tons e curvas de cor.

exposición de equilibrio e punto branco;

corrección de cambios técnicos de cor;

Creación dun estilo visual con contraste, tons e curvas de cor.

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, debes levar a imaxe a un estado neutro, o que significa:

Estado neutro

• corrección de cores non desexadas (corrección de cores);

• normalizando a imaxe a un espazo de cores estándar (como Rec.709 ou sRGB);

• matching material de diferentes cámaras nunha liña de base consistente.

  
  

corrección de cores non desexadas (corrección de cores);

corrección de cores non desexadas (corrección de cores);

normalizando a imaxe a un espazo de cores estándar (como Rec.709 ou sRGB);

normalizando a imaxe a un espazo de cores estándar (como Rec.709 ou sRGB);

matching material de diferentes cámaras a unha base consistente.

matching material de diferentes cámaras para unha base consistente.

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

Obxectivos de corColorCheckerChromaDuMonde

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.

Valores medidos con precisiónKonica 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 ColorChecker Páxina oficialX-Rite ColorChecker Páxina oficial

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ó cámaras, senón tamén monitores, impresoras, escáneres e calquera dispositivo que manexe a cor.

Tome o ColorChecker de X-Rite, por exemplo. Cada parche é medido baixo iluminación estandarizada (normalmente D65 ou D50), cos resultados rexistrados en CIE XYZ coordenadas - un modelo de cor independente do dispositivo. Estas coordenadas son entón convertidas en RGB valores, dependendo do seu espazo de cores de traballo (como sRGB, Rec.709, ou AdobeRGB).

D65 Páxina oficialD50 Páxina oficialCoordenadas CIE XYZValores de RGBsRGB Páxina webRec.709 Páxina oficialAdobeRGB Páxina web

Polo tanto, os arreglos RGB que usamos na nosa aplicación non son adiviñas - son representacións dixitais precisas de parches estandarizados e 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.

Se a túa imaxe mostra algo diferente, é un signo dun color cast - e un punto de partida para a corrección.

The Catch: Color Charts Are Just the BeginningThe Catch: Color Charts Are Just the Beginning (← ligazóns editar)

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

Un comezo.

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

como se comportan as cores en destacamentos ou sombras;

as características únicas do material ou lentes de película;

ou a intención creativa detrás dunha mirada particular.

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 ResolveDehancerDehancerUn gráfico é unha ferramenta de calibración, non un estilo.

CinePalette: unha ferramenta mínima para explorar as paletas de cores

CinePalette: unha ferramenta mínima para explorar as paletas de coresPara mostrar como a elección dunha paleta afecta a unha imaxe, construímos CinePalette - unha aplicación web sinxela que visualiza o que acontece cando restrinxe o seu espazo de cores (un proceso coñecido como palette reduction).

CinePalette Páxina oficialReducción da paleta

O que podes facer con CinePalette:

O que podes facer con CinePalette:

• upload calquera imaxe;
• pick unha paleta (ColorChecker, Portra, Sepia, etc.);
• remap cada píxel á cor máis próxima nesa paleta;
• compare antes e despois cun deslizador interactivo;
• save o resultado;
• build your own palette from scratch.

upload calquera imaxe;

pick unha paleta (ColorChecker, Portra, Sepia, etc.);

remap cada píxel á cor máis próxima nesa paleta;

comparar antes & despois cun deslizador interactivo;

garde o resultado;

ou construír a súa propia paleta desde cero.

Como funciona en código

Como funciona en código

A nosa aplicación execútase enteiramente no navegador usando React e a API Canvas. O proxecto -chamado CinePalette- será de código aberto e dispoñible en GitHub (enlace ao final da serie).

ReacciónA API de CanvasCinePalette Páxina oficial

Comezamos cun conxunto de paletas predefinidas, pero os usuarios tamén poden construír e gardar as súas propias paletas.Kodak Portra 400 Páxina oficial

"Portra 400": [ [75, 60, 50], // sombras [160, 130, 110], // tons de pel [220, 200, 180], // salientacións [60, 100, 80], // follaxe [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 ],

A paleta seleccionada define que cores están "permitidas" para aparecer na imaxe final.

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

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

A imaxe é renderizada a un oculto <canvas> - isto dános acceso a nivel de píxel para manipular os datos.

A imaxe é renderizada a un oculto <canvas>Extraemos o obxecto ImageData, que contén unha matriz onde cada píxel está representado por catro valores: [R, G, B, A]. Extraemos o obxecto ImageDataLoquemos a través de cada píxel, extraendo a súa cor RGB. Nós loop a través de cada píxel

Para cada píxel, atopamos a cor correspondente máis próxima da paleta seleccionada, utilizando a distancia euclidiana no espazo RGB e substituíndoa.

Para cada píxel, atopamos a cor máis próxima da paleta seleccionada

Vamos 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 analiza cada píxel individual e atopa a cor máis próxima correspondente da paleta seleccionada:

cada píxel individualcor máis próxima

const findClosestColor = (r, g, b) => { let minDist = Infinity; let closest = [r, g, b]; para (let [pr, pg, pb] de paleta) { const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); se (dist < minDist) {minDist = dist; closest = [pr, pg, pb]; } volver máis próximo; }; 

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

Entón, substituímos a cor orixinal do píxel no ImageData pola correspondencia máis próxima da paleta. para cada píxel

for (let i = 0; i < data.length; i += 4) { const [r, g, b] = [data[i + 1], datos[i + 2]]; const [nr, ng, nb] = findClosestColor(r, g, b); datos[i] = nr; datos[i + 1] = ng; datos[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; }

Despois de que todos os píxeles foron procesados, rendemos o resultado de volta ao <canvas> e convertémolo nunha imaxe usando .toDataURL(). Isto permite ao usuario ver o resultado instantaneamente no navegador e descargar a imaxe filtrada cun só clic.

ver o resultado inmediatamente no navegador

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

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

Aquí usamos Distancia euclidiana no espazo RGB - un método clásico para medir como "cerca" dúas cores son:

Distancia euclidiana no espazo RGB

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

Aquí, (r, g, b) é a cor do píxel actual, e (pr, pg, pb) é unha das cores na paleta. De todas as distancias calculadas, escollemos a máis pequena - o match visual máis próximo dentro da paleta seleccionada.

match visual máis próximo

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

O espazo RGB non conta como os humanos realmente perciben a cor

Usamos este enfoque en CinePalette como un xeito sinxelo e accesible para demostrar o principio básico de mapeamento de cores. con todo, mesmo na súa forma actual, pode notar que algunhas cores son substituídas de formas que se senten inesperadas ou "desactivadas".

CinePalette Páxina oficial

Nas futuras versións, planeamos engadir un cambio entre os espazos de cores RGB e CIELAB - permitindo aos usuarios comparar como os diferentes modelos afectan á precisión da combinación de cores.

RGB e CIELAB

Por que isto importa?

Por que isto importa?

CinePalette presenta un paso básico pero fundamental na clasificación de cores: restrición de paleta. Aquí é onde cada estilo visual comeza - coa pregunta: "E se só usásemos estas cores?

Restricción da paleta “E se só usásemos estas cores?”

Unha paleta de Portra trae tonos cálidos e nostálxicos. Pro 400 séntese fresco e suavizado. 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. Pero captura a esencia: color é unha ferramenta para o estilo e a narración.

a cor é unha ferramenta para o estilo e a narración.

Que é o seguinte?

Que é o seguinte?

Este é só o comezo. nas seguintes partes da serie:

• ampliaremos CinePalette coa capacidade de escoller unha paleta dunha imaxe de referencia;
• engade a extracción automática de esquemas de cores de calquera cadro ou foto;
• introduce unha transición entre RGB e LAB para unha correspondencia máis precisa perceptualmente;
• e descompón como funciona a harmonía de cores - e como pode usalo na clasificación do mundo real.

ampliaremos CinePalette coa posibilidade de escoller unha paleta dunha imaxe de referencia;

CinePalette Páxina oficial

engade extracción automática de esquemas de cores de calquera cadro ou foto;

introduce unha transición entre RGB e LAB para unha correspondencia máis precisa perceptualmente;

RGB e LAB

e descompón como funciona a harmonía de cores e como podes usala na clasificación do mundo real.

harmonía de cores

Stay tuned - e estar preparado para non só aprender a cor, pero realmente ver iso.

Stay tuned - e estar preparado para non só aprender a cor, pero realmente ver iso.ver