DEV Community: Nailya Safarova

This Web App Turns Any Image Into a Retro Fever Dream—No Photoshop Needed

Nailya Safarova — Mon, 28 Apr 2025 09:29:05 +0000

In our previous tutorial, we taught our application to work with references and palettes. Now, it’s time to add more options for fine-tuning color and visual effects.

We will introduce a few new tools that allow for more flexible image manipulation. Additionally, we will explore a new color model, HSV, which works with colors differently than RGB and LAB. This model makes it easier to manipulate characteristics like hue, saturation, and lightness, which makes it particularly useful for adjusting colors in images. This innovation will open up new creative possibilities and opportunities for experimentation.

The full project code is available at this link.

Adjusting the Number of Colors in the Extracted Palette

We’ve already seen how limiting a palette can alter the appearance of an image.

For more flexible filter and image processing adjustments, we will add the ability to control the number of colors extracted from the image. Now, you can precisely set how many colors are highlighted in the image, allowing for better control over visual effects. This feature is especially useful when working with palettes for creating filters, as changing the number of colors applies to a wide range of design tasks.

The app now features a slider that lets you choose the number of colors extracted from the image (from 10 to 20). This adjustment impacts the filter results and helps achieve better visual effects.

<div style={{ marginBottom: 12 }}>
  <label>Number of Colors</label>
  <input
    type="range"
    min="10"
    max="20"
    value={colorCount}
    onChange={(e) => setColorCount(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>

We will be experimenting with the stunning photograph by So Sasaki for Void Tokio. It features a wide range of colors and shades, making it the perfect subject for our exploration.

Below you can compare what the image looks like with a palette of different sizes.

Filter Intensity Slider

To make the filtering process more flexible, we will add a slider to control the intensity of the palette application to the image. This slider allows you to adjust the balance between the original image and the palette.

Simply choose the desired filter intensity and click “Apply filter”.

<div style={{ marginBottom: 16 }}>
  <label style={{ display: "block", marginBottom: 6 }}>Filter Intensity</label>
  <input
    type="range"
    min="0"
    max="100"
    value={intensity}
    onChange={(e) => setIntensity(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>

How does it work?

When the intensity is set to 100%, the image will be fully transformed using the colors from the selected palette. The lower the intensity value, the less influence the palette has on the image, allowing you to maintain more of the original colors.

HSV Color Model

HSV (Hue, Saturation, Value) is one of the most popular color models, often used to represent color in terms of its hue, saturation, and brightness.

Hue (color): This represents the primary color (such as red, green, blue, etc.), measured in degrees from 0 to 360.
Saturation: This indicates the intensity of the color. Saturation is affected by the amount of gray in the color: 100% is a fully saturated color, and 0% is gray.
Value (brightness): This represents how bright the color is. A value of 0% gives black, while 100% is the brightest version of the color.

Differences from RGB and LAB:

Unlike RGB, where colors are combined based on the intensities of red, green, and blue, HSV is based on human visual perception. This makes it more intuitive for tasks like color correction and design work.
Compared to LAB, which uses a more complex mathematical model for precise color representation across different lighting conditions, HSV is more intuitive and user-friendly.

Sample code for converting RGB to HSV:

function rgbToHsv(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  let h = 0, s = 0, v = max;

  if (delta !== 0) {
    s = delta / max;
    if (r === max) {
      h = (g - b) / delta;
    } else if (g === max) {
      h = 2 + (b - r) / delta;
    } else {
      h = 4 + (r - g) / delta;
    }
    h *= 60;
    if (h < 0) h += 360;
  }

  return [h, s * 100, v * 100];
}

Below are examples of images in the same palette, but in different color models.

Contrast Slider

Contrast refers to the difference between the lightest and darkest points in an image. Adjusting the contrast allows you to either enhance or reduce this difference. The higher the contrast, the more pronounced the light and dark areas will be.

How does contrast adjustment work?

When contrast is increased, the dark areas of the image become even darker, and the light areas become even brighter. This effect can make the image appear more vivid and sharp, enhancing its visual impact.

Example code for changing contrast:

const applyContrast = (r, g, b, contrast) => {
  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
  r = contrastFactor * (r - 128) + 128;
  g = contrastFactor * (g - 128) + 128;
  b = contrastFactor * (b - 128) + 128;
  return [r, g, b];
};

Algorithm Description:

The contrast algorithm uses a factor that depends on the current contrast value. This factor is applied to each color component (red, green, and blue), adjusting their brightness based on the contrast level.

Noise Slider

For those who want to have a little fun, we’ve added a noise slider. Adding noise to an image helps create a vintage photo effect or makes the image feel more “alive”. This effect is used to conceal imperfections or add an artistic touch to the image.

How does the noise work?

The noise slider allows you to control the amount of random variations applied to the color of each pixel in the image. The higher the noise value, the greater the amount of random changes applied to the image.

When noise is added to an image, small, random variations are introduced to the RGB values of each pixel, resulting in a grainy effect. This effect can be subtle or pronounced, depending on the amount of noise applied. This can help give the image a more textured look or simulate the appearance of an old, low-resolution photo.

const applyNoise = (r, g, b, noise) => {
  r += Math.random() * noise - noise / 2;
  g += Math.random() * noise - noise / 2;
  b += Math.random() * noise - noise / 2;
  return [r, g, b];
};

Algorithm Description:

A random value is added to each pixel within a specified range. This creates the effect of random color changes, giving the image a noisy or grainy appearance. In our case, we’re simply simulating distortions, which don’t have any relation to real film grain or noise. However, the earliest digital filters (such as those used in early mobile phones like the Sony Ericsson W810) worked on the same principle.

By controlling the amount of noise, users can experiment with different levels of intensity to achieve various creative effects or simulate imperfections in a photograph.

And of course, we’ve added a Reset Settings button to clear all filters and revert to the original image.

Throughout our articles, we’ve delved into the fundamentals of color correction and explored various tools and techniques for applying it. We’ve examined how to extract and adjust color palettes, the effects of contrast, saturation, and noise, and how to work with different color models — RGB, LAB, and HSV.

Color correction is a crucial aspect of image processing, enabling us to enhance visual perception, highlight certain elements, and achieve harmony between colors. We’ve demonstrated how adjusting the number of colors in a palette or modifying contrast settings can completely transform an image, making it more expressive and dynamic.

It’s important to note that color and contrast adjustments not only affect the appearance of an image but also influence how it’s perceived.

This makes color correction not just a technical process but also an art form.

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

Nailya Safarova — Mon, 28 Apr 2025 09:11:09 +0000

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.

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 two most popular color models — RGB and LAB — are fundamentally different in how they represent and process colors.

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

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

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

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.

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

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.

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.

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.

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.

// 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
  };
};

This improvement helps speed up the application’s performance, especially when processing multiple similar images repeatedly.

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.

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 < 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;
  };
};

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

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.

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

