Esta sencilla aplicación te permite ver cómo Hollywood usa el color para mezclar con tus emociones

¿Por qué Joker se siente tan inquietante verde y amarillo?

¿Por qué Joker se siente tan inquietante verde y amarillo?

¿Por qué Joker se siente tan inquietante verde y amarillo?El Joker

¿Por qué es Blade Runner sumergido en teal y naranja?

¿Por qué es Blade Runner sumergido en teal y naranja?

¿Por qué Blade Runner está inmerso en teal y naranja?Inicio » Blade Runner

¿Por qué la película hace que la piel se vea suave y caliente?

¿Por qué la película hace que la piel se vea suave y caliente?

¿Por qué la película hace que la piel se vea suave y caliente?

No es magia, es color.

No es magia, es color.

Y quien controla el color - controla el peso emocional del cuadro. La clasificación de colores es el lenguaje visual del cine - una manera de formar la atmósfera, guiar la atención del espectador, y establecer el tono de una historia. Puede ser sutil y casi invisible. O audaz y estilizado, como en el trabajo de Wong Kar-Wai, Fincher, Nolan o Villeneuve. Pero para hablar este idioma fluidamente, primero necesita comprender su gramática.

¿Dónde empieza realmente el trabajo de color? ¿Cómo sabemos cuál es el color “recto”? y cómo traducimos la intención creativa en acción técnica?

Spoiler: no comienza con LUTs o filtros. Empieza con objetivos de color, calibración y paletas cuidadosamente seleccionadas.

Empieza con los objetivos de color, la calibración y las paletas cuidadosamente seleccionadas

En esta serie, exploraremos:

• cuál es la clasificación de colores en el nivel más fundamental;
• por qué limitar su paleta es una característica, no un bug;
• cómo funcionan los gráficos de colores (y por qué son importantes);
• y cómo construir su propia herramienta de clasificación en el navegador - con React y algunas matemáticas simples.
  

cuál es la clasificación de color en el nivel más fundamental;

por qué limitar tu paleta es una característica, no un bug;

cómo funcionan los gráficos de colores (y por qué son importantes);

y cómo construir su propia herramienta de clasificación en el navegador — con React y algunas matemáticas simples.

» BR

No solo lo explicaremos. Y podrás experimentar, tinker, y quizás por primera vez realmente ver de qué está hecha la clasificación de color.

No solo lo explicamos, lo mostraremos.ver

¿Qué es la clasificación de colores y por qué empezar con los objetivos de color?

¿Qué es la clasificación de colores, y por qué empezar con los objetivos de color?La clasificación de colores es el proceso de ajustar y estilizar una imagen para lograr un tono visual específico, efecto emocional o estándar técnico. Ya sea en la película, la fotografía o la producción digital, la clasificación suele incluir:

• balanceando la exposición y el punto blanco;
• correccionando los cambios técnicos de color;
• construyendo un estilo visual con contraste, tonos y curvas de color.

exposición de equilibrio y punto blanco;

corrección de cambios de color técnicos;

creando un estilo visual con contraste, tonos y curvas de color.

Pero la clasificación no se trata sólo de “hacerla hermosa”.Es sobre el control – del estado de ánimo, del enfoque del espectador, del lenguaje visual de toda la narración.

Antes de aplicar cualquier aspecto creativo, debe llevar la imagen a un estado neutro, lo que significa:

Estado neutro

• corregir los colores no deseados (corrección de colores);

• normalizar la captura a un espacio de colores estándar (como Rec.709 o sRGB);

• matching material de diferentes cámaras en una línea de partida consistente.

  
  

corrección de colores no deseados (corrección de colores);

corrección de colores no deseados (corrección de colores);

normalizando la captura a un espacio de color estándar (como Rec.709 o sRGB);

normalizando la grabación a un espacio de color estándar (como Rec.709 o sRGB);

matching material de diferentes cámaras en una base consistente.

matching material de diferentes cámaras en una base consistente.

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

Objetivos de colorColorCheckerChromaDuMonde» BR

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 ColorCheckerX-Rite ColorChecker Más información

Con el surgimiento de la fotografía digital y el cine digital, los objetivos de color se han vuelto aún más críticos.Ellos son ahora herramientas esenciales para calibrar no solo las cámaras, sino también monitores, impresoras, escáneres y cualquier dispositivo que maneje el color.

