Develop Reference

How to get random color based on hex color from dark to light by JS?

I'm having a problem dynamically generating colors from dark to light which I'm going to use to create color differences on the pie chart.
The color refers to one of the hex colors, for example #00695C to #00897B.
How to get those colors by using javascript?
Example Image for Color Generate

Instead of hex you can try hsl color in your project. Where you can reduce and increase intensity of l value between 0 and 100 to get different shades of light and dark. It's more straightforward
Refer this page for more details
https://www.w3schools.com/colors/colors_hsl.asp

put all your favourite colours in an array, and then, map them.

How to clip a range of colors into a predefined color set? (any language)

I have some color list as a result of some image extracting. And i want to clip those colors into some predefined colors.
Let's say input includes some dark and light colors of red. They all count as red. Or if some color has excess saturation levels it becomes gray, black or white in that regard. First solution i think of was to transfer those colors to HSL so i can make some switch statement just by reading the Hue, and then mapping them would be easy. But then it is to hard to eyeball values when there are also lightness and saturation values. In the end i could not manage to get good result from these technique. So my question is "Is there any definite way to convert those different colors to specific color set?"

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.

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.

Is there a way to compare 2 colors in JS, like 'If Color A is darker than #202020'

The background color for one of my pages is set pulled from the background color the users set as their twitter background color. I have a page that has a rounded box with a black border. The border doesnt look good if the background color is dark, so i'd like to remove the border of the background is darker than an arbitrary hex color.
The way I was thinking about doing this was using a regex to pull the 3 RGB values and summing them, and comparing that to my reference color. Is there a better, way to accomplish this?

You could write a function that converts between RGB and HSL or HSV, and use the lightness or brightness value.
Wikipedia has the math for HSV -> RGB conversion, but not the other way.
http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
You could also probably pull some JS from this page.
http://www.csgnetwork.com/csgcolorsel4.html

You may also need take in account perceptual brightness of colors (i.e. bright-blue #0000FF looks much darker than bright-red #FF0000 which in turn is much-much darker than #00FF00).
So I'd split the color value into separate bytes and then multiply each by some coefficient:
function getPerceptualBrightness(color) {
var r = parseInt(color.substring(0,2),16);
var g = parseInt(color.substring(2,4),16);
var b = parseInt(color.substring(4,6),16);
return r*2 + g*3 + b;
}
var green_b = getPerceptualBrightness('00A000');
var blue_b = getPerceptualBrightness('0000FF');
if (green_b > blue_b)
{
alert("Green is brighter though it's numerical value is smaller");
}
This may be less precise than converting to HSL but the latter feels like an overkill for the task...

If the rounded corners are images, this is better treated as a photoshop problem. Save for web/png-24/transparency dither.
If I understand your problem correctly it's not just an issue of light and dark but of hue too. Those corners are dithered to a background that doesn't match these alternate ones. By that I mean the rounded edges are slowly faded from the border to the background color so the jagged pixel edges don't appear to be as jarring.
An arbitrary light/dark solution where you average the three and compare would only work well with fairly extreme lights and darks I would imagine but with a png transparency dither they'll soft-blend into any background automatically. There are workarounds for IE 6 if you have to support it.

You may be able to use the luminance of the color. jPaq offers this function. Still, I am not sure that this is what you are looking for. Here is Wikipedia's definition of luminance: http://en.wikipedia.org/wiki/Luminance.