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.
Related
I'm using this lovely library for color randomization. It allows you to specify the type of colors you would like to use based on hsl value ranges. (light, dark, bright)
randomColor({ luminosity: 'light', hue: 'blue' });
randomColor.js
Demo Site
Does anyone know of a way to reverse engineer this? I would like it to return a random color and a loose description of the color. (light blue, dark green, bright red, luminosity + hue range)
I feel like there should be a way to do this, but I just can't figure it out.
Thanks in advance!
The javascript library Tiny Color can help you do color conversions and will even tell you if a color is light or dark. Take a look at the Wikipedia HSL entry and you'll see how you can associate a hue value with a color name.
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.
I want to write some PS Javascript code to get a pixel's ARGB color value. A function which would look like:
function getPixelARGB(doc, x, y);
I searched for a while and found a method by Mike Hale in this site: a link
The answer proposed by Mike Hale works fine, the only problem is that it can't get the alpha value(opacity) of the selected pixel, which is what I want to know.
Anybody have any idea on how to get the ARGB value of a selected pixel by PS script? Thanks in advance.
Ok, if you want to support Photoshop CS2, I have something that will work, but is quite hacky - to say the least.
The basic idea is to get ImageMagick to do it on behalf of Photoshop - and that is probably quicker than anything accessing individual pixels in Photoshop's ExtendScript anyway. So, the ImageMagick command to see pixels in text/human-readable form is this:
convert out.png txt:
# ImageMagick pixel enumeration: 256,256,255,srgba
0,1: (255,0,0,0.996078) #FF0000FE srgba(255,0,0,0.996078)
1,1: (255,0,0,0.996078) #FF0000FE srgba(255,0,0,0.996078)
2,1: (255,0,0,0.996078) #FF0000FE srgba(255,0,0,0.996078)
3,1: (255,0,0,0.996078) #FF0000FE srgba(255,0,0,0.996078)
You can see the transparency is FE or 0.996078 for this row.
So, if you want 1 pixel, say the one at 128,128, you would do this:
convert out.png -crop 1x1+128+128 -depth 8 txt:
# ImageMagick pixel enumeration: 1,1,255,srgba
0,0: (255,0,0,0.498039) #FF00007F srgba(255,0,0,0.498039)
and it has an opacity of 7F or 0.498039.
So, to realise what you want to do, your putative function getPixelARGB(doc, x, y) will have to do the following steps:
1. duplicate document `doc`
2. save duplicate as `PNG` (to preserve transparency) on somewhere like `/tmp`
3. invoke ImageMagick - see below
4. read result - see below
So, how do you invoke ImageMagick and read its output? You can use this:
app.system("convert /tmp/tmp.png -crop 1x1+128+128 -depth 8 txt: > /tmp/result.txt")
var w = new File("/tmp/result.txt");
w.open('r');
var str = "";
while(!w.eof)
str += w.readln();
w.close();
alert(str);
I can tell you briefly how to do it, but I don't have time to write the code this very minute - maybe over the next couple of days if you are lucky. So, hopefully your Extendscript skills are reasonable.... :-)
The issue is that the Color Sampler doesn't pass back transparency, just RGB values. So, the technique will be to force the transparency into the RGB values so you can use them. Here are the steps:
Duplicate the document - because we are going to be a bit destructive
Select all & copy merged (Cmd-A,Shift+Cmd+C)
Flatten (Layer->Flatten Image)
Fill with black (Edit->Fill->Black)
Paste (the layer we copy merged)
Lock transparent pixels on pasted layer (top of layers palette - first checkerboard icon on left)
Fill with white (Edit->Fill->White)
Add a color sampler at the pixel position you want
Read sampler's red value (or green, or blue - they are all the same) and that is the transparency
Most of the Extendscript for the above is fairly simple, the only two harder bits are setting the transparent pixels to locked, which you do like this:
docLay[l].transparentPixelsLocked = true;
and the samplers - where you might be well advised to clear all existing samplers (as only max 4 are permitted)
var sampler = doc.colorSamplers.add([64, 64]);
I have made a little animated GIF here that shows you the process. I start with a red->transparent gradient image. Note at the end when I have the color dropper tool running, you will see the greyscale values in the Color Info window change as I move up and down the image with the mouse, these reflect the original transparency.
I might as well go for a third method while I am thinking about this... :-)
If you create a gradient image which is solid red to transparent, like this:
then load it into Photoshop and select the Color Sampler tol and move it around, you will see in the Info window, that Photoshop reports it as pure red wherever you move the sampler - basically ignoring the transparency.
Now, create a new layer and fill it with black, and then in the Layers window, drag the new black layer below the transparent one - leave the blending mode as normal and opacity and fill at 100%. It will look like this:
Now move the Color Sampler around and you will see the Red RGB value is directly inversely proportional to the opacity - and now the GOOD NEWS - you can get the red channel with Extendscript! So, the technique would be to get the red pixel's RGB value, then put the layer behind and get the red pixel's value again and the difference between the two is proportional to the opacity.
I guess if you filled with white instead of black, the red channel would be directly proportional to the opacity.
I have recently been working on a color picker application which allows an user to pick a hue, a saturation and the lightness of a color. After the user has decided on a color I give the user different color schemes that go with the chosen color. Some of the color schemes given are complimentary, split complimentary, triad, analogous and so on.
For example: if the user chooses red as the color, hsl(0, 100%, 50%), to determine the complimentary color then 180 degrees are added to the hue in a resulting (180, 100%, 50%) which would be cyan. For an analogous scheme I add 30 and subtract 30, and so on.
It all works great until I realized that this are web colors!
I will still keep this functionality but now I want to create color schemes that resemble pigmentation. For example in real life, the complimentary color of red would be green instead of cyan as in the colors of light. Can someone point me to resources on how to convert hsl to pigmentation? How can I adjust the hues so that green would be the opposite of red.
I found a script on the web that is able to convert RYB to/from RGB. Here's a link to the script.
With that, it is very easy to calculate complement colors by subtracting components from 255:
var color = [255, 0, 0], //red in RYB
complement = color.map(function(n){ return 255 - n; }); //green in RYB
ryb2rgb(complement); //[0, 169, 51], which is green in RGB
Demo: http://jsfiddle.net/DerekL/3m53wbsc/
With RYB, one can easily see that brown is the only color with no complement color. To convert HSL to RGB, see this answer: https://stackoverflow.com/a/9493060/283863
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.