en , exploramos los principios fundamentales de la corrección del color y explicamos la importancia de trabajar con los colores al editar imágenes. y Los colores, así como el proceso de de imágenes y utilizarlas para crear estilos visuales únicos. La primera parte de esta serie RGB LAB extracting palettes Como vimos en el artículo anterior, algunos colores y paletas se mostraron de manera diferente de lo que inicialmente esperábamos. Esto se debe al hecho de que usamos las herramientas más simples: el modelo RGB y el cálculo de distancia Euclidiana. Pero primero, un poco de teoría. The RGB Model Los dos modelos de colores más populares - y son fundamentalmente diferentes en la forma en que representan y procesan los colores. RGB LAB El El modelo utiliza el , de , y canales para representar colores. Cada canal puede tener valores que van desde 0 a 255, resultando en más de 16 millones de colores posibles. Este modelo es ideal para trabajar con imágenes mostradas en pantallas, ya que los monitores de ordenador, televisores y teléfonos inteligentes utilizan todos este modelo. RGB Red Green Blue RGB Key Features: y y y y Utiliza un proceso aditivo donde los colores se crean combinando la luz roja, verde y azul. Es más fácil de entender y procesar a nivel de píxeles. Es limitado en su capacidad de representar todos los colores con precisión, ya que no cuenta con la percepción humana del color. The LAB Model El El modelo representa el color en tres canales: , de , y Este modelo está más cerca de cómo los humanos perciben el color y es responsable tanto del color como del brillo de una imagen. LAB L (lightness) A (a color spectrum from green to red) B (a color spectrum from blue to yellow) LAB Key Features: y y y 
 El canal L controla el brillo, permitiendo ajustes de brillo sin cambiar el color. Los canales A y B describen tonos de color, permitiendo un control más preciso sobre un amplio espectro de colores. El modelo LAB es especialmente útil en la clasificación de color profesional ya que es más versátil y permite ajustes de color precisos sin afectar a otros parámetros de la imagen. En el modelo LAB, el brillo se separa del color, lo que permite ajustar los parámetros visuales de una imagen sin afectar su equilibrio de colores. Color Calculation Algorithm and Using LAB Para calcular y aplicar colores, nuestra aplicación utiliza el La integración de esta biblioteca en el proyecto nos permite realizar cálculos precisos que ayudan a lograr los resultados deseados al procesar imágenes. colorjs.io Aquí está un ejemplo del código utilizado en nuestra aplicación para trabajar con los colores en el modelo LAB: // Sample code for using colorjs.io in LAB model
const findClosestColor = (r, g, b) => {
  if (mode === "lab") {
    const color1 = new Color({ coords: [r / 255, g / 255, b / 255], space: "srgb" }).to("lab");
    let minDist = Infinity;
    let closest = [r, g, b];
    for (let i = 0; i < paletteLAB.length; i++) {
      const color2 = paletteLAB[i];
      const dist = color1.distance(color2);  // Calculating the distance between colors in LAB space
      if (dist < minDist) {
        minDist = dist;
        closest = palette[i];
      }
    }
    return closest;
  } else {
    // RGB calculations
    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;
  }
};
 Este bloque de código maneja el proceso de encontrar el color más cercano en una paleta dada calculando la distancia de color entre el color objetivo y los colores en la paleta. o . el RGB LAB How This Works in Practice: y y y Modo LAB: El espacio de color LAB está diseñado para alinearse con la visión humana, separando el brillo (L) de los componentes cromáticos (A y B). Cuando se ajustan los colores en LAB, el algoritmo asegura que los colores se comparen de una manera perceptualmente precisa, lo que significa que prioriza cómo percibimos las diferencias de color, no sólo la diferencia matemática RGB. Modo RGB: El espacio de color RGB simplemente representa el color por la intensidad de la luz roja, verde y azul. En este modo, la distancia se calcula directamente en función de los valores de color, lo que puede conducir a una menor precisión perceptiva, ya que no cuenta con los matices de la percepción del color humana. En la clasificación profesional de colores y el procesamiento de imágenes, el ajuste de colores basado en es muy ventajoso porque imita cómo el ojo humano percibe los colores, permitiendo resultados más naturales y visualmente atractivos.Utilizando este método, la aplicación puede lograr una mejor consistencia cuando se aplican paletas de colores a las imágenes, lo que facilita la combinación de colores con los estilos deseados. LAB Optimization Challenge: LAB Computation Trabajando con la El modelo de color requiere significativamente más recursos computacionales que trabajar con Esto se debe a que, en LAB, cada color es representado no sólo por tres canales (RGB), sino que también implica cálculos adicionales para obtener las coordenadas de color y sus distancias. LAB RGB Para optimizar este proceso, hemos introducido para evitar cálculos redundantes. paletas creadas en los modos se almacenan en la memoria, y si la imagen no ha cambiado, el sistema no recalculará la paleta. Esto ayuda a acelerar significativamente el proceso, especialmente cuando se aplican paletas a varias imágenes, reutilizando los datos precompuestos sin tener que realizar los costosos cálculos de nuevo. palette caching LAB // Optimization with palette caching
