Is there an optimum set of colors for 10 players?

Question

I need to identify 10 players with a unique color for each on the map. Is there an optimum set of 10 colors to use in this case? Every set I come up with has some colors too similar.

Update: I was asked below what this is for (fair question). Now I can tell you - Windwardopolis and the colors worked great.

Answer 1

You could generate equidistant hue values in the HSV space:

for (int i = 0; i < 10; i++)
    colors[i] = HSV(0.1 * i, 0.5, 1.0);

However, it’s possible that you will not always have 10 players. In that case, the palette would not be very efficient unless you re-generated a different palette for another number of players. Instead, some authors recommend generating a palette using the golden ratio, taking advantage of a property resulting from the equidistribution theorem:

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0), 0.5, 1.0);

That way, even if you stop at 3 or 4 or 7 players, you get a very good hue spread.

Many irrational numbers will do, but the golden ratio will work best (it has been proven).

Finally, you can use two different generating sequences in order to tweak S or V, too. For instance (edit: I added the sqrt call for better equidistribution):

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0),
                    0.5,
                    sqrt(1.0 - fmod(i * 0.618033988749895, 0.5)));

Update: the above results can be improved by using a correction curve for H (similar to the gamma curve for RGB components) that takes the human visual system into account. This is the hue correction curve that I computed using the CIEDE2000 metric:

The results for equidistant hue values are as follows:

And for the golden ratio generation sequences (with and without tweaks on V):

I will publish an approximation of the curve formula for use in programs as soon as I find a reasonably good one.

Answer 2

The 8 StarCraft colors are:

Red, Blue, Teal, Purple, Orange, Brown (green in desert maps), White (green on ice maps), Yellow

Obv. Blizzard are UI geniuses and have studied the problem.

They left Green out as a swap-in for Brown on desert maps, so technically there are 9 listed there.

The 12 Warcraft 3 colors are:

Red, Blue, Teal, Purple, Yellow, Orange, Green, Pink, Grey, Light Blue, Dark Green, Brown

Here's how this looks:

As you can see, they are quite distinct and easily distinguishable. Dark green is actually easy to distinguish from teal, possibly because the human eye can most easily distinguish shades of green. If you're sure your players will be female tetrachromats you probably could pick any colors though.

Answer 3

A few people here recommend dividing up HSV color space at 10 equidistant positions on hue. In my opinion, this is actually not a good solution. The human eye does not perceive differences in color equally across the HSV spectrum. For example, what we'd call orange occupies a tiny slice of the band, whereas a good 25% chunk might qualify as green. So it starts with a bad premise. Look at the first row of colors in this answer. The two greens are almost indistinguishable.

Remember your users will need to communicate about and refer to the colors. In light of this, the Starcraft/Warcraft theme is a great lead to follow. Choosing based on a list of plain English Crayola colors is not a bad idea at all, because you'll end up with familiar named colors. Then just tweak those colors to be bold, muted, whatever matches your aesthetic, as long as they're still recognizable as i.e. Red, Orange, Yellow, Green, Blue, Purple, Brown, Gray, White, Black.

Edit: the connection between language and color perception is so interesting, I just wanted to share this awesome link:

The crayola-fication of the world: How we gave colors names, and it messed with our brains on Empirical Zeal

Answer 4

Making 10 colors that can be distinguished is going to be really difficult. This is a pretty common issue in creating graphs or charts for many values, which is why they often use color and shape or color and hash pattern combinations.

If you need to display markers, you can use 4 basic colors (red, blue, orange, black for example) and four basic shape (square, circle, triangle, diamond) and get 16 very easy to distinguish markers.

If you are coloring in areas, use the same idea but combine colors with hatch patterns in black or white lines instead of shapes.

Another thing to consider is to not use color as the only way to tell the side. Mousing over an area could highlight it and give a tool tip with the player name explicitly stated. Or maybe a list of the 10 players can be moused over, and as one hovers over a player name, all areas on the map for that player are shown.

Also, while choosing colors, keep in mind color blindness. Green and Red for example may not be distinguishable. Take a look at http://jfly.iam.u-tokyo.ac.jp/color/#select for a set of suggested colors that will not be an issue for colorblind individuals. An additional resource is http://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBest

Answer 5

