Nice color combinations that also look good in greyscale

June 8, 2006 10:15 PM

How do I pick colors which look good together in colour, and at the same time can be readily distinguished from each other when converted to greyscale?

I've been asked to create a 'digital dashboard'-type MIS for the company I work for - basically a web page to be displayed on the intranet. The dashboard features clusters of graphs and other information graphics.

In choosing colors for the different data series on each graph, I first concentrated on colors that worked harmoniously together.

Upon management review, I was asked to pick data series colors that would also be easy to tell apart when the web page was printed on a non-color printer.

So far I've just been making trial-and-error stabs at color combinations, but the deadline is looming and I can't seem to find the right balance between 'looks good in color' and 'easy to tell apart in greyscale'.

Is there a solution?

posted by Ritchie to computers & internet (6 answers total)

Set the colour sliders in whatever app you're using to mockup colours to HSB or YUV mode. Keep on eye on either B (Brightness) or Y (Luminance), because that's the shade of grey things will end up, so you want each colour to have a completely different brightness value.
posted by cillit bang at 10:49 PM on June 8, 2006

Pick your colors in H/S/B (hue/saturation/brightness) colorspace, not RGB. The "B" or brightness is the axis that will show through in monotone, so if two colors have the same or similar B values they will be indistinguishable when printed in monotone. First pick two or three brightness levels to set your main contrasting tones, and then from these generate additional harmonious tones by varying the hue in equal degree increments (e.g. 120° triads).

This is all much easier if you use an application or web page that lets you pick colors in HSB space using the color wheel and sliders, and not by just entering random hex RGB numbers from a list.
posted by Rhomboid at 10:51 PM on June 8, 2006

This problem could be easily solved if you used a print css stylesheet. I don't know how are your graphs constructed, but you could assign a different background color/image to each of the graph elements in your print css.

You could even assign a different pattern for each of the bars or slices, like those used in MacPaint.

You could also choose a palette of four or five colors and change the saturation/brightness of each one, so when they are seen in greyscale, each color has a different grey value. Four colors should be enough, per the Four color theorem, but an extra one shouldn't be a big deal and would make your graphs look better.
posted by clearlydemon at 10:52 PM on June 8, 2006

Gah. Forgive my grammar, English is not my native language.
posted by clearlydemon at 10:52 PM on June 8, 2006

You might try working backward. Design the grayscale graphs first (this is good practice anyway) then when you have something acceptable, slowly add the color. You probably can't tell apart more than about 5-7 shades of gray before they start to visually blend together.

Since you've already experimented with colors, take the basic hues that you like and start gradually increasing the saturation of the gray values along a particular hue axis. One hue per gray value. If you keep the brightness value constant, you should be okay. I'd use photoshop to work out the colors.

One final idea. If you're using a Mac, you can temporarily change your display to grayscale using the Universal Access control panel. Quicker than printing a test print.
posted by Jeff Howard at 11:19 PM on June 8, 2006

An alternative, common method, stats by giving up hope of having everyone's printer reliably produce several easily-distinguishable shade of gray. Instead, make them distinguishable by both color (for onscreen viewing) and pattern (for print). Left diagonal line pattern, right diagonal, fine dots, heavy crosshatch, etc. The difference between data series should stand out even after a photocopy or two.
posted by nakedcodemonkey at 11:35 PM on June 8, 2006