This Color Tool Turns Any Image Into a Wes Anderson Fever Dream

In the first part of this series, we explored the foundational principles of color correction and explained the importance of working with colors when editing images. In this second part, we dive into more advanced concepts, such as the differences between the RGB and LAB color models, as well as the process of extracting palettes from images and using them to create unique visual styles. the first part of this series RGB LAB extracting palettes As we saw in the previous article, some colors and palettes displayed differently than we initially expected. This is due to the fact that we used the simplest tools — the RGB model and Euclidean distance calculation. For more advanced processes, however, we need something a little more sophisticated. But first, a bit of theory. The RGB Model The RGB Model The two most popular color models — RGB and LAB — are fundamentally different in how they represent and process colors. RGB LAB The RGB model uses the Red, Green, and Blue channels to represent colors. Each channel can have values ranging from 0 to 255, resulting in over 16 million possible colors. This model is ideal for working with images displayed on screens, as computer monitors, TVs, and smartphones all use this model. RGB Red Green Blue RGB Key Features: RGB Key Features: It uses an additive process where colors are created by combining red, green, and blue light. It’s simpler to understand and process at the pixel level. It’s limited in its ability to represent all colors accurately, as it does not account for human perception of color. It uses an additive process where colors are created by combining red, green, and blue light. It’s simpler to understand and process at the pixel level. It’s limited in its ability to represent all colors accurately, as it does not account for human perception of color. The LAB Model The LAB Model The LAB model represents color in three channels: L (lightness), A (a color spectrum from green to red), and B (a color spectrum from blue to yellow). This model is closer to how humans perceive color and accounts for both the color and the brightness of an image. LAB L (lightness) A (a color spectrum from green to red) B (a color spectrum from blue to yellow) LAB Key Features: LAB Key Features: The L channel controls the brightness, allowing lightness adjustments without changing the color. The A and B channels describe color hues, allowing more precise control over a wide spectrum of colors. The LAB model is especially useful in professional color grading since it’s more versatile and allows for precise color adjustments without affecting other image parameters. The L channel controls the brightness, allowing lightness adjustments without changing the color. The L channel controls the brightness, allowing lightness adjustments without changing the color. L The A and B channels describe color hues, allowing more precise control over a wide spectrum of colors. The A and B channels describe color hues, allowing more precise control over a wide spectrum of colors. A B The LAB model is especially useful in professional color grading since it’s more versatile and allows for precise color adjustments without affecting other image parameters. The LAB model is especially useful in professional color grading since it’s more versatile and allows for precise color adjustments without affecting other image parameters. In the LAB model, brightness is separated from color, making it possible to adjust the visual parameters of an image without impacting its color balance. This results in more accurate and natural color corrections. Color Calculation Algorithm and Using LAB Color Calculation Algorithm and Using LAB To calculate and apply colors, our application utilizes the colorjs.io library, which efficiently works with colors in the LAB model. Integrating this library into the project allows us to perform accurate calculations that help achieve the desired results when processing images. colorjs.io Here’s an example of the code used in our app to work with colors in the LAB model: // 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 { 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; } }; This block of code handles the process of finding the closest color in a given palette by calculating the color distance between the target color and the colors in the palette. The calculation method is based on the selected mode, either RGB or LAB. RGB LAB How This Works in Practice: How This Works in Practice: LAB Mode: The LAB color space is designed to align with human vision, separating brightness (L) from chromatic components (A and B). When matching colors in LAB, the algorithm ensures that the colors are compared in a perceptually accurate manner, meaning it prioritizes how we perceive color differences, not just the mathematical RGB difference. RGB Mode: The RGB color space simply represents color by the intensity of red, green, and blue light. In this mode, the distance is calculated directly based on the color values, which can lead to less perceptual accuracy, as it doesn’t account for human color perception nuances. LAB Mode: The LAB color space is designed to align with human vision, separating brightness (L) from chromatic components (A and B). When matching colors in LAB, the algorithm ensures that the colors are compared in a perceptually accurate manner, meaning it prioritizes how we perceive color differences, not just the mathematical RGB difference. LAB Mode: The LAB color space is designed to align with human vision, separating brightness (L) from chromatic components (A and B). When matching colors in LAB, the algorithm ensures that the colors are compared in a perceptually accurate manner, meaning it prioritizes how we perceive color differences, not just the mathematical RGB difference. LAB Mode RGB Mode: The RGB color space simply represents color by the intensity of red, green, and blue light. In this mode, the distance is calculated directly based on the color values, which can lead to less perceptual accuracy, as it doesn’t account for human color perception nuances. RGB Mode: The RGB color space simply represents color by the intensity of red, green, and blue light. In this mode, the distance is calculated directly based on the color values, which can lead to less perceptual accuracy, as it doesn’t account for human color perception nuances. RGB Mode In professional color grading and image processing, matching colors based on LAB is highly advantageous because it mimics how the human eye perceives colors, allowing for more natural and visually appealing results. Using this method, the application can achieve better consistency when applying color palettes to images, making it easier to match colors to desired styles. LAB Optimization Challenge: LAB Computation Optimization Challenge: LAB Computation Working with the LAB color model requires significantly more computational resources than working with RGB. This is because, in LAB, each color is represented not just by three channels (RGB), but also involves additional calculations to obtain the color coordinates and their distances. LAB RGB To optimize this process, we introduced palette caching to avoid redundant calculations. Palettes created in LAB mode are stored in memory, and if the image has not changed, the system will not recalculate the palette. This helps to significantly speed up the process, especially when applying palettes to multiple images, by reusing the precomputed data without having to perform the costly calculations again. 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 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 }; }; // 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 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 }; }; This improvement helps speed up the application’s performance, especially when processing multiple similar images repeatedly. Palette Extraction and Application Palette Extraction and Application Palette extraction is the process of identifying the most characteristic and vibrant colors from an image, which can then be used to create filters or visual styles. We extract the top-10 colors (ensuring diversity) using an algorithm that takes into account both the frequency of color occurrence and its luminance, ensuring that the palette doesn’t include colors that are too similar to each other. frequency luminance The main mechanism for extracting the palette is as follows: 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 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; }; }; 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 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; }; }; This code is used to extract a palette from an image, where colors are filtered by brightness and difference. With this mechanism, you can quickly gather the most representative colors for further application. We added automatic name generation for extracted palettes to avoid cluttering the user interface with unnecessary buttons. Custom Palettes Custom Palettes One of the tools in our application is the custom palette creation block. This feature allows users to create palettes suitable for various projects, providing full control over colors. The process starts with selecting a color through the HexColorPicker interface. The user can choose a color from the image or an external source. Each selected color is automatically added to the user’s color list, from which a palette is created. HexColorPicker After selecting a few colors, the palette can be saved with a custom name. Later, it can be applied to the uploaded image to achieve a specific visual style. Color Neutralization with Color Palettes Color Neutralization with Color Palettes Color neutralization is an important aspect of color grading and plays a critical role in film post-production. It is the process where individual scenes or shots, taken under different lighting conditions, can be brought to a common color tone. This is usually done to ensure a unified visual style throughout the film and to make the scenes visually consistent, regardless of the shooting conditions. Color neutralization color grading film post-production Let’s explore how palettes are applied through two iconic examples of cinematic visual language. Palettes in the Movie “The Matrix” Palettes in the Movie “The Matrix” The film “The Matrix” (1999), directed by the Wachowski siblings, became iconic due to its unique visual style, which includes a specific greenish color palette. This color style was designed to visualize the digital reality in which the main characters exist. The visual effects of the film were created to convey the feeling of virtuality, where cold and mechanical colors dominate. “The Matrix” Main Colors: Green, black, metallic. Main Colors Palette Application: Palette Application: Extracting Green Tones: To create a Matrix-style palette, we can extract all shades of green, black, and gray from the image. By applying these tones, we can achieve the “digital reality” effect characteristic of the movie. In our app, this can be done by filtering by brightness and distance, keeping only the green shades and ignoring others. Applying to New Images: When we apply this palette, the image colors will change, replacing all pixels with those closest to the selected colors from the palette, thus creating the desired “coded” style. Extracting Green Tones: To create a Matrix-style palette, we can extract all shades of green, black, and gray from the image. By applying these tones, we can achieve the “digital reality” effect characteristic of the movie. In our app, this can be done by filtering by brightness and distance, keeping only the green shades and ignoring others. Extracting Green Tones: To create a Matrix-style palette, we can extract all shades of green, black, and gray from the image. By applying these tones, we can achieve the “digital reality” effect characteristic of the movie. Extracting Green Tones Matrix In our app, this can be done by filtering by brightness and distance, keeping only the green shades and ignoring others. filtering by brightness distance Applying to New Images: When we apply this palette, the image colors will change, replacing all pixels with those closest to the selected colors from the palette, thus creating the desired “coded” style. Applying to New Images: When we apply this palette, the image colors will change, replacing all pixels with those closest to the selected colors from the palette, thus creating the desired “coded” style. Applying to New Images Palettes in Wes Anderson’s Works Palettes in Wes Anderson’s Works Wes Anderson is known for his vivid, colorful, and symmetrical visual solutions. His works, such as “The Grand Budapest Hotel”, “Moonrise Kingdom”, and “The French Dispatch”, all have his signature style, which features rich pastel colors and carefully selected palettes. One key element of his films is the harmony and contrast in color design. Wes Anderson “The Grand Budapest Hotel”, “Moonrise Kingdom”, “The French Dispatch”, Main Colors: Pastel shades, bright contrasting colors, red, yellow, turquoise, green. Main Colors Palette Application: Palette Application: Extracting Pastel Shades: In Wes Anderson’s films, pastel colors are often used. For example, light pink, blue, and orange tones. We can extract these colors and apply them to a new image to create an effect resembling vintage photography or to emphasize a stylized atmosphere. In our app, we can extract the palette from an image by filtering colors by brightness and contrast, preserving only the soft pastel shades. Applying to New Images: After the palette is extracted, it can be applied to any image, giving it the characteristic look reminiscent of Anderson’s works, with bright yet harmonious colors. Extracting Pastel Shades: In Wes Anderson’s films, pastel colors are often used. For example, light pink, blue, and orange tones. We can extract these colors and apply them to a new image to create an effect resembling vintage photography or to emphasize a stylized atmosphere. In our app, we can extract the palette from an image by filtering colors by brightness and contrast, preserving only the soft pastel shades. Extracting Pastel Shades: In Wes Anderson’s films, pastel colors are often used. For example, light pink, blue, and orange tones. We can extract these colors and apply them to a new image to create an effect resembling vintage photography or to emphasize a stylized atmosphere. Extracting Pastel Shades In our app, we can extract the palette from an image by filtering colors by brightness and contrast, preserving only the soft pastel shades. Applying to New Images: After the palette is extracted, it can be applied to any image, giving it the characteristic look reminiscent of Anderson’s works, with bright yet harmonious colors. Applying to New Images: After the palette is extracted, it can be applied to any image, giving it the characteristic look reminiscent of Anderson’s works, with bright yet harmonious colors. Applying to New Images Now that we can extract palettes from references, it’s time for some experimentation! Since we are using palettes limited in the number of colors and running our application in the browser (which means using limited computational resources), we shouldn’t expect outstanding results. However, this is enough to demonstrate the core principles of how palettes work in color grading. Here are examples of processed images in both RGB and LAB modes. Extracting and applying palettes is a crucial aspect of creating visual styles, such as the “Matrix” style, Wes Anderson’s, or Denis Villeneuve’s. Our app provides a visual tool for working with colors that allows users to extract palettes, apply them, and create unique visual effects. With it, you can easily stylize images and create visual looks similar to those seen in popular films. In the final part, we will focus on fine-tuning and optimizing colors.