const extractPalette = () => {
  if (!image || image === lastExtractedImageRef.current) return;  // Check for changes

  const img = new Image();
  img.src = image;
  img.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    const colorMap = new Map();

    // Creating a color map
    for (let i = 0; i < imageData.length; i += 4) {
      const key = `${imageData[i]},${imageData[i + 1]},${imageData[i + 2]}`;
      colorMap.set(key, (colorMap.get(key) || 0) + 1);
    }

    const sorted = Array.from(colorMap.entries()).sort((a, b) => b[1] - a[1]);
    const topRaw = sorted.map(([str]) => str.split(",").map(Number));
    const topColors = filterColors(topRaw).slice(0, 10);

    const randomId = Math.floor(10000 + Math.random() * 90000);
    const name = `Palette_${randomId}`;

    setPalettes(prev => ({ ...prev, [name]: topColors }));
    setSelectedPalette(name);
    lastExtractedImageRef.current = image;  // Saving cache
  };
};
 Esta mejora ayuda a acelerar el rendimiento de la aplicación, especialmente cuando se procesan varias imágenes similares repetidamente. Palette Extraction and Application La extracción de paletas es el proceso de identificar los colores más característicos y vibrantes de una imagen, que luego se pueden utilizar para crear filtros o estilos visuales. El color y su apariencia , asegurándose de que la paleta no incluya colores que sean demasiado similares entre sí. frequency luminance El mecanismo principal para la extracción de la paleta es el siguiente: const extractPalette = () => {
  // Check for image changes
  if (!image || image === lastExtractedImageRef.current) return;

  const img = new Image();
  img.src = image;
  img.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    const colorMap = new Map();

    // Counting the frequency of occurrence of each color
    for (let i = 0; i < imageData.length; i += 4) {
      const key = `${imageData[i]},${imageData[i + 1]},${imageData[i + 2]}`;
      colorMap.set(key, (colorMap.get(key) || 0) + 1);
    }

    // Sorting by frequency and filtering similar colors
    const sorted = Array.from(colorMap.entries()).sort((a, b) => b[1] - a[1]);
    const topRaw = sorted.map(([str]) => str.split(",").map(Number));
    const topColors = filterColors(topRaw).slice(0, 10);  // Segmentation and filtering

    const randomId = Math.floor(10000 + Math.random() * 90000);
    const name = `Palette_${randomId}`;

    // Saving the palette
    setPalettes(prev => ({ ...prev, [name]: topColors }));
    setSelectedPalette(name);
    lastExtractedImageRef.current = image;
  };
};
 Este código se utiliza para extraer una paleta de una imagen, donde los colores se filtran por brillo y diferencia. Hemos añadido la generación automática de nombres para las paletas extraídas para evitar confundir la interfaz de usuario con botones innecesarios. Custom Palettes Una de las herramientas de nuestra aplicación es el bloque de creación de paletas personalizadas.Esta característica permite a los usuarios crear paletas adecuadas para diversos proyectos, proporcionando un control completo sobre los colores. El proceso comienza con la selección de un color a través del El usuario puede elegir un color de la imagen o de una fuente externa. Cada color seleccionado se agrega automáticamente a la lista de colores del usuario, de la cual se crea una paleta. HexColorPicker Después de seleccionar algunos colores, la paleta se puede guardar con un nombre personalizado. Más tarde, se puede aplicar a la imagen cargada para lograr un estilo visual específico. Color Neutralization with Color Palettes Neutralización de colores con paletas de colores Es un aspecto importante de desempeña un papel crítico en Es el proceso en el que las escenas o capturas individuales, tomadas bajo diferentes condiciones de iluminación, pueden ser llevadas a un tono de color común. Esto se hace generalmente para asegurar un estilo visual unificado a lo largo de la película y para hacer las escenas visualmente consistentes, independientemente de las condiciones de filmación. Color neutralization color grading film post-production Exploremos cómo se aplican las paletas a través de dos ejemplos icónicos de lenguaje visual cinematográfico. Palettes in the Movie “The Matrix” The film  (1999), dirigida por los hermanos Wachowski, se hizo icónica debido a su estilo visual único, que incluye una paleta de colores verdes específicos. Este estilo de color fue diseñado para visualizar la realidad digital en la que existen los personajes principales.Los efectos visuales de la película fueron creados para transmitir la sensación de virtualidad, donde predominan los colores fríos y mecánicos. “The Matrix” Verde, negro y metálico. Main Colors Palette Application: y y 
 Extraer tonos verdes: Para crear una paleta de estilo Matrix, podemos extraer todos los tonos de verde, negro y gris de la imagen. Al aplicar estos tonos, podemos lograr el efecto "realidad digital" característico de la película. En nuestra aplicación, esto se puede hacer filtrando por brillo y distancia, manteniendo solo los tonos verdes e ignorando a otros. Aplicar a Nuevas Imágenes: Cuando aplicamos esta paleta, los colores de la imagen cambiarán, reemplazando todos los píxeles con los más cercanos a los colores seleccionados de la paleta, creando así el estilo deseado “codificado”. Palettes in Wes Anderson’s Works es conocido por sus soluciones visuales vivas, coloridas y simétricas. y y Todos tienen su estilo de firma, que cuenta con ricos colores pastel y paletas cuidadosamente seleccionadas.Un elemento clave de sus películas es la armonía y el contraste en el diseño de colores. Wes Anderson “The Grand Budapest Hotel”, “Moonrise Kingdom”, “The French Dispatch”, : Tones pastel, colores contrastantes brillantes, rojo, amarillo, turquesa, verde. Main Colors Palette Application: y y y Extraer tonos pastel: En las películas de Wes Anderson, los colores pastel se utilizan a menudo. Por ejemplo, tonos rosa, azul y naranja. Podemos extraer estos colores y aplicarlos a una nueva imagen para crear un efecto que se asemeje a la fotografía vintage o para enfatizar una atmósfera estilizada. En nuestra aplicación, podemos extraer la paleta de una imagen filtrando los colores por brillo y contraste, conservando sólo los tonos pastel suaves. Aplicar a Nuevas Imágenes: Después de extraer la paleta, se puede aplicar a cualquier imagen, dándole el aspecto característico que recuerda a las obras de Anderson, con colores brillantes pero armoniosos. Ahora que podemos extraer paletas de las referencias, es hora de experimentar! Dado que estamos utilizando paletas limitadas en el número de colores y ejecutando nuestra aplicación en el navegador (lo que significa usar recursos de cálculo limitados), no debemos esperar resultados sobresalientes. Aquí hay ejemplos de imágenes procesadas en los modos RGB y LAB. Extraer y aplicar paletas es un aspecto crucial de la creación de estilos visuales, como el estilo “Matrix”, de Wes Anderson o de Denis Villeneuve. Nuestra aplicación proporciona una herramienta visual para trabajar con colores que permite a los usuarios extraer paletas, aplicarlas y crear efectos visuales únicos. En la parte final, nos centraremos en el ajuste y la optimización de los colores.

Read My Stories

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

Demasiado Largo; Para Leer

Make resilience your competitive advantage

Esta herramienta de color convierte cualquier imagen en un sueño de fiebre de Wes Anderson

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

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

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

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

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps