Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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.

share|improve this question
    
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. –  daniel.sedlacek Feb 16 '11 at 13:37
    
Strongly relevant Stack Overflow question with interesting answers: "How to automatically generate N “distinct” colors?" –  Alexey Popkov Sep 13 '11 at 11:15
    
Another relevant question from gamedev, also with interesting answers: Is there an optimum set of colors for 10 players? –  Frepa Jan 1 '13 at 17:08
add comment

9 Answers

up vote 14 down vote accepted
+50

In looking for more information about this question (it's something I've struggled with also) I found this blog. Stefano Mazzocchi explains his theory on why programmers suck at picking colors for UI design and offers some helpful advice and links.

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.

EDIT: I'll add additional helpful links in this area as I find them.

  1. Interactive Genetic Algorithm for Colors.pdf
  2. A Perceptual Color Segmentation Algorithm.pdf
  3. A Guide to Combining colors and color Schemes for Great Web Design.html
share|improve this answer
    
thanks, interesting. +1 –  daniel.sedlacek Feb 13 '11 at 14:32
    
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. –  daniel.sedlacek Feb 16 '11 at 13:37
add comment

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).

share|improve this answer
    
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 –  daniel.sedlacek Feb 7 '11 at 13:28
add comment

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).

share|improve this answer
add comment

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

enter image description here

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

share|improve this answer
    
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 :). –  daniel.sedlacek Feb 9 '11 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? –  Steve314 Feb 10 '11 at 19:47
    
@steve314, the RYB model is used for art. See: en.wikipedia.org/wiki/RYB_color_model –  Jin Feb 10 '11 at 19:56
    
thanks. I'm glad I worded that as a question - I can pretend I wasn't being an idiot now. –  Steve314 Feb 10 '11 at 20:54
add comment

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.

share|improve this answer
    
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 –  daniel.sedlacek Feb 10 '11 at 0:57
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
thanks, interesting. +1 –  daniel.sedlacek Feb 13 '11 at 14:32
    
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. –  Frepa Jan 1 '13 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. –  Steve314 Jan 2 '13 at 7:00
add comment

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.

share|improve this answer
    
thanks, interesting. +1 –  daniel.sedlacek Feb 13 '11 at 14:34
add comment

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)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.