Let’s explore how palettes are applied through two iconic examples of cinematic visual language.

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.

Main Colors: Green, black, metallic.

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.

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.

Main Colors: Pastel shades, bright contrasting colors, red, yellow, turquoise, green.

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.

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.

This Simple App Lets You See How Hollywood Uses Color to Mess With Your Emotions

Nailya Safarova — Fri, 25 Apr 2025 13:53:04 +0000

Why does Joker feel so unsettlingly green and yellow?
Why is Blade Runner soaked in teal and orange?
Why does film make skin look soft and warm?

It’s not magic. It’s color.

And whoever controls color — controls the emotional weight of the frame. Color grading is cinema’s visual language — a way to shape atmosphere, guide the viewer’s attention, and set the tone of a story. It can be subtle and almost invisible. Or bold and stylized, like in the work of Wong Kar-Wai, Fincher, Nolan, or Villeneuve. But to speak this language fluently, you first need to understand its grammar.

Where does color work actually begin? How do we know what the “right” color even is? And how do you translate creative intent into technical action?

Spoiler: it doesn’t start with LUTs or filters. It starts with color targets, calibration, and carefully chosen palettes.

In this series, we’ll explore:

what color grading is on the most fundamental level;
why limiting your palette is a feature, not a bug;
how color charts work (and why they matter);
and how to build your own grading tool in the browser — with React and some simple math.

We won’t just explain it. We’ll show it. And you’ll be able to experiment, tinker, and maybe for the first time actually see what color grading is made of.

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

Color grading is the process of adjusting and stylizing an image to achieve a specific visual tone, emotional effect, or technical standard. Whether in film, photography, or digital production, grading usually includes:

balancing exposure and white point;
correcting technical color shifts;
crafting a visual style with contrast, tones, and color curves.

But grading isn’t just about “making it pretty.” It’s about control — of the mood, of the viewer’s focus, of the visual language of the entire narrative.

Before you apply any creative look, you need to bring the image to a neutral state, which means:

correcting unwanted color casts (color correction);
normalizing the footage to a standard color space (like Rec.709 or sRGB);
matching material from different cameras into a consistent baseline.

And for that, colorists use color targets like the ColorChecker, ChromaDuMonde, or other reference charts.

A color target is a chart of color patches with precisely measured values. These values aren’t arbitrary — they’re obtained through spectrophotometric measurements in controlled environments using professional equipment like X-Rite or Konica Minolta spectrophotometers.

One of the first widely adopted targets was the Kodak Gray Scale — a strip of neutral gray tones used for exposure control. Later came more advanced charts with full-color patches — like the Macbeth ColorChecker, introduced in 1976 (now known as the X-Rite ColorChecker). It features 24 color swatches designed to represent common real-world colors: human skin, blue sky, green foliage, and more.

