I will be generating charts and diagrams and I am looking for some theory on color schemes and algorithm examples.
Example questions:
My implementation will be in AS3 but any examples in pseudocode are welcome.
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.
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:
If you have time, read through Lessons in Color Theory
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.
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).
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.
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)
