I'm going to draw a bunch of areas on the map. Each area should be of different color, preferably clearly different from the others. Of course, as the number of areas grows, I'm ducked. But until then I wonder where I could find or how I could generate a set of, say 15 colors that are "vastly" apart.
The first few were easy, because I used the defaults from Bootstrap:
blue
yellow
red
green
pink
But I can't stop wondering if there's a trick, tool or algorithm for generating a next, deviating color.
Googling gave me ways to generate similar schemas or colors that go well together. That's not what I'm looking for, though. Also, I discovered that there's much, muuuuch more to colors than mixing RGB, so I feel like a total looser noob.
You should indeed use the hsl 360 degrees to generate a well spread color spectrum. To have something like that in typescript/js you could do:
const length = 15;
const colors = Array.from({ length }, (_, i) => `hsl(${360 / length * i}, 50%, 50%)`);
Here you can see a working example:
stack
Result:
Related
We are building a comparison website based on items scraped from the internet.
One of the main filters for the user's comparison engine is filtering by products by colors.
The issue is that we are scraping information from many different ecommerce and we get an endless list of colors with many strange names like CAPULET OLIVE or CHARCOAL RED.
So i was thinking if we can automatically get the hex color by comparing the a name-hex list maybe we can work with that.
Hence the hex is dividing the RGB to 16,777,216 colors(red 1-255 optionsGreen 1-255 optionsBlue 1-255 options). if there was a table somewhere that is dividing the options to the main 6-12 colors (ref, green, blue, yellw, etc.) that can work pretty well.
i.e.CAPULET OLIVE hes the hex value of #656344 which is R=101,G=99,B=68 in decimal.
if i had a table showing this range or strength of red and green vs blue is actually a form of green i can tag this model as green.
Basically, what i'm asking, is there a table that allocating all of the hex codes 6-12 main colors?
So i think i found a simple way to implement this using HSV color model.
Step 1-
Use a search website engine to find HSV/B code by name for sites like this:
https://rgb.to/color/17148/spearmint-green
http://www.perbang.dk/rgb/696B4D/
Step 2-
Use a predefined table to allocate color to his family, for example this one:
https://mehrarodgers.files.wordpress.com/2013/05/hue-scale.png
Though i found some missing color ranges there, so it can be improved.
This article is very useful in dividing the HSV by color wheel:
http://warrenmars.com/visual_art/theory/colour_wheel/evolution/evolution.htm
I have a gradient color scale that I want to define a set of classes for.
To break it down I have a value that can span between 0 and 8.5 with a step of 0.25. I have a total of 34 different colors (8.5/0.25 = 34) that I want to span within this gradient color scale. So I need to define 34 different classes each a tad more down the scale depending value that I have in my database. So if I find a value of 2.25 I want to get the color 29.4% ((2.25 * 100 /) 8.5 = 29.4) within my gradient scale. How can I do this by using css classes?
My reason for doing this is to add color to icons that I place on my map. The values are speed and based on the speed I need to add a class to my icon on the map that contains a background (color) that matches the "value" of the speed?
I have tried googling for the past 30 minutes, but I have found my self unable to find anything that I can use.
If this seems quite intuitive I am willing to try other solutions that can assist me in achieving what I need.
If it is of any importance I am using MapBox as my map solution.
Try using SCSS. In SCSS you can use variables and math.
Maybe this has already been answered before but i couldn't find it. I want to generate LIGHT COLOR in HEX format for HTML Background in this format :-( #FFFFFF )
I tried writing codes to always pick the first, third and fifth Numeric in the HEX color String to be greater than 9. But that logic really doesn't necessary include all LIGHT colors.
For ex. #00F890 is a light color too.
I know the perception of "light color" depends on human to human. I'm very curious if there is a way to write a function like this ? (I'm using perl)
sub random_light_color
{
my $lightness_level=shift; ##Let's say between 0-100
#Do some magic
return $HEX;
#Based on lightness_level. 0=>White 100=>BLACK
#Closer $lightness_level to 0, lighter the color
#(BUT ALWAYS RANDOM=>Good mix of RGB)
}
Maybe i'm missing something ?
What you are looking for is a way to select colors perceived as "light" by the human eye/brain. To do this you need to work in the HSL color space.
HSL is a way of expressing colors as Hue, Saturation and Lightness, instead of Red, Green and Blue. What you'll need to do is research the algorithm for converting from HSL to RGB (there are lots of resources available on the web, including online converters).
You can cycle through all possible combinations of Hue and Saturation, limiting yourself to colors with lightness above some threshold. Then run those combinations through the conversion algorithm to get the RGB equivalents.
I´d like to know, how, through actionscript 3, to get an array of ARGB (hexadecimal) colors, that is close to a given color.
Example:
0xFF00FF00
A green.
How to get variations of green?
I´m trying to get some green colors of a bitmapdata.
I´ve tried to get it by making a loop getting the colors using getPixels32.
The problem is, I think the bits colors of each position are different from the bits of the bitmap rendered.
It´s for a pathfinder.
Each green bit sets a node in a map, as walkable.
So I need to know what are these colors to set it as walkable for the pathfinder.
Any suggestions?
RGB space is terrible for interpreting whether colors are similar to one another. A different color space that matches closer to human perception of color is HSV (hue saturation and value). Here are the steps you should follow:
Convert your value from RGB space to HSV (http://www.cs.rit.edu/~ncs/color/t_convert.html)
Modify the saturation and value to obtain different shades of the same green hue.
You can even modify the hue a little with a defined tolerance level you specify
Reconvert back to HSV to RGB
I believe technically..one color space is smaller than the other, meaning it is not always a 1:1 conversion - but it should serve your purpose.
I'd like to generate random, non-white colors using hue, saturation and brightness that can be used as a background for black text. I've created a generator for random colors, but when I scan the numbers, I can't see any clear pattern in the colors that look too dark.
How can I generate random non-white background colors for black text? Feel free to answer with code or pseudo-code, but it's definitely not necessary.
Only generate colors with high brightness values - for example, if you were using the range 0-255 for each of {H,S,V}, you'd generate H in [0,255], S in [0,255], V in [168,255]. That should give you colors that are bright enough. You may want to restrict saturation as well (e.g. S in [0,192]), since black on full-bright, full-saturation colors may not be very readable.
You'll probably need to play with the values to get ranges that will give you usable colors.
I don't know color theory, but you can try randomly generating the 3 components in RGB (xxx,xxx,xxx) in a way that the sum of the components is greater than X (X depends of the contrast you want), and the convert to HSB.
HSV and HSL are broken models than have nothing to do with perception. You should generate your colors in YUV space (also known as YCbCr) where the intensity (Y) channel is not simply R+G+B but rather models the perceptual intensities of red, green, and blue. A good starting point would be to try random Y values at least 200 and random U and V values between -50 and 50.