With the rise of digital photography and digital cinema, color targets became even more critical. They are now essential tools for calibrating not just cameras, but also monitors, printers, scanners — and any device that handles color. They’re used in color matching, profiling, and neutral balancing workflows — from film production to scientific imaging.

Take X-Rite’s ColorChecker, for example. Each patch is measured under standardized lighting (usually D65 or D50), with results recorded in CIE XYZ coordinates — a device-independent color model. Those coordinates are then converted into RGB values, depending on your working color space (like sRGB, Rec.709, or AdobeRGB).

So the RGB arrays we use in our app aren’t guesswork — they’re precise digital representations of standardized, physically measured patches.

If the skin tone patch in the ColorChecker Classic is defined as [194, 150, 130] in RGB, that’s how it should look under correct conditions. If your footage shows something different, that’s a sign of a color cast — and a starting point for correction.

The Catch: Color Charts Are Just the Beginning

Color targets are essential for calibration — but that’s all they are. A beginning. They don’t account for:

how colors behave in highlights or shadows;
the unique characteristics of film stock or lenses;
or the creative intent behind a particular look.

In professional tools like DaVinci Resolve or Dehancer, color charts are just step one in a long pipeline. From there, you move into advanced processes like film emulation, tone mapping, grain, halation, bloom, and other stylistic transformations. So it’s critical to understand: a chart is a calibration tool — not a style.

CinePalette: A Minimal Tool for Exploring Color Palettes

To show how choosing a palette affects an image, we built CinePalette — a simple web app that visualizes what happens when you restrict your color space (a process known as palette reduction).

What You Can Do with CinePalette:

upload any image;
pick a palette (ColorChecker, Portra, Sepia, etc.);
remap every pixel to the closest color in that palette;
compare before & after with an interactive slider;
save the result;
or build your own palette from scratch.

How It Works in Code

Our app runs entirely in the browser using React and the Canvas API. The project — called CinePalette — will be open-sourced and available on GitHub (link at the end of the series).

We start with a set of predefined palettes, but users can also build and save their own. Palettes are defined as arrays of RGB values — for example, here’s what the Portra 400 palette looks like:

"Portra 400": [
  [75, 60, 50],     // shadows
  [160, 130, 110],  // skin tones
  [220, 200, 180],  // highlights
  [60, 100, 80],    // foliage
  [180, 150, 100]   // neutral
],

The selected palette defines which colors are “allowed” to appear in the final image. These become the visual language of the frame — the base tones that set its mood and style.

When a user uploads an image and chooses a palette, here’s what happens under the hood:

The image is rendered to a hidden — this gives us pixel-level access to manipulate the data.
We extract the ImageData object, which contains an array where each pixel is represented by four values: [R, G, B, A].
We loop through every pixel, extract its RGB color.
For each pixel, we find the closest matching color from the selected palette, using Euclidean distance in RGB space — and replace it.

Let’s load up a Shirley card and try applying different palettes — you’ll see immediately how the palette choice shapes the image.

The core of the magic lies in a function that analyzes each individual pixel and finds the closest matching color from the selected palette:

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;
};

Then, we replace the pixel’s original color in the ImageData with the closest match from the palette. And we repeat this — for every single pixel in the image.

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;
}

Once all pixels have been processed, we render the result back onto the and convert it to an image using .toDataURL(). This allows the user to see the result instantly in the browser — and download the filtered image with a single click.

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

Here, we use Euclidean distance in RGB space — a classic method to measure how “close” two colors are:

const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);

Here, (r, g, b) is the color of the current pixel, and (pr, pg, pb) is one of the colors in the palette. Out of all the distances calculated, we choose the smallest one — the closest visual match within the selected palette.

This approach is intuitive and easy to implement, but it has limitations: RGB space doesn’t account for how humans actually perceive color — for instance, we’re more sensitive to green than to blue, and brightness differences can be misleading.

We use this approach in CinePalette as a simple and accessible way to demonstrate the basic principle of color mapping. However, even in its current form, you might notice that some colors get replaced in ways that feel unexpected or “off.”

In future versions, we plan to add a toggle between RGB and CIELAB color spaces — allowing users to compare how different models affect the accuracy of color matching.

Why Does This Matter?

CinePalette showcases a basic but fundamental step in color grading: palette restriction. This is where every visual style begins — with the question: “What if we only used these colors?”.

A Portra palette brings warm, nostalgic tones. Pro 400 feels cool and subdued. Teal & Orange delivers high-contrast cinematic punch. Unlike tools like Dehancer or Resolve, CinePalette doesn’t simulate the physics of film. But it captures the essence: color is a tool for style and storytelling.

What’s Next?

This is just the beginning. In the next parts of the series:

we’ll expand CinePalette with the ability to pick a palette from a reference image;
add automatic extraction of color schemes from any frame or photo;
introduce a toggle between RGB and LAB for more perceptually accurate matching;
and break down how color harmony works — and how you can use it in real-world grading.

Stay tuned — and get ready to not just learn color, but truly see it.