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

y

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

y

Why does Joker feel so unsettlingly green and yellow?

y

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

y

Why is Blade Runner soaked in teal and orange?

y

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

y

Why does film make skin look soft and warm?

No es magia, es color.

Y quien controla el color — controla el peso emocional del cuadro. La clasificación del color 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.

¿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.Comienza con los objetivos de color, la calibración y las paletas cuidadosamente seleccionadas. el

En esta serie vamos a explorar:

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

No lo vamos a explicar, lo vamos a mostrar.Y podrás experimentar, tinker, y quizás por primera vez realmentesee¿De qué color está hecha la grabación?

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

La clasificación de color 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:

y
• equilibrar la exposición y el punto blanco;
y
• corrección de los cambios técnicos de color;
y
• Diseñar un estilo visual con contraste, tonos y curvas de color.
y

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

Antes de aplicar cualquier aspecto creativo, es necesario llevar la imagen a unneutral statelo que significa:

y
• Corrección de los colores no deseados (corrección de colores).
y
• normalizar la grabación a un espacio de color estándar (como Rec.709 o sRGB);
y
• combinación de material de diferentes cámaras en una base consistente.
y

Para ello, los coloristas utilizancolor targetsComo el *Coleccionista, deChromaMundo,** u otros gráficos de referencia.

Un objetivo de color es un gráfico de parches de color conValores precisos medidosEstos valores no son arbitrarios: se obtienen a través de mediciones espectroscópicas en entornos controlados utilizando equipos profesionales como X-Rite o X-Rite.Espectrógrafos Konica Minolta.

Uno de los primeros objetivos adoptados fue el deEspecificaciones Kodak Gray Scale— una tira de tonos de gris neutro utilizado para el control de la exposición. Más tarde vinieron gráficos más avanzados con parches de color completo — como elMacbeth ColorChecker, introducido en 1976 (ahora conocido como elX-Rite ColorCheckerDispone de 24 swatches de colores diseñados para representar colores comunes del mundo real: piel humana, cielo azul, follaje verde, y más.

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.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.

Tomemos el ColorChecker de X-Rite, por ejemplo. Cada parche se mide bajo iluminación estandarizada (normalmenteD65oD50), con los resultados registrados enCIE XYZ coordinates- un modelo de color independiente del dispositivo. Estas coordenadas se convierten enRGB values, dependiendo de su espacio de color de trabajo (comosRGB, deRec.709, oAdobeRGB) de

Por lo tanto, 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.

The Catch: Color Charts Are Just the Beginning

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

y
• Cómo se comportan los colores en las luces o sombras;
y
• las características únicas de la película o de las lentes;
y
• o la intención creativa detrás de una mirada particular.
y

Con herramientas profesionales comoDaVinci resuelveoDefensores, los gráficos de colores son sólo un paso en una larga tubería. Desde allí, se pasa a procesos avanzados como la emulación de películas, el mapeo de tonos, el grano, la halatación, la floración y otras transformaciones estilísticas.a chart is a calibration tool — not a style.

CinePalette: A Minimal Tool for Exploring Color Palettes

Para mostrar cómo la elección de una paleta afecta a una imagen, construimosCinePalette- una aplicación web simple que visualiza lo que sucede cuando restringe su espacio de color (un proceso conocido comoReducción de paleta) de

What You Can Do with CinePalette:

y
• cargar cualquier imagen;
y
• elija una paleta (ColorChecker, Portra, Sepia, etc.);
y
• remapa cada píxel al color más cercano en esa paleta;
y
• comparar antes y después con un deslizador interactivo;
y
• save the result;
y
• or build your own palette from scratch.
y

How It Works in Code

Nuestra aplicación se ejecuta íntegramente en el navegador utilizandoReactY elCanvas APIEl proyecto - llamadoCinePalette— será de código abierto y disponible en GitHub (enlace al final de la serie).

Empezamos con un conjunto de paletas predefinidas, pero los usuarios también pueden construir y guardar sus propias paletas.Kodak Portra 400La 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
],

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 sube una imagen y elige una paleta, aquí está lo que sucede bajo el capó:

y
1. La imagen se renderiza a un <canvas> oculto - esto nos da acceso a nivel de píxel para manipular los datos.
y
2. Extraemos el objeto ImageData, que contiene una matriz donde cada píxel es representado por cuatro valores: [R, G, B, A].
y
3. Pasamos por cada píxel, extrayendo su color RGB.
y
4. Para cada píxel, encontramos el color más cercano a la paleta seleccionada, utilizando la distancia euclídea en el espacio RGB, y lo reemplazamos.
y

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 está en una función que analizaeach individual pixely encuentra elclosest matching colorde la 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;
};

Luego, reemplazamos el color original del píxel en ImageData por el más cercano a la paleta.for every single pixelen la imagen.

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 hayan sido procesados, rendimos el resultado de nuevo en el <canvas> y lo convertimos en una imagen usando .toDataURL().see the result instantly in the browserDescarga la imagen filtrada con un solo clic.

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

Aquí, utilizamosEuclidean distance in RGB space- un método clásico para medir lo "cerca" de dos colores son:

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.closest visual matchdentro de la paleta seleccionada.

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

Utilizamos este enfoque enCinePaletteSin embargo, incluso en su forma actual, puede notar que algunos colores se reemplazan de maneras que se sienten inesperadas o "desactivadas".

En futuras versiones, planeamos añadir un cambio entreRGB and CIELABespacios de color, permitiendo a los usuarios comparar cómo diferentes modelos afectan la precisión de la combinación de colores.

Why Does This Matter?

CinePalette presenta un paso básico pero fundamental en la clasificación del color:palette restrictionAquí es donde cada estilo visual comienza – con la pregunta:“What if we only used these colors?”.

Una paleta de Portra trae tonos cálidos y nostálgicos. Pro 400 se siente fresco y suave. 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:El color es una herramienta para el estilo y la narración.

What’s Next?

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

y
• ampliaremos CinePalette con la posibilidad de seleccionar una paleta de una imagen de referencia;
y
• agregar la extracción automática de esquemas de colores de cualquier marco o foto;
y
• introducir un cambio entre RGB y LAB para una correspondencia más precisa perceptualmente;
y
• y descomponer cómo funciona la armonía de colores - y cómo se puede usar en la clasificación del mundo real.
y

Manténgase alineado y prepárate para no solo aprender el color, sino verlo de verdad.