shuaiey / image-color-palette

Generate the color palette from an image with different methods, using Javascript and react.

Image Color Palette

⇢ A demo app is here.

Introduction

This project originates from my passion to color, and was bootstrapped with Create React App.

In this project, I collected some basic or popular approaches to generate color palette from an image, they are:

• Uniform/One-pass Quantization by me,
• K Means Cluster by woshizja, and small modified version by me,
• Median Cut Method by GoogleChromeLabs,
• Modified Median Cut Method by Lokesh Dhakar,
• Octree Method by XadillaX,

respectively.

To run locally:

• with yarn, run yarn, then yarn start in console
• with npm, run npm i, then npm start in console

Example

To a same image, different methods may produce very different results. And also, the same method has different implementations, which depends on how the developer quantize the image data. Later I'll write an article on "About" page of the demo. For a quick grasp, the following image may explain something.

It's hard to say which method is better for the first BW image, but for the second green-tone frog image, Modified Median Cut method and Octree method produce some very different color from the image. The reason for this case is because, first, they caculate colors not count; second, for optimization, they omit many image data (eg., some bit operation) (Media Cut method by GoogleChromeLabs doesn't omit image data, therefore they don't produce the purple color).

Reference

Below are references of this project. P.S. During the development of this project, I read many articles and some books or papers for references. If I miss your reference, please send me a msg. I'll add then ;>

Projects

• github: colorful color / demo: Link / author: woshizja(github) / article: 图像颜色提取 / K-Means
• github: Color Thief / demo: Link / author: Lokesh Dhakar / Median Cut
• github: octree.js / author: XadillaX / article: 图片主题色提取算法小结 / Octree

Articles and Books

• Leptonica, Color Quantization, 2008
• Rosetta code, Color quantization in different implementations
• Leeoniya, RgbQuant.js, 2014
• woshizja, 图像颜色提取, 2017
• TwinklingStar, 八叉树颜色量化, 2013
• Steven Segenchuk, An Overview of Color Quantization Techniques, 1997

Some similar projects

But I didn't get to read and practice (probably can be your references).

• gitHub: ImageColorTheme / author: rainyear / article: 图像主题色提取算法 / MMCQ and K-Means

Contributing

If you have any better solution or advices, ALWAYS WELCOME!

To Do

• Add testing
• Optimize code