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
Related
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?"
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'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.
I'm trying to programmatically create some css borders and text-shadows (for a letterpress effect) with jQuery.
Given an RGB color value, I'd like to be able to calculate color variations much like 0to255 does.
For example, given the color #023f74, how do I come up with 4 shades lighter being #0363b7?
maybe you could convert the RGB color ro HSL or HSB / HSV then apply the variation and then back to RGB!
look here -> http://www.easyrgb.com/index.php?X=MATH <- for formulas for converting from and to HSL / HSB/ HSV and others...
A little play with hex - from any given color increment\decrement with a certain step until the end of the scale, white(fff shortened from ffffff) or black (000 - form 000000).