Zygimantas Sniurevicius for Product Hackers

Posted on Mar 23, 2022 • Edited on Mar 26, 2022

Extracting a color palette from an image with javascript

#javascript #tutorial #webdev #beginners

Introduction

Today I am bring you something really interesting that I think is worth sharing. Let me begin by showcasing the end result.

If you can’t wait and want to test it yourself, here are the links to the app demo and the repository.

Demo app.
Repository (the entire codebase is commented).

Explanation

We can load any image and extract a color palette and every color is accompanied by its opposed color (complementary).

Example of a similar technique can be found in Spotify, when you navigate to a song/playlist or album you get a custom color gradient on top that represents the dominant color of the picture, this gradient adds a unique feel to each page and it's actually the reason why I am doing this post.

There are several websites that provide this service such as coolors.co or canva.com, if you ever wondered how does it work you are in the correct place, let's find out.

📝 Steps

Now that we know what we are dealing here, let’s start by explaining the process:

Load an image into a canvas.
Extract image information.
Build an array of RGB colors.
Apply Color quantization.

BONUS TRACK

Order colors by luminance.
Create a complementary version of each color.
Build the HTML to display the color palette.

🖼️ Load an image into a canvas

First we create the basic HTML of our page, we need a form input of type file to upload the image and a canvas element because that’s how we gain access to the image’s data.

index.html



<form action="#">
 <input type="file" id="imgfile" />
 <input type="button" id="btnLoad" value="Load" onclick="main();" />
</form>
<canvas id="canvas"></canvas>
<div id="palette"></div>
<div id="complementary"></div>

🚜 Extract image information

We load the image into the canvas using the event handler .onload, this allow us to access the getImageData() method from the canvas API.

index.js



