y y ¿Por qué el Joker se siente tan inquietante verde y amarillo? Why does   feel so unsettlingly green and yellow? Joker Joker y y ¿Por qué Blade Runner está inmerso en teal y naranja? Why is   soaked in teal and orange? Blade Runner El Blade Runner y y ¿Por qué la película hace que la piel se vea suave y caliente? 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. . el Comienza con los objetivos de color, la calibración y las paletas cuidadosamente seleccionadas En esta serie vamos a explorar: y y y y y 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. Y podrás experimentar, tinker, y quizás por primera vez realmente ¿De qué color está hecha la grabación? No lo vamos a explicar, lo vamos a mostrar. see What is Color Grading, and Why Start with Color Targets? ¿Qué es la clasificación de colores y por qué empezar con los objetivos de color? 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 y y y equilibrar la exposición y el punto blanco; corrección de los cambios técnicos de color; Diseñar un estilo visual con contraste, tonos y curvas de color. 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 un lo que significa: neutral state y y y y Corrección de los colores no deseados (corrección de colores). normalizar la grabación a un espacio de color estándar (como Rec.709 o sRGB); combinación de material de diferentes cámaras en una base consistente. Para ello, los coloristas utilizan Como el * , de ,** u otros gráficos de referencia. color targets Coleccionista ChromaMundo Un objetivo de color es un gráfico de parches de color con Estos 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. Valores precisos medidos . Espectrógrafos Konica Minolta Espectrógrafos Konica Minolta Uno de los primeros objetivos adoptados fue el de — 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 el , introducido en 1976 (ahora conocido como el Dispone de 24 swatches de colores diseñados para representar colores comunes del mundo real: piel humana, cielo azul, follaje verde, y más. Especificaciones Kodak Gray Scale Macbeth ColorChecker X-Rite ColorChecker Especificaciones Kodak Gray Scale 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 (normalmente o ), con los resultados registrados en - un modelo de color independiente del dispositivo. Estas coordenadas se convierten en , dependiendo de su espacio de color de trabajo (como , de , o ) de D65 D50 CIE XYZ coordinates RGB values sRGB Rec.709 AdobeRGB 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. No cuentan con: Un comienzo y y y y Cómo se comportan los colores en las luces o sombras; las características únicas de la película o de las lentes; o la intención creativa detrás de una mirada particular. Con herramientas profesionales como o , 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. DaVinci resuelve Defensores a chart is a calibration tool — not a style. DaVinci resuelve Defensores CinePalette: A Minimal Tool for Exploring Color Palettes 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 - una aplicación web simple que visualiza lo que sucede cuando restringe su espacio de color (un proceso conocido como ) de CinePalette Reducción de paleta What You Can Do with CinePalette: y y y y y y y cargar cualquier imagen; elija una paleta (ColorChecker, Portra, Sepia, etc.); remapa cada píxel al color más cercano en esa paleta; comparar antes y después con un deslizador interactivo; save the result; or build your own palette from scratch. How It Works in Code Nuestra aplicación se ejecuta íntegramente en el navegador utilizando Y el El proyecto - llamado — será de código abierto y disponible en GitHub (enlace al final de la serie). React Canvas API CinePalette Empezamos con un conjunto de paletas predefinidas, pero los usuarios también pueden construir y guardar sus propias paletas. La paleta parece: 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
],
 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 y y y y La imagen se renderiza a un <canvas> oculto - esto nos da acceso a nivel de píxel para manipular los datos. Extraemos el objeto ImageData, que contiene una matriz donde cada píxel es representado por cuatro valores: [R, G, B, A]. Pasamos por cada píxel, extrayendo su color RGB. 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. 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 analiza y encuentra el de la paleta seleccionada: each individual pixel closest 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;
};
 Luego, reemplazamos el color original del píxel en ImageData por el más cercano a la paleta. en la imagen. 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;
}
 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(). Descarga la imagen filtrada con un solo clic. see the result instantly in the browser ctx.putImageData(imageData, 0, 0);
setFilteredImage(canvas.toDataURL());
 Aquí, utilizamos - un método clásico para medir lo "cerca" de dos colores son: Euclidean distance in RGB space 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. dentro de la paleta seleccionada. closest visual match Este enfoque es intuitivo y fácil de implementar, pero tiene limitaciones: 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 Sin embargo, incluso en su forma actual, puede notar que algunos colores se reemplazan de maneras que se sienten inesperadas o "desactivadas". CinePalette En futuras versiones, planeamos añadir un cambio entre espacios de color, permitiendo a los usuarios comparar cómo diferentes modelos afectan la precisión de la combinación de colores. RGB and CIELAB Why Does This Matter? ¿Por qué esto importa? CinePalette presenta un paso básico pero fundamental en la clasificación del color: Aquí es donde cada estilo visual comienza – con la pregunta: palette restriction “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? ¿Qué es lo siguiente? Este es sólo el comienzo.En las siguientes partes de la serie: y y y y y ampliaremos CinePalette con la posibilidad de seleccionar una paleta de una imagen de referencia; agregar la extracción automática de esquemas de colores de cualquier marco o foto; introducir un cambio entre RGB y LAB para una correspondencia más precisa perceptualmente; y descomponer cómo funciona la armonía de colores - y cómo se puede usar en la clasificación del mundo real. Manténgase alineado y prepárate para no solo aprender el color, sino verlo de verdad. Vía

Read My Stories

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Una breve introducción a la teoría del cerebro de Boltzmann

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Una breve introducción a la teoría del cerebro de Boltzmann

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps