Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I generate a palette of prominent colors from an image?

Tags:

I'm trying to figure out how to sample all of the pixels in an image and generate a palette of colors from it, something like this or this. I have no idea where to even begin. Can anyone point me in the right direction?

__EDIT: __

This is what I've ended up with so far:

I used this Pixelate function to get large block sections like joe_coolish suggested. It's working perfectly and giving me a pretty good sample of colors to work with (this is from the windows sample jelly fish picture):

Now, if someone could help me get the 5 most distinct colors (darkest blue, lightest blue, orange, gray and peach(?)), I would love you forever. I really don't understand how to average or add colors together. I also can't figure out how to tell if a color is similar programatically, there are some many numbers and variables in you explanations that I get lost trying to figure out what's doing what to whom.

like image 347
scottm Avatar asked Apr 28 '11 19:04

scottm


People also ask

How do you make a color palette?

Pick one color and find its complementary color (the one right across from it on the color wheel). Then find the colors on either side of the complementary color. Those two colors and your original color make up a split complementary color scheme.

What is a color palette generator?

Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art. Different datasets are loaded each day, check back tomorrow for even more color inspiration.


1 Answers

The answers involving the code show you how to get the full palette. If you want to get the average colors like in the websites you posted, this is how I would do it.

Source Image:

Source

First, I would average the colors by applying a lowpass filter (something like a Gaussian Blur)

enter image description here

That way you are limiting the total palette. From there I would divide the screen into N blocks (N being the total number of pixels you want in your palette)

enter image description here

From there, target each block and iterate over each pixel, and get the average pixel for that block and add it to your palette index. The result is something like this:

enter image description here

That way your palette is limited and you get the average colors from the different regions. You can do all of that in code, and if you'd like some help with that, let me know and I'll post some. This is just the High Level "what I would do".

like image 78
joe_coolish Avatar answered Sep 27 '22 03:09

joe_coolish