Tome el ColorChecker de X-Rite, por ejemplo. cada parche se mide bajo iluminación estandarizada (usualmente D65 o D50), con resultados registrados en CIE XYZ coordenadas — un modelo de color independiente del dispositivo.D65 Más detallesD50 Más detallesCoordenadas CIE XYZValores de RGBsRGB Rec.709 Rec.709AdobeRGB

Así que los arreglos RGB que utilizamos en nuestra aplicación no son adivinación - son representaciones digitales precisas de parches estandarizados, físicamente medidos.

Si el parche del tono de la piel en el ColorChecker Classic está definido como [194, 150, 130] en RGB, eso es lo que debería parecer en las condiciones correctas.

Si su grabación muestra algo diferente, eso es un signo de un color cast — y un punto de partida para la corrección.

The Catch: Color Charts Are Just the BeginningThe Catch: Los gráficos de colores son sólo el comienzo

Los objetivos de color son esenciales para la calibración, pero eso es todo. Un comienzo. No cuentan con:

Un comienzo.

• cómo se comportan los colores en los destaques o sombras;
• las características únicas de las películas o lentes;
• o la intención creativa detrás de un aspecto en particular.

cómo se comportan los colores en los destacados o las sombras;

las características únicas de las películas o lentes;

o la intención creativa detrás de una 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 es una herramienta de calibración, no un estilo.

CinePalette: Una herramienta mínima para explorar paletas de colores

CinePalette: Una herramienta mínima para explorar las paletas de colores

Para mostrar cómo la elección de una paleta afecta a una imagen, construimos CinePalette – una aplicación web simple que visualiza lo que sucede cuando restringe su espacio de color (un proceso conocido como reducción de paleta).

CinePaletteCinePaletteReducción de la paleta

Lo que puedes hacer con CinePalette:

Lo que puedes hacer con CinePalette:

• upload cualquier imagen;
• pick a palette (ColorChecker, Portra, Sepia, etc.);
• remap cada píxel al color más cercano en esa paleta;
• compara antes y después con un deslizador interactivo;
• save el resultado;
• build your own palette from scratch.

upload cualquier imagen;

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

remap cada píxel al color más cercano en esa paleta;

comparar antes y después con un deslizador interactivo;

save el resultado;

o construir su propia paleta desde cero.

Cómo funciona en código

Cómo funciona en código

Nuestra aplicación se ejecuta completamente en el navegador utilizando React y la API Canvas. El proyecto - llamado CinePalette - será de código abierto y disponible en GitHub (enlace al final de la serie).

Reacción API de CanvasCinePaletteCinePalette

Empezamos con un conjunto de paletas predefinidas, pero los usuarios también pueden construir y guardar sus propias paletas.Kodak Portra 400