Why reinvent the wheel? There even is a standard for a set of sixteen colors, of which you could pick ten. This is the ANSI set http://en.wikipedia.org/wiki/ANSI_escape_code#Colors

The ANSI color are equally distributed on the RGB cube, which is, I think, better suited for this problem than the HSV space.

When taking the extremes of the RGB cube, you get familiar colors, like red, blue, cyan, etc. After the eight corner points, you get all the points in between, on the edges.

Answer 6

I thought I needed to break this "symbols" approach out into a separate answer.

Back in the day, I assume people needed flags and stuff to easily identify an army way off in the distance, so you know whether to attack or defend (in case of foes), or be relieved (in the case of allies).

So, incidently that's exactly what you're trying to do. Easily identify something off in the distance.

You can do that with just color, but possibly a better way to do that is with color and symbols. Using a combination of colors and symbols will help colorblind people identify things, as many people mentioned above.

If the units are big enough, you could also go with 2-4 color coats of arms.

The pattern is easily recognizable, not just a color. Good texturing could brand the coat of arms quite large on the chest or upper arm of each unit.

In the image above, the helmets for different units have different geometry, as well as the shield insignia.

You may find also interesting the idea of Japanese Mon, which are very simple looking "logos"

Now you're basically branding your units with modern "brands". StarCraft II did this a little bit with "decals",

but these are barely visible in-game

and aren't used for identifying units so much as colors are.

I'd look at flags as well for inspiration, particularly the ones that don't use a 3-stripe brand pattern (those become a little confusing). Consider:

• Switzerland:
• Somolia:
• South Korea:

These all have some very simple-looking, yet distinctive flags.

Also check out symbols that the American government uses to identify defense staff. These are monochrome images (can be done completely in black and white), so this might actually be a great solution that will not exclude colorblind people (basically use symbols to identify teams, instead of colors)

 

Answer 7

This question is not only about gaming, it's about UX in general.

See StackOverflow: How to automatically generate N “distinct” colors?

Answer 8

Even if you can get 10 unique colors that are distinguishable easily by one person, another person may still find this set harder to distinguish.

Consider limiting yourself to a smaller set of colors, and adding a distinguishable feature, like a black stripe. For the set of colors, it's probably best not to stray too far from what most people can distinguish easily: ROYGBIV. A simple stripe/no-stripe on ROYGBIV gets you 14 identifying game pieces.

You don't have to limit yourself to a black stripe, either. Consider the following solution for wiring 25 pairs (which could just as easily be stripes instead of pairs): http://en.wikipedia.org/wiki/25-pair_color_code

Answer 9

Just wanted to throw in a reference to the Tableau-10 palette that was developed for high distinctiveness and which is described in this paper:

http://vis.stanford.edu/files/2012-ColorNameModels-CHI.pdf

"The Tableau-10 palette provides the best color salience and minimal name overlap."

Answer 10

Brent Berlin and Paul Kay showed that colour space can be divided up into just a few basic colours, but it depends on your culture in that giving a name to a colour makes it more distinguishable.

In English, there are 11 basic colours: white, black, red, green, yellow, blue, brown, purple, pink, orange and grey.

I don't like the idea of choosing hues around a wheel for much the same reasons as Matt Montag stated

Answer 11

Try this color mixer:

http://www.w3schools.com/tags/ref_colormixer.asp?colorbottom=7FFFD4&colortop=FFFFFF

Here's what I'd do: select a color for the first option. Then, select one for the 2nd option so that the 2nd color is at the exact opposite position with regards to the first one. So the color at position: Row 1, Cell 1 would have the opposite: Last Row, Last Cell.

That way you end up with 2 very different colors at the mix's extremities every time. Repeat this 5 times, always selecting colors that are far apart from the last selection.

Answer 12

A way to ensure the optimum set in terms of distinguishable colors for a variable number of players (without taking color blindness into account) would be to choose from the HSL (Hue, Saturation and Lightness) color model.

You pick a constant lightness and saturation, depending on your choice. Then you shift the hue of the color by 360 / playerCount, like in the following pseudo code:

saturation = 200;
lightness = 128;
hueDelta = 360 / PLAYER_COUNT;

for (int i = 0; i < PLAYER_COUNT; i++)
    color[i] = Color.FromHSL(hueDelta * i, saturation, lightness);