⇢ A demo app is here.
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
, thenyarn start
in console - with npm, run
npm i
, thennpm start
in console
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).
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 ;>
- 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
- 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
But I didn't get to read and practice (probably can be your references).
- gitHub: ImageColorTheme / author: rainyear / article: 图像主题色提取算法 / MMCQ and K-Means
If you have any better solution or advices, ALWAYS WELCOME!
- Add testing
- Optimize code