que que Por que o Joker se sente tan inquietante verde e amarelo? Why does   feel so unsettlingly green and yellow? Joker Xogadores que que Por que Blade Runner está inmerso en teal e laranxa? Why is   soaked in teal and orange? Blade Runner Blade Runner Páxina que que Por que a película fai que a pel se vexa suave e quente? 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 que que que que 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. E vai ser capaz de experimentar, tinker, e quizais por primeira vez realmente de que cor está feita. Non imos simplemente explicalo, imos amosalo. see What is Color Grading, and Why Start with Color Targets? ¿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. que que 
 que equilibrar a exposición e o punto branco; corrección de cambios técnicos de cor; Desenvolver un estilo visual con contrastes, tons e curvas de cores. 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 a O que significa: neutral state que que que que Corrección de cores non desexadas (corrección de cores). normalización da imaxe a un espazo de cores estándar (como Rec.709 ou sRGB); combinar o material de diferentes cámaras nunha base consistente. E para iso, os coloristas usan como o * , ,** ou outros gráficos de referencia. color targets Coleccionista ChromaMundo Un obxectivo de cor é un gráfico de patches de cor con Estes 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. Valores medidos con precisión . Espectrofotómetros Konica Minolta Espectrofotómetros Konica Minolta Unha das primeiras medidas adoptadas foi a - 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 o , introducido en 1976 (agora coñecido como o Dispó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. Categoría: Kodak Gray Scale Macbeth ColorChecker X-Rite ColorChecker Categoría: Kodak Gray Scale 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 (normalmente ou ), con resultados rexistrados en - un modelo de cores independente do dispositivo. Estas coordenadas son convertidas en , dependendo do seu espazo de cor de traballo (como , ou ) da D65 D50 CIE XYZ coordinates RGB values sRGB Rec.709 AdobeRGB 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. Non contan con: Unha comezo. que que que que 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 dunha mirada particular. Ferramentas profesionais como ou , 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. Da Vinci Resolve Defensores a chart is a calibration tool — not a style. Da Vinci Resolve Defensores CinePalette: A Minimal Tool for Exploring Color Palettes CinePalette: unha ferramenta mínima para explorar as paletas de cores Para mostrar como a elección dunha paleta afecta a unha imaxe, construímos unha simple aplicación web que visualiza o que sucede cando restrinxe o seu espazo de cores (un proceso coñecido como ) da CinePalette Redución da paleta What You Can Do with CinePalette: que que que que que que que cargar calquera imaxe; escoller unha paleta (ColorChecker, Portra, Sepia, etc.); remapa cada píxel á cor máis próxima nesa paleta; comparar antes e despois cun deslizador interactivo; gardar o resultado; ou construír a súa propia paleta desde cero. How It Works in Code A nosa aplicación funciona enteiramente no navegador usando e o O proxecto - chamado — será de código aberto e dispoñible en GitHub (enlace ao final da serie). React Canvas API CinePalette Comezamos cun conxunto de paletas predefinidas, pero os usuarios tamén poden construír e gardar as súas propias. A 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
],
 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 que que que que A imaxe é renderizada a un <canvas> oculto, o que nos dá acceso a nivel de píxeles para manipular os datos. Extraemos o obxecto ImageData, que contén unha matriz onde cada píxel está representado por catro valores: [R, G, B, A]. Loquemos a través de cada píxel, extraendo a súa cor RGB. 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. 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 analiza e atopa o A partir da 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;
};
 A continuación, substituímos a cor orixinal do píxel no ImageData pola máis próxima da paleta. na súa imaxe. 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;
}
 Despois de que todos os píxeles teñan sido procesados, devolvemos o resultado ao <canvas> e convertémolo nunha imaxe usando .toDataURL(). - e descargar a imaxe filtrada cun só clic. see the result instantly in the browser ctx.putImageData(imageData, 0, 0);
setFilteredImage(canvas.toDataURL());
 Aquí, usamos — un método clásico para medir o “cerca” de dúas cores son: Euclidean distance in RGB space 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. dentro da paleta seleccionada. closest visual match Este enfoque é intuitivo e fácil de implementar, pero ten limitacións: 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 as cores Utilizamos este enfoque para Non obstante, mesmo na súa forma actual, pode notar que algunhas cores son substituídas de formas que se senten inesperadas ou "desactivadas". CinePalette En futuras versións, planeamos engadir unha ligazón entre Espazos de cores: permiten aos usuarios comparar como diferentes modelos afectan á precisión da correspondencia de cores. RGB and CIELAB Why Does This Matter? Por que iso importa? CinePalette presenta un paso básico pero fundamental na clasificación de cores: Aquí é onde cada estilo visual comeza - coa pregunta: palette restriction “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? Que é o seguinte? Este é só o comezo, nas seguintes páxinas: que que que que que we’ll expand   with the ability to pick a palette from a reference image; CinePalette engade a extracción automática de esquemas de cores de calquera marco ou foto; introducir un cambio entre RGB e LAB para unha correspondencia máis precisa perceptualmente; e romper como funciona a harmonía de cores - e como pode usalo na clasificación do mundo real. Manteña-se axustado - e estar preparado para non só aprender a cor, pero realmente velo. Vexa

Read My Stories

Este audio está producido na lingua orixinal da historia!

Demasiado longo; Ler

Make resilience your competitive advantage

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

About Author

COMENTARIOS

Etiquetas colgantes

ESTE ARTIGO FOI PRESENTADO EN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Media Community!

HackerNoon Decoded 2024: Celebrating Our Society Community!

R Systems Blogbook—Chapter 1 is Now Open for Submissions🎉

HackerNoon Decoded 2024: Celebrating Our Gaming Community!

HackerNoon Decoded 2024: Celebrating Our Media Community!

HackerNoon Decoded 2024: Celebrating Our Society Community!

R Systems Blogbook—Chapter 1 is Now Open for Submissions🎉

HackerNoon Decoded 2024: Celebrating Our Gaming Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps