Creating color palettes from an image

I’d like to create a color palette (hsb or rgb) from the attached image. I’ve started doing it manually, but I’m hoping there’s an easier way.

Manually, I was going to add this to my header:

ofColor brown;
of Color pinkdark;
of Color royal;
of Color . . .:
brown.setHsb(16,32,58);
pinkdark.setHsb(9,37,95);
royal.setHsb(224,50,72);
. . .

1 Like

You could load that image to OF look at every pixel and count the amount of occurences of every color. Above a threshold you could generate the ofColor from that. By the time you get that done, your manual approach would be faster.
I found this addon, which seems to do just that: https://github.com/rezaali/ofxColorPalettes
But haven’t tested it.

For Algorithmic generated Color Palettes you might want to look at:

Thx asper! I’ll try both of these asap and post if I have any questions, or learn anything helpful from it.
-Eve

Asper (+ anyone!)
I downloaded the ofxColorPalette-master to my addons folder and ran the example. Pretty cool although there’s no way to generate the code for the colors, so I would actually recommend https://color.adobe.com/ for a better color picker experience.

So I’m still at square 1 with manually adding colors and I think I’m learning that photoshop and OF have different interpretations of the HSB values. I’m a SUPER BEGINNER, so I posted my code to help explain my problem, with ref image attached.

When I eyedropped the ‘salmon’ of CREATE and ‘tan’ of the left side bar, OF generated grey and grey. What am I doing wrong?
Code here (if you have any time to look!):

Thanks in advance,
Eve

1 Like

Update (of_Zach gave me some color HSB advice that was helpful):

Photoshop uses degree and pcts, so for the salmon that was coming through as (1,55,88) in photoshop, in OF would be :
H: (1/360) * 255, = .7
S: 0.55 * 255 = 140
B: 0.88 * 255 = 224

try: 0, 140, 224

Eve, you might be interested in this addon for generating color palettes from photographs. It uses a clustering algorithms for grouping similar colors.

This code is actually a port of the ocvColorQuantize class included in Cinder.

1 Like

Can you explain what you mean by that? Do you want to input hex color values?

Hey Asper,
Maybe I overlooked something, but when I ran the example project (ofxColorQuantizer.xcodeproj) It compiled and showed squares of color in the bottom row of the photo, but I didn’t see a cout of RGB (or hex or hsb) values.

Perhaps I missed something in the instructions?

  • Eve

Hello Eve,

Looking at the code of ofxColorQuantizer, it looks like the output of the quantize() function returns a vector of ofColor.

I assume that he colored square showed at the bottom row of the photo are coming from this vector. You could maybe try to iterate through this vector and printout yourself the RGB (or HSB) colors from it?

Thx Meach,
Is it as simple as adding a “cout<<>>endl” line to the end of the draw function? Or there’s also this chunk of code that was commented out by the creator, but when I un-comment it, it doesn’t run…Hmmm…

    //    add colors from labelz
//	unsigned char * p = temp.getPixels();
//	cv::MatIterator_<int> labelIt = labels.begin<int>();
//	for(int i=0; i<colorCount; i++){
//		
//		ofColor newColor;
//		newColor.r = clusterColors[*labelIt].r;
//		newColor.g = clusterColors[*labelIt].g;
//		newColor.b = clusterColors[*labelIt].b;
//		 
//		++labelIt;
//		cout << i << " " << colors[i] << endl;
//	}

in the setup(), after the line

colorQuantizer.quantize(imageCopy.getPixelsRef());

You can add the following and it will print you out the different color components:

vector<ofColor> myColors = colorQuantizer.getColors();

for(int i = 0; i < myColors.size(); i++) {
    cout << "i = " << i << ", color = " << (int)myColors[i].r << ", "  << (int)myColors[i].g << ", "  << (int)myColors[i].b << endl;
}

ofxColorQuantizer is great for this. I am using it to grab the 6 most common colours of an image. You can even grab direct from a jpeg via a url.