# Color schemes generation - theory and algorithms [closed]

I will be generating charts and diagrams and I am looking for some theory on color schemes and algorithm examples.

Example questions:

• How to generate complementary or analogous colors?
• How to generate pastel, cold and warm colors?
• How to generate any number of random but distinct colors?
• How to translate all that to the hex triplet (web color)?

My implementation will be in AS3 but any examples in pseudocode are welcome.

• I did more research and experiments only to confirm that what really matters is the subjective perception of a color, not some physical property of the reflected light. The Munsell Color System is the key. However it's a pity I can't split the bounty becuase @Steven Jeuris helped me awful lot with the links to Colorjizz and Mojocolor libraries. Thanks to everyone for your help. Feb 16, 2011 at 13:37
• Strongly relevant Stack Overflow question with interesting answers: "How to automatically generate N “distinct” colors?" Sep 13, 2011 at 11:15
• Another relevant question from gamedev, also with interesting answers: Is there an optimum set of colors for 10 players? Jan 1, 2013 at 17:08

The first bit of advice he offers is this obvious fact that lays the foundation for picking hues and saturations:

Two pieces of information with the same contrast against their background will be perceived at the same importance level (all other things being equal), while more contrast identifies more importance and less contrast identifies less importance.

This offers the first clue as to how to pick colors for foreground and background--less important information should use lower contrast and more important information should use higher contrast.

The first link is to Color Scheme Designer, a site similar to Kuler. Like Kuler, it's a handy interactive tool, but it doesn't offer any insight to how colors should be picked, i.e. which yellows work with which greens or blues, etc.

The next link he offers is to a NASA Color Usage Research Lab web site entitled Using Color in Information Display Graphics. This site provide a lot more information about how to pick colors for proper contrast, etc., and lists the mathematical formulas for measuring things like contrast. I haven't found any SW code or pseudo code algorithms on that site yet, but I've only looked at a few pages. Stefano also points out that the NASA Color Lab uses the Munsell Color System, a system similar to HSV but weighted to more accurately reflect human perception of color rather than measurable properties of color.

One last link mentioned in Stefano's blog is to a site called Color Trends + Palettes::COLOURlovers. This site offers no more help in finding an algorithm for picking colors than Color Scheme Designer or Kuler, but it emphasizes the less measurable quality of current changes in our fleeting enjoyment of certain colors and palettes. It's worth a visit if you want your UI to reflect the latest trends.

Once again, check out the NASA website and read through some of the pages there, especially those on Color Science, and you should be able to come up with a workable algorithm for picking colors that work together and provide the desired contrast.

• I did more research and experiments only to confirm that what really matters is the subjective perception of a color, not some physical property of the reflected light. The Munsell Color System is the key. However it's a pity I can't split the bounty becuase @Steven Jeuris helped me awful lot with the links to Colorjizz and Mojocolor libraries. Thanks to everyone for your help. Feb 16, 2011 at 13:37

As far as color generating tools go, I like http://kuler.adobe.com the best.

When you create a color palette(5 colors) on the site, your options are Analogous, Monochromatic, Triad, Complementary, Compound and Shades. Of course you can customize your colors instead of auto generating them. Each color block shows you the numeric values in RGB and Hex(as well as CMYK/HSV/Lab).

How to generate complementary or analogous colors?

This involves a bit more color theory knowledge. You can check out a nice(basic) explanation here. See the color wheels.

How to generate pastel, cold and warm colors?

In general, pastel colors are "soft colors." They're the higher and lower spectrum of a tint. See Kuler's user generated pastel color section.

How to generate any number of random but distinct colors?

For your charting purpose, I'm not sure random colors would work. Each color choice should be hand picked.

How to translate all that to the hex triplet (web color)?

Most graphical software displays hex values for colors. Hex is a RGB string made up by ##(red), ##(green), ##(blue).

For example, pure red is FF0000, pure blue is #0000FF. Purple(you get from mixing red and blue) is #FF00FF.

Since you'll be creating charts, I recommend visiting the following blogs for inspirations:

http://infosthetics.com

http://flowingdata.com

If you have time, read through Lessons in Color Theory

• Thanks for the long comment but it does not answer any of my questions. I really need to generate random colors, kuler is cool but useless for me and I syndicate those blogs :). Feb 9, 2011 at 20:29
• That "colour theory knowledge" link defines the primary colours as red, yellow and blue. Last I checked, the additive primaries are red, green and blue, and the subtractive primaries are cyan, magenta and yellow. So where does the red, yellow and blue set come from?
– user8709
Feb 10, 2011 at 19:47
• @steve314, the RYB model is used for art. See: en.wikipedia.org/wiki/RYB_color_model
– Jin
Feb 10, 2011 at 19:56
• thanks. I'm glad I worded that as a question - I can pretend I wasn't being an idiot now.
– user8709
Feb 10, 2011 at 20:54

