Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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.

share|improve this question
1  
Red, Blue, Green, Purple, Brown, Orange, Yellow, Black, White and Gray. –  Luis Estrada Dec 29 '12 at 23:46
11  
what color is the back ground? or what other colors do you have in the scene (for example for neutral objects)? –  Ali.S Dec 29 '12 at 23:51
    
This might be a bit more ambitious than what you planned, but how about giving the players all sorts of options to customize the look of their characters, so that each one will look unique due to the sheer amount of possible combinations? –  Philipp Dec 30 '12 at 1:17
    
In hind sight I guess I would have asked exactly what it is you are coloring? Zones on a map? Markers? Player models in a 3D game? –  Tim Holt Dec 30 '12 at 1:50
3  
I kind of didn't expect this question would have good answers, wow. –  jhocking Dec 31 '12 at 3:59
show 2 more comments

12 Answers

up vote 239 down vote accepted

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

try 1

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

try 2

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

try 3

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:

hue correction curve

The results for equidistant hue values are as follows:

try 4

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

try 5 try 6

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

share|improve this answer
7  
Great answer! Shifting saturation values may help as well, you don't have brown in here. Depending on the map styles, white or black may also be possible colors. –  bobobobo Dec 30 '12 at 1:01
13  
This does not take color blindness into consideration I presume? A very interesting answer none the less. –  AlexanderBrevig Dec 30 '12 at 3:14
6  
@AlexanderBrevig no it doesn’t, unfortunately; it also doesn’t consider the fact that humans are not believed to perceive hue contrasts uniformly. I am thinking about the latter and may update my answer later. The colour blindness issue is a lot more complex matter I’m afraid. –  Sam Hocevar Dec 30 '12 at 3:35
14  
The best answer to color blindness it simple not rely on color. Every player should ideally have a unique silhouette to any actors he controls. And I do mean silhouette, not some kind of symbol; too many of the Match 3 kinds of games get this totally wrong, and even for someone without color blindness, they're just hard to play and cause too much eye strain. –  Sean Middleditch Dec 30 '12 at 5:08
11  
Please see the human color perception graph. You should plot points equidistant in this 2D space. plotting equidistant by hue is to fail to accommodate human perception even in the slightest bit! –  ErikE Dec 30 '12 at 22:26
show 23 more comments

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:

enter image description here

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.

share|improve this answer
3  
If I could select 2 answers I would select yours also. Thank you –  David Thielen Dec 30 '12 at 1:47
4  
Being a tetrachromat helps distinguish colors in the real world, because normal objects have complex spectra. However, being a tetrachromat would not help for computer games, because monitors only have three colors (red green blue). To benefit people with the mutation in the article, a new monitor with four colors (red green blue orange) would be needed. The limited RGB color space also means that all photos/videos must look quite unrealistic to a tetrachromat. –  Joe Dec 30 '12 at 10:13
2  
People with partial color blindness is another problem - in the above W3 screenshot, the Pink and Grey look virtually the same to me until I read which is which and look again really closely. –  f055 Dec 30 '12 at 16:16
16  
great programmers steal! The first thing I would have gone to is any modern Blizzard multiplayer game, too. –  Jeff Atwood Dec 30 '12 at 17:17
3  
Actually I am partially color blind so the following colors are harder to distinguish: Orange vs Green, Pink vs Grey, Dark Green vs Brown –  Archimedes Trajano Dec 30 '12 at 21:20
show 9 more comments

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

share|improve this answer
2  
That makes a lot of sense indeed; while writing my answer I have researched more information about the relative contrast perception of humans, but haven’t found any figures. Do you have any links maybe? –  Sam Hocevar Dec 30 '12 at 4:10
    
Here's an interesting program about the relationship between language and color: dailymotion.com/video/… –  Matt M. Dec 30 '12 at 6:37
    
Do you know a nonlinear map of the hue value that takes this into account? –  Anony-Mousse Dec 30 '12 at 12:16
1  
Hi @MattMontag, just a thought: Instead of referring to the "top-voted answer", which could change (although then again it does have a wide lead...), it's worth linking directly to the answer in question. Good answer, +1 –  Platinum Azure Dec 31 '12 at 5:14
2  
@Anony-Mousse: Lab color space is designed to approximate human vision. It aspires to perceptual uniformity. Take equidistant Lab colors and map them into HSV and you'll see the correspondence. It would not only be nonlinear regarding hue. –  Janus Troelsen Dec 31 '12 at 12:31
show 4 more comments

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

