How to detect if shading or tinting exists on an image?

Question

I want to count solid colors available on an image for silkscreen printing, and limit to maximum of 10 colors per design such how teespring did.

I've tried numbers of techniques to count unique colors using javascript (colorthief) and imagemagick. However the results are not suitable for this purpose because it also takes into account all colors exists on shading or tinting.

Example for image above, colorthief returning 9 unique colors. But if set the limit to 100, it returned as below.

var palette = colorThief.getPalette(image, 100);

So i would like to know how to detect the design if it has less than 10 colors or not?

Answer 1

I can't tell from your question whether you like or dislike what teespring or ColorThief does or what the problem is, or why you ask for 100 colours when you want 10, or if you think the 100 colours are wrong, or right... so I'll just try and suggest ways of getting the colours and you can see if you like them or not. As you are open to other tools, I'll choose ImageMagick which is available for OSX, Linux and Windows.

So, starting with your image, you can ask ImageMagick, at the command line, to choose its idea of the 10 best colours, and then to make them into a swatch of just those colours and resize it up from 10px by 1px to 500 pixels so you can see it:

convert motor.png -colors 10 -unique-colors -scale 500x swatch.png

Or, you could ImageMagick to quantise in the YIQ colorspace, like this:

convert motor.png -quantize YIQ -colors 10 -unique-colors -scale 500x swatch.png

Or, if you want the colour selection algorithm to ignore variations in saturation when choosing colours, you could go to HSL colorspace and fix the Saturation at say 50% leaving the Hues and Lightnesses unaffected and then go back to RGB colorspace and choose colours as above but now with fixed Saturation:

convert motor.png -colorspace hsl -channel G -fx 0.5 +channel -colorspace RGB -colors 10 -unique-colors -scale 500x swatch.png