An idea I've had in mind for a while is to generate as-different-as-possible (within limits) colours for as many colours as needed. The extra hassle being if I need an extra couple of colours later for the same chart (maybe a couple of extra bars being added), they need to fit into the same scheme, keeping the existing colours the same.

The idea I came up with is a bit-fiddling trick. Imagine a circle of colours (maybe each being a different hue with the same saturation and brightness, though you could define any circle through any colourspace). Instead of giving an angle in degrees for that circle, have a range zero to 255. In binary, that's 00000000 to 11111111. Add one to an 8 bit 255 and it overflows back to zero, so it acts naturally as a "circular value" (in technical terms, addition and subtraction is modulo 256).

The trick is when you select colour zero, colour one etc, to bit-reverse those numbers. To do that in C, I'd use...

``````value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);
``````

So the sequence 0, 1, 2, 3, 4 is transformed to 0, 128, 64, 192, 32.

The point is that you have 256 distinct colours, and the earliest ones are very widely spaced out, with the later ones getting less widely spaced out and filling in the gaps (64 is half-way between 0 and 128, 32 is half-way between 0 and 64 etc).

Any bit-width for a particular "angle" will work if you adapt the bit-reverse, and of course you could run multiple cycles at once for different parameters of the colour (maybe hue spins quickly, but saturation spins more slowly).

That only leaves the question of how you map your "angles" to particular RGB numbers or whatever, which I'm no expert at - oh, and the question of whether ActionScript supports bit-fiddling.

• Fascinating trick! +1. But a warning from similar, interesting questions on gamedev.stackexchange and stackoverflow : the perception of hue is non-linear, so the same change in angle may look as a large change for some colors and a very small change for others. Jan 1, 2013 at 17:18
• @Frepa - true, unless you're careful how you map to RGB at least - a trivial mapping to RGB probably wouldn't give good results for most purposes. I'm aware of the issue, but as I said, I'm no expert at that - I should probably have at least said that the issue involves different colour spaces and converting between them, though.
– user8709
Jan 2, 2013 at 7:00

There is an interesting Stack Overflow question "Function for creating color wheels" on this. You may also want to read one of the recommended papers (PDF).

• I have specifically checked the difference between SE and programmers (meta.stackexchange.com/questions/68384/…) before I have asked this question :). Thanks, I will check that, but I don't consider it an answer to my question. PS: +1 Feb 7, 2011 at 13:28

This question fascinated me so I started doing some googling. :) Don't expect an answer based on experience.

Basically, to do calculations with colors, it's best to do operations on a color wheel, which is represented in the HSL format.

The author of this post was kind enough to provide some information on converting RGB to HSL, and sample code on how to calculate complementary colors.

If you are lucky you won't need to understand any of that, if one of the following awkwardly named AS3 libraries work for you.

• Meanwhile I did more research too and I came to the same conclusion! (Except I prefer HSV over HSL). Thanks for the links, the Colorjizz looks awesome! ps: +1 Feb 10, 2011 at 0:57

I have used the following code. Note: it uses no theory about how the eye/brain works, I just wanted to be able to create a palate of colors such that red+green+blue=1, and the colors are approximately evenly spaced. The parameter "me" is which color out of a total of num possible ones. It works to to num approx 91 ish. Note me should run from zero to num-1. Other things are possible, the constraint given above is pretty arbitrary, but at least it generates distinct colors -assuming you don't need too many of them.

``````void select_color(int me,int num){
int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
int j,nrows=0,irow=0,jcol=0;
float del,red,grn,blu;
// we build a red/green triangle with an area>=num
for(j=0;j<14;j++)if(me>=s[j])irow=j;
for(j=13;j>0;j--)if(num<=s[j])nrows=j;
jcol=me-s[irow];
del=1./(nrows-.9);
red=1.-del*irow;
grn=del*jcol;
blu=1.-red-grn;
glColor3f(red,grn,blu);
}
``````

Again, it uses no color theory, so there is no quarantee that the disticntness is optimized in any wat -especially if you are concerned with the occasional user with partial color blindedness.

You can also simply set the primary color varaibles to random numbers, but they are even less likely to form a visually distinct set.

In the past, I've done this by just hand picking 20 or so colors, rather than trying to generate them. Unless your graphs are very complex, you dont usually need more. This approach, while simple, also lets you assign the same color to the same factors in your graph (for example, you can always make 'sales' the same color, making the graphs easier to interpret).

I like sampling colors from photos. As a designer I do this manually. As a programmer I usually pick a random pixel. If you want more control you could create your own 'photos' which comply to a certain ruleset.

I've always liked VisiBone's online utilities as you can select multiple colors and interactively evaluate how badly they clash with one another: http://www.visibone.com/colorlab/

I say how badly they clash because I am familiar with color contrast as it applies to "analogue" art and was surprised by how badly the color's I chose clashed with one another in digital art. (Clearly I am no designer though)