const main = () => {
  const imgFile = document.getElementById("imgfile");
  const image = new Image();
  const file = imgFile.files[0];
  const fileReader = new FileReader();

  fileReader.onload = () => {
    image.onload = () => {
      const canvas = document.getElementById("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0);

      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    }
  }
}

The information returned from getImageData() represents all the pixels that compose the image, meaning that we have an humongous array of values in the following format:



{
  data: [133,38,51,255,133,38,255,120...],
  colorSpace: "srgb",
  height: 420,
  width: 320
}

Each value inside data represents a channel of a pixel R (red), G (Green), B (Blue) and A (Alpha), Every four elements of the data array form the RGBA color model.

🏗️ Build an array of RGB colors

Immediately after obtaining the image data we have to parse it to something more readable, this will make our live easier in the future.

We loop through the image data every four elements and return an array of color objects in RGB mode instead of RGBA.

index.js



const buildRgb = (imageData) => {
  const rgbValues = [];
  for (let i = 0; i < imageData.length; i += 4) {
    const rgb = {
      r: imageData[i],
      g: imageData[i + 1],
      b: imageData[i + 2],
    };
    rgbValues.push(rgb);
  }
  return rgbValues;
};

🎨 Color quantization

After building the rgb colors array we need to somehow know which colors are the most representative of the image, to obtain this we use color quantization.

Wikipedia describes color quantization as

A process that reduces the number of distinct colors used in an image, usually with the intention that the new image should be as visually similar as possible to the original image.

Median cut algorthm

To achieve color quantization we are gonna use an algorithm called median-cut, the process is the following:

Find the color channel ( red, green or blue) in the image with the biggest range.
Sort pixels by that channel.
Divide the list in half.
Repeat the process for each half until you have the desired number of colors.

It sounds easy but it is a little bit complex, so I am gonna try my best to explain the code below.

Let's begin by creating a function that finds the color channel with the biggest range.

Initialize the min rgb values to the maximum number and the max rgb values to the minimum, this way we can determine what is the lowest and highest accurately.

Then, loop through every pixel and compare it with our current values using Math.min and Math.max.

Subsequently, we check the difference between every channels min and max results and return the letter of the channel with the biggest range.

index.js



const findBiggestColorRange = (rgbValues) => {
  let rMin = Number.MAX_VALUE;
  let gMin = Number.MAX_VALUE;
  let bMin = Number.MAX_VALUE;

  let rMax = Number.MIN_VALUE;
  let gMax = Number.MIN_VALUE;
  let bMax = Number.MIN_VALUE;

  rgbValues.forEach((pixel) => {
    rMin = Math.min(rMin, pixel.r);
    gMin = Math.min(gMin, pixel.g);
    bMin = Math.min(bMin, pixel.b);

    rMax = Math.max(rMax, pixel.r);
    gMax = Math.max(gMax, pixel.g);
    bMax = Math.max(bMax, pixel.b);
  });

  const rRange = rMax - rMin;
  const gRange = gMax - gMin;
  const bRange = bMax - bMin;

  const biggestRange = Math.max(rRange, gRange, bRange);
  if (biggestRange === rRange) {
    return "r";
  } else if (biggestRange === gRange) {
    return "g";
  } else {
    return "b";
  }
};

Recursion time

Now that we have the component with the biggest range of colors in it (R, G or B), sort it and then split it by half, using the two halves we repeat the same process and call the function again, each time adding a value to depth.

index.js



const quantization = (rgbValues, depth) => {
  // base code goes here

const componentToSortBy = findBiggestColorRange(rgbValues);
  rgbValues.sort((p1, p2) => {
    return p1[componentToSortBy] - p2[componentToSortBy];
  });

  const mid = rgbValues.length / 2;
  return [
    ...quantization(rgbValues.slice(0, mid), depth + 1),
    ...quantization(rgbValues.slice(mid + 1), depth + 1),
  ];
}

As for the base case, we enter it when our depth is equal to the MAX_DEPTH, in our case 4, then add up all the values and divide by half to get the average.

Note: Depth in this case means how many colors we want by power of 2.

index.js



const quantization = (rgbValues, depth) => {

 const MAX_DEPTH = 4;
  if (depth === MAX_DEPTH || rgbValues.length === 0) {
    const color = rgbValues.reduce(
      (prev, curr) => {
        prev.r += curr.r;
        prev.g += curr.g;
        prev.b += curr.b;

        return prev;
      },
      {
        r: 0,
        g: 0,
        b: 0,
      }
    );

    color.r = Math.round(color.r / rgbValues.length);
    color.g = Math.round(color.g / rgbValues.length);
    color.b = Math.round(color.b / rgbValues.length);
    return [color];
  }
  // recursion code goes below
}

This is it, we are done with median-cut and the palette extraction.

📑 Extra steps

There are a lot of things that we could do here but i don't want to abuse of your precious time, if you are interested in expanding a little bit the scope of the project, check the repository, it contains all the extra code.

Order colors by luminance. There are different ways of doing this, depending of your needs, here we use the relative luminance.
Create complementary version of each color.
Build the HTML to display the color palette.

🗃️ Resources

If you want to go further into the topic I suggest trying different algorithms to create the color palette, find the dominant dolor, understand how color spaces work or add different color schemes, here are some examples to help you out:

Use K-means algorithm to create the color palette.
Use Octree algorithm to implement the color palette.
Watch this talk about color "RGB to XYZ: The Science and History of Color" by John Austin.
Add different color combinations like Monochromatic or Triadic, check this page for more examples.

👋 Final remarks

Thank you for your time, I hope you enjoyed this article and have learned something along the way, have a nice day :)

(Cover photo by Zhang Xinxin on Unsplash)

Top comments (13)

Pete Harrison • May 1

I'm trying to work out how to return the number of occurrences of each returned colour as well as the sorted value. I can't quite see how to do it when using recursive algorithms. Can anyone suggest a possibility?

Many thanks

Tiago Rangel • Jun 13 '23

very helpful! If only the function was faster :)

Sakib Ahmed • Mar 21 '23

Amazing tutorial

Gabriel Maizo • Aug 22 '22

How well explained, thank you.

Youssef Ahmed • Dec 24 '22

Would you suggest to process the image at the client side or the server side

Zygimantas Sniurevicius • Dec 24 '22

Its something you should want to have separated from your main services since its really heavy in the processing, it can take a while, for small tests like the one I did here it doesn't matter but for bigger apps take it into consideration.

if you try to use it with higher resolution images it will take several seconds, during that time your client will be blocked.

Cheers

Danny Cummings • Jun 29

Cover art from Music Albums tends to come in 300x300 max size. So I think this was intended for smaller image sizes.

Thinking outloud...
Larger images, perhaps user interaction should initiate the action to process the image to extract a palette for a specific purpose. If not in a flow of user interaction, I would question why the image needs to be so large. You could show the user a large image and process the palette from the same image, scaled down significantly, in the background. If you need something to automagically happen based on the user seeing a rather large image, with performance. IDK, just a thought, unless there is a faster way to retrieve the palette from an image. I am always about performance, even if just for 300x300 images in my scenario :)