Develop Reference

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

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?

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

How can I automatically determine colors similar to white?

I'm looking for either a list of colors in hex code format or certain patterns of hex codes that are whitish colors/shades of white.
I've been using the Wikipedia Shades of White list but I don't think it's complete and ideally I would like some sort of regex pattern of whitish colors.
I'm not very clued up on colors so excuse me if this is an ignorant question.

Maybe this function can be of help to you?
What it does is test if the value is white(above r/g/b value 200) or not. If any of the supplied rgb values in #FFBBEE calculates to a number lower than 200 it will fail the test.
This is a very very crude test, but as you kinda lack details on what you exactly want, this might be a good starting the point.
At least the function gives you the method to convert it into integer values, which you could use again to calculate in a nicer format like HSL which will allow you to do better brightness checks.
See this answer if you want to go that direction
The other answers explain what RGB is and how this is all combined in the colour code you use, especially the answer by user1203738
function isWhite(str) {
// fiddle this value to set stricter rules for what is white.
var whiteLimit = 200,
r,g,b;
r = parseInt("0x"+str.substring(1,3));
g = parseInt("0x"+str.substring(3,5));
b = parseInt("0x"+str.substring(5,7));
if(r < whiteLimit || b < whiteLimit || g < whiteLimit) {
return false;
}
return true;
}
// use this function like this. supply it a colour code with a # in front of it
isWhite("#FFFFFF");
<input type="text" value="#FFFFFF" id="colorcode">
<input type="button" value="test if this is white" onclick="document.getElementById('showcolor').style.backgroundColor = document.getElementById('colorcode').value;document.getElementById('showcolor').innerText='Shade of white:'+isWhite(document.getElementById('colorcode').value);">
<div id="showcolor" style="display:block;width:200px;height:200px;margin:50px;border 1px solid black;background-color:#AAA"></div>

The hexcodes represent a mixture Red, Green and Blue light.
#FFFFFF translates to white, with FF red, FF green and FF blue.
you can convert the hex FF value back to 255,
Think of it as if you've got 3 coloured lamps; Red, Green and Blue.
You're gonna mix these lights together. The hex values determine the intensity of each lamp.
#000000 would be black. No lights are turned on.
#FF0000 would be full red. Only the red light is turned on.
#FFFF00 would give you yellow. The Red and Green light are turned on (and combined to make yellow)
#FFFFFF would give you a white. All the lights turned on,
#AAAAAA would give you a gray color, All the light are on but dimmed a little.
#FFFFF0 Would give you yellow-white color, All light a on, but the Blue lacks some intensity.
I advice you to try out a color picker and see what it means to change these values.
whitish colors/shades of white is very broad, as klaar mentioned in the comments, you should define what is white.
In general, Red, Green and Blue values which are close to each other and above 200 'intensity' will appear whitish.
It might be easier for you to convert the RGB value to HSL, (which is out of the scope of this question). since the H(ue) value is irrelevant, The S(aturation) should be low (to be void of color). And the L(ight/brightness) value should be high in order to appear white.

This won't be perfect, but it might get you close:
Step 1: Convert the color name to RGB hex.
Step 2: Check if the first character of each of the Red, Green and Blue hex values is e or f. This could be done as a regular expression, e.g.:
/^#([ef][a-f0-9]){3}$/i
For more examples of what are considered shades of white, see See also Encycolorpedia. This question is more relevant to the Graphic Design community.

How to filter out hue errors in images

I've been running a hue difference algorithm on some images. Hue difference generally means difference in color, and only color, regardless of contrast:
But, I've noticed a nasty effect with some images:
As you can see, cyan and yellow appeared out of nowhere. To be totally sure, I have run a test where the hue in the image was set to 1 and lightness to 0.5:
The broken colors really seem to be near black/white pixels on almost every image. I use this rgb/hsl algorighm.
During every operation on images before, colorless pixels (lightness = 1 or 0 OR saturation = 0) were treated differently (their undefined color did not affect the calculation).
My questions about the problem:
Are the colors real, or is it a bug in RGB/HSL
Either way, is it possible to filtrate them out?

Syncing two colors using jQuery or JavaScript?

If I have two colors, let's say Red (#ff0000) and Dark Red (#850000). Is there a way to make it so that when one color is changed, the other changes accordingly?
So for example if I change Red into Blue, Dark Red automatically changes to Dark Blue and so on..

You could strip the "#" character, split the string into 3, run parseInt on all 3 parts with a radix 16. If you do this on both, you would know the difference between them based on individual RGB components. Then, use an appropriate event handler to detect when color A changes. Compute the difference due to the color A's change (similar to the process I just described), then apply that to color B. Reverse the process by using toString(16) on each of the integer components of the modified color B, then join those 3 components with a "#" at the beginning to recreate the string. Finally, use the appropriate jQuery to modify the CSS property. Don't forget to account for going over 255 or under 0.

Scale for web colors

I'm using google map to display historical events and would like to color the markers based on the decade an event occurs. The event are between 1800 and 2000 (so about 20 different decades). I'd like to scale scale from yellow to orange to red. Any ideas?
tldr = want to scale from yellow to red in 20 steps in web rgb
EDIT: dudes - this is what i'm doing after reading this: How to get hex color value rather than RGB value?
http://jsfiddle.net/p6ek6/3/

Use HSL instead, since you can simply adjust the first parameter H for the color. Something around 0 to 50 should give you a nice red-yellow gradient.
Red example: hsl(0, 100, 50%);
Yellow example: hsl(50, 100, 50%);

This is 100% subjective. There is no scale.
Your best bet is to copy color schemes from other professionally produced maps or find color scheme inspiration elsewhere.
I suggest using National Geographic or just go out in nature to get inspired about color schemes.
In your situation, try to think about all the colors you see during fall with leaves falling off trees.
I hope you don't have to print this on a color printer, or this gets even more complicated.