share|improve this answer
4  
+1 for mentioning patterns and color blindness! Not enough game developers think about this problem. –  Trevor Powell Dec 30 '12 at 5:36
add comment

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.

enter image description here

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"

japanese mon

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

enter image description here

but these are barely visible in-game

enter image description here

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: flag of Switzerland
  • Somolia: flag of Somolia
  • South Korea: flag of 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)

enter image description here

 

share|improve this answer
    
Seperating this into two answers has broken some of the images. –  Marcks Thomas Jan 1 '13 at 20:06
    
Coats of arms look cool but imho in real gameplay they are too complex to make out. At least without a primary background colour. –  David C. Bishop Jan 1 '13 at 23:57
1  
You know, it's "Somalia", not "Somolia". –  Panda Pajama Jun 3 '13 at 6:38
add comment

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.

share|improve this answer
    
actually considering color blind people, this is pretty close to color blind friendly if you eliminate some of the colors –  Archimedes Trajano Dec 30 '12 at 21:26
add comment

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

share|improve this answer
    
Speaking of distinguishing feature, I suggest you try looking at the 10-player Bomberman game for the Sega Saturn back in 1993 i.imgur.com/mCVmk.png –  Archimedes Trajano Dec 30 '12 at 21:27
    
Drop 'I' as it's often difficult to distinguish between B <- I and I -> V. You still have 12 color ids. –  Slomojo Dec 31 '12 at 3:21
    
Probably true that 'I' is difficult to distinguish. However, I suspect that one would be able to find a lighter 'B', and a darker 'I', to make it work with 7 (14 with stripes). The main point about adding stripes or another distinguishing feature, stands, though. –  Christopher Jan 31 '13 at 16:09
add comment

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

share|improve this answer
add comment

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

share|improve this answer
    
+1 This is true. There is a cultural bias. But there is also the science of colour, and wave harmonics cannot be denied unless the sensory equipment is faulty (e.g. colour blindness). –  Nick Wiggill Dec 30 '12 at 12:12
    
From the paper, there's a link to a neat online app: kuler.adobe.com –  bobobobo Jan 5 '13 at 17:09
add comment

Do more than just colors- have visual representations that add to both the lore, the art style, and representation of color.

For example Legend of the Five Rings uses an incredible way to differentiate between "set of colors".

One of the most beautiful examples to take a lesson from. Take note the hundreds of ways they differentiate between the Clans. It's not just primary colors, but secondary and even tertiary colors as well. The colors are even included in hair style, type of wear, type of character, a symbol attached, flags, banners, mini-flags on the back, personalities.

The biggest thing I would take from this is the combination of multiple colors. It is not a simple : Blue, Red, Purple, Brown, Yellow, Green, Teal.

It is a combination of two colors, with both being very pronounced. This can allow for a significant amount of additional number of players.

Each clan would have both a primary color, and a set of secondary colors.

"The Crab was mostly identified with blue-gray, plus black, red, and brown colors."

It is beautiful, because no matter what the person looked like (large, frail, samurai, wizard, peasant) you could always tell which clan they were from. It wasn't just "Red" for Scorpion, it was a dark Blood Red and BLACK. While Phoenix had sunburst colors: red, orange, yellow.

You would never confuse a Scorpion with a Phoenix, even if their colors were similar and they both used a lot of red.

share|improve this answer
add comment

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.

share|improve this answer
2  
I tried it out. I found it was easier to just select the colors spaced out from each other like this. Works well. –  Byte56 Dec 29 '12 at 22:50
    
That's a bit more efficient, thanks for pointing it out :) –  Alex M. Dec 29 '12 at 22:55
4  
Also be sure to use a tool like this vischeck.com/vischeck/vischeckImage.php to make sure most player colours are differentiable for colour blind people. Protanopia (red-green-yellow) and Protanope (green-cyan) else 2% of potential players wont enjoy it :). –  Roy T. Dec 29 '12 at 22:56
1  
Nice, @RoyT. I am reminded of the older brother in Little Miss Sunshine. No one wants to see that mistake repeated :) –  Nick Wiggill Dec 29 '12 at 23:56
add comment

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);
share|improve this answer
add comment

protected by Tetrad Jun 18 '13 at 16:26

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

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