choosing colors

June 16, 2005 11:17 AM

I need to display information about approximately 16 elements. The display will be in row-column format and the order of the elements will be fixed. So the display will look like: text in colorA | text in colorB | text in colorC | ..... text in colorA | ..... How do I choose colors such that adjacent colors do not appear similar and that any given color is easily distinguished from the others? If you know of a good algorithm for choosing the set of colors or can point to an example of someone doing this well I would appreciate it. Also it would be nice if the result were not ugly.
posted by rdr to Media & Arts (10 answers total)

Best answer: This one has 12 different colors for the "qualitative" legend type.
Color Brewer

What's the medium - HTML, Excel?
posted by junesix at 12:18 PM on June 16, 2005

The Four Color Theorem, of course!
posted by Mach5 at 12:23 PM on June 16, 2005

Mach 5: How does that even remotely help the OP?
posted by junesix at 12:55 PM on June 16, 2005

Response by poster: Color Brewer seems to do what I need and lets me have a rough idea of a color scheme that should work. It also points me towards cartographers who've apparently been doing this sort of thing for ages. Thanks.

BTW, to answer your question this is a quick kludge in html. If I start to use it enough I'll build a custom app. Thank you.
posted by rdr at 1:02 PM on June 16, 2005

Best answer: If you want to algorithmically define a set of n contrasting colours, then the HSB (HSV/HSL) colour space should be helpful. Just divide the 360° of Hue into equal segments, and place your colour on each division. Keep the Saturation & Brightness values the same.

For example, say I want 5 different colours, 360 / 5 = 72, so I can make these HSB values: {hsb(0,50,100), hsb(72,50,100), hsb(144,50,100), hsb(216,50,100), hsb(288,50,100)}. Converting to RGB gives me: {rgb(255,127,127), rgb(229,255,127), rgb(127,255,179), rgb(127,178,255), rgb(230,127,255)}.

Now you'll have to ask how to convert HSB to RGB.
posted by ijoshua at 1:30 PM on June 16, 2005

Since you're using HTML, I recommend using CSS styling for the text. Unfortunately, you'll have to style each cell, row by row because CSS doesn't have text attributes for table columns.

Your stylesheet would contain something like:

td.col1{
color=#000000;
}

td.col2{
color=#FFFFFF;
}
...

And the markup would be:


blah
blah
blah

...

posted by junesix at 2:22 PM on June 16, 2005

That should be:

<tr>
<td style="col1">blah</td>
<td style="col2">blah</td>
<td style="col3">blah</td>
</tr>
...

grumble, stupid comment formatting
posted by junesix at 2:28 PM on June 16, 2005

CSS doesn't have text attributes for table columns

Au contraire, in recent browsers:

<colgroup>
<col style="background-color:yellow">
</colgroup>
posted by kirkaracha at 3:58 PM on June 16, 2005

p.s. using a class for the col would be better, but probably isn't as supported.
posted by kirkaracha at 4:00 PM on June 16, 2005

kirkaracha: While there are attributes for the border and background colors of the cells, there isn't any for the color of the text itself. That requires individual cell markup.
posted by junesix at 5:04 PM on June 16, 2005