"Portra 400": [ [75, 60, 50], // sombras [160, 130, 110], // tonos de piel [220, 200, 180], // destacados [60, 100, 80], // follaje [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 ],

La paleta seleccionada define qué colores están "permitidos" para aparecer en la imagen final. Estos se convierten en el lenguaje visual del marco - los tonos básicos que establecen su estado de ánimo y estilo.

Cuando un usuario carga una imagen y elige una paleta, aquí está lo que sucede bajo el capó:

1. La imagen se renderiza a un oculto <canvas> — esto nos da acceso a nivel de píxeles para manipular los datos.
2. Extraemos el objeto ImageData, que contiene una matriz en la que cada píxel está representado por cuatro valores: [R, G, B, A].
3. Luchamos a través de cada píxel, extraemos su color RGB.
4. Para cada píxel, encontramos el color más cercano a la paleta seleccionada, utilizando la distancia Euclidiana en el espacio RGB — y reemplazándolo.

La imagen se renderiza a un oculto <canvas> — esto nos da acceso a nivel de píxel para manipular los datos.

La imagen se renderiza a un oculto <canvas>

Extraemos el objeto ImageData, que contiene una matriz donde cada píxel es representado por cuatro valores: [R, G, B, A].

Extraemos el objeto ImageData

Luchamos a través de cada píxel, extrayendo su color RGB.

Luchamos a través de cada píxel

Para cada píxel, encontramos el color correspondiente más cercano de la paleta seleccionada, utilizando la distancia euclidiana en el espacio RGB y reemplazándolo.

Para cada píxel, encontramos el color más cercano a la paleta seleccionada

Vamos a cargar una tarjeta Shirley y tratar de aplicar diferentes paletas - verá inmediatamente cómo la elección de paleta forma la imagen.

El núcleo de la magia se encuentra en una función que analiza cada píxel individual y encuentra el color más cercano a la paleta seleccionada:

cada píxel individualel color más cercano

const findClosestColor = (r, g, b) => { let minDist = Infinity; let closest = [r, g, b]; para (let [pr, pg, pb] de la paleta) { const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); si (dist < minDist) {minDist = dist; closest = [pr, pg, pb]; } vuelve más cercano; }; 

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

Después, reemplazamos el color original del píxel en ImageData por el más cercano a la paleta.

Y repetimos esto — para cada píxel en la imagen.

para cada píxel

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

Una vez que todos los píxeles han sido procesados, rendimos el resultado de nuevo en el <canvas> y lo convertimos en una imagen usando .toDataURL(). Esto permite al usuario ver el resultado instantáneamente en el navegador

y descargar la imagen filtrada con un solo clic.

ver el resultado inmediatamente en el navegador

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

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

Aquí, usamos Distancia euclidiana en el espacio RGB - un método clásico para medir lo "cerca" de dos colores son:

Distancia euclidiana en el espacio 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) es el color del píxel actual, y (pr, pg, pb) es uno de los colores en la paleta. De todas las distancias calculadas, elegimos la más pequeña - el match visual más cercano dentro de la paleta seleccionada.

match visual más cercano

Este enfoque es intuitivo y fácil de implementar, pero tiene limitaciones: El espacio RGB no cuenta cómo los humanos realmente perciben el color - por ejemplo, somos más sensibles al verde que al azul, y las diferencias de brillo pueden ser engañosas.

El espacio RGB no cuenta cómo los humanos realmente perciben el color

Utilizamos este enfoque en CinePalette como una forma sencilla y accesible para demostrar el principio básico del mapeo de colores. Sin embargo, incluso en su forma actual, puede notar que algunos colores se reemplazan de maneras que se sienten inesperadas o "desactivadas".

CinePaletteCinePalette

En futuras versiones, planeamos agregar un cambio entre los espacios de color RGB y CIELAB - permitiendo a los usuarios comparar cómo diferentes modelos afectan la precisión de la coincidencia de color.

RGB y CIELAB

¿Por qué es importante esto?

¿Por qué es importante esto?

CinePalette presenta un paso básico pero fundamental en la clasificación de colores: restricción de paleta. Aquí es donde cada estilo visual comienza - con la pregunta: "¿Y si solo usásemos estos colores?

Limitación de la paleta“¿Y si solo usásemos estos colores?”

Una paleta de Portra brinda tonos cálidos y nostálgicos. Pro 400 se siente fresco y sublime. Teal & Orange proporciona un golpe cinematográfico de alto contraste. A diferencia de herramientas como Dehancer o Resolve, CinePalette no simula la física de la película. Pero captura la esencia: color es una herramienta para el estilo y la narración.

color es una herramienta para el estilo y la narración.

¿Qué es lo siguiente?

¿Qué es lo siguiente?

Esto es sólo el comienzo.En las siguientes partes de la serie:

• expandiremos CinePalette con la capacidad de seleccionar una paleta de una imagen de referencia;
• añade extracción automática de esquemas de colores de cualquier marco o foto;
• introduce un cambio entre RGB y LAB para una coincidencia más precisa perceptualmente;
• y descompone cómo funciona la armonía de color y cómo se puede usar en la clasificación del mundo real.

expandiremos CinePalette con la posibilidad de seleccionar una paleta de una imagen de referencia;

CinePaletteCinePalette

add extracción automática de esquemas de colores de cualquier marco o foto;

introduce un cambio entre RGB y LAB para una correspondencia más precisa perceptualmente;

RGB y LAB

y descompone cómo funciona la armonía de colores y cómo puede usarla en el mundo real.

armonía de colores

Quédate atento - y prepárate para no solo aprender el color, sino realmente ver.

Quédate ajustado - y prepárate para no solo aprender el color, sino realmente ver.ver