312
\$\begingroup\$

I want to give each of 10 players a unique identifying color. Is there an optimum set of colors for this? How do I create one?

Every set I've come up with contains colors that are too similar.

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

\$\endgroup\$
4
  • 15
    \$\begingroup\$ what color is the back ground? or what other colors do you have in the scene (for example for neutral objects)? \$\endgroup\$
    – Ali1S232
    Dec 29, 2012 at 23:51
  • \$\begingroup\$ 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? \$\endgroup\$
    – Tim Holt
    Dec 30, 2012 at 1:50
  • \$\begingroup\$ This question is not only about gaming, it's about UX in general. See StackOverflow: How to automatically generate N “distinct” colors? \$\endgroup\$ Dec 30, 2012 at 22:04
  • \$\begingroup\$ You might want to check out eleanormaclure.files.wordpress.com/2011/03/colour-coding.pdf which has several lists of colors that takes color blindness into account. \$\endgroup\$
    – Leo
    Jan 2, 2013 at 14:58

14 Answers 14

357
\$\begingroup\$

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.

\$\endgroup\$
30
  • 14
    \$\begingroup\$ 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. \$\endgroup\$
    – bobobobo
    Dec 30, 2012 at 1:01
  • 26
    \$\begingroup\$ This does not take color blindness into consideration I presume? A very interesting answer none the less. \$\endgroup\$ Dec 30, 2012 at 3:14
  • 7
    \$\begingroup\$ @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. \$\endgroup\$ Dec 30, 2012 at 3:35
  • 31
    \$\begingroup\$ 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. \$\endgroup\$ Dec 30, 2012 at 5:08
  • 14
    \$\begingroup\$ 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! \$\endgroup\$
    – ErikE
    Dec 30, 2012 at 22:26
179
\$\begingroup\$

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.

\$\endgroup\$
6
  • 15
    \$\begingroup\$ 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. \$\endgroup\$
    – Joe
    Dec 30, 2012 at 10:13
  • 3
    \$\begingroup\$ 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. \$\endgroup\$
    – f055
    Dec 30, 2012 at 16:16
  • 4
    \$\begingroup\$ Actually I am partially color blind so the following colors are harder to distinguish: Orange vs Green, Pink vs Grey, Dark Green vs Brown \$\endgroup\$ Dec 30, 2012 at 21:20
  • 3
    \$\begingroup\$ Optimizing for color blindness is another problem. You can test what an image would look like to a color blind person here. It would very likely require a completely different set of colors, and you'd need playtesting by color blind people to figure out what is easy for them to distinguish against the background. You would probably have 2 settings, with a completely different shader for the color blind settings. \$\endgroup\$
    – bobobobo
    Dec 30, 2012 at 21:26
  • \$\begingroup\$ I totally agree with you. Colors should be equidistant within the 2D human color perception space. I'd love to see the StarCraft colors plotted on this graphic. \$\endgroup\$
    – ErikE
    Dec 30, 2012 at 22:29
81
\$\begingroup\$

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

\$\endgroup\$
9
  • 2
    \$\begingroup\$ 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? \$\endgroup\$ Dec 30, 2012 at 4:10
  • \$\begingroup\$ Here's an interesting program about the relationship between language and color: dailymotion.com/video/… \$\endgroup\$
    – Matt M.
    Dec 30, 2012 at 6:37
  • \$\begingroup\$ Do you know a nonlinear map of the hue value that takes this into account? \$\endgroup\$ Dec 30, 2012 at 12:16
  • 1
    \$\begingroup\$ 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 \$\endgroup\$ Dec 31, 2012 at 5:14
  • 3
    \$\begingroup\$ @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. \$\endgroup\$ Dec 31, 2012 at 12:31
31
\$\begingroup\$

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 armies way off in the distance so that they'd know whether to attack or defend (in case of foes) or be relieved (in the case of allies).

So, incidentally, that's exactly what you're trying to do: to 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). These countries all have some very simple-looking, yet distinctive flags:

Switzerland Somalia South Korea
flag of Switzerland flag of Somalia flag of South Korea

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

 

\$\endgroup\$
3
  • \$\begingroup\$ Seperating this into two answers has broken some of the images. \$\endgroup\$ Jan 1, 2013 at 20:06
  • \$\begingroup\$ Coats of arms look cool but imho in real gameplay they are too complex to make out. At least without a primary background colour. \$\endgroup\$ Jan 1, 2013 at 23:57
  • 4
    \$\begingroup\$ You know, it's "Somalia", not "Somolia". \$\endgroup\$ Jun 3, 2013 at 6:38
25
\$\begingroup\$

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

enter image description here

The ANSI colors 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.

\$\endgroup\$
1
  • 2
    \$\begingroup\$ actually considering color blind people, this is pretty close to color blind friendly if you eliminate some of the colors \$\endgroup\$ Dec 30, 2012 at 21:26
21
\$\begingroup\$

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

\$\endgroup\$
1
  • 4
    \$\begingroup\$ +1 for mentioning patterns and color blindness! Not enough game developers think about this problem. \$\endgroup\$ Dec 30, 2012 at 5:36
7
\$\begingroup\$

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

\$\endgroup\$
3
  • \$\begingroup\$ 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 \$\endgroup\$ Dec 30, 2012 at 21:27
  • \$\begingroup\$ Drop 'I' as it's often difficult to distinguish between B <- I and I -> V. You still have 12 color ids. \$\endgroup\$
    – ocodo
    Dec 31, 2012 at 3:21
  • \$\begingroup\$ 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. \$\endgroup\$ Jan 31, 2013 at 16:09
4
\$\begingroup\$

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

\$\endgroup\$
2
  • \$\begingroup\$ +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). \$\endgroup\$
    – Engineer
    Dec 30, 2012 at 12:12
  • \$\begingroup\$ From the paper, there's a link to a neat online app: kuler.adobe.com \$\endgroup\$
    – bobobobo
    Jan 5, 2013 at 17:09
4
\$\begingroup\$

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

\$\endgroup\$
3
\$\begingroup\$

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.

\$\endgroup\$
3
\$\begingroup\$

Try this color mixer: w3schools.com HTML Color Mixer.

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.

\$\endgroup\$
1
  • 2
    \$\begingroup\$ I tried it out. I found it was easier to just select the colors spaced out from each other like this. Works well. \$\endgroup\$
    – House
    Dec 29, 2012 at 22:50
2
\$\begingroup\$

This question has many answers, but I wanted to touch more on accessibility.

If I were in your scenario (needing to choose colors for an amount of things in a game that need to be perceived as distinct by all players involved), my primary concern would be accommodating not only players who are colorblind, but also players who have low vision.

The only solution to this issue as far as I am aware is VALUE CONTRAST. Some people can only see in black and white (source: a friend from art college's stories about taking a color theory class whilst being unable to perceive any color at all due to a failed laser eye surgery). Some people are low vision or partially/legally blind. You need distinct shades of gray as a starting point so that the colors you DO choose are viewable and distinct for EVERYONE.

In order to accomplish all this and have colors that look good, please consider this image, obtained by layering a horizontal rainbow gradient in color blending mode on top of a vertical black-to-white gradient (try it yourself, perhaps with a custom color gradient other than rainbow!):

process to recreate this image described above

From darkest to lightest: black, blue, red, magenta, green, cyan, yellow, white.

Can you see the faint zigzag of "pure color"? THAT is the natural value of colors illustrated. Even when using pure colors, blue is darkest and yellow is lightest. Utilize this information to choose colors that both fit the value requirements for gamers whom colorblind and/or low vision AND are aesthetically pleasing to people who can perceive the full majesty of your selected hues.

Hope this helps! :- )



P.S. I want to make sure you've seen this comment as well!

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

\$\endgroup\$
1
\$\begingroup\$

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);
\$\endgroup\$
1
\$\begingroup\$

I want to present an alternative color scheme:

16 colors

These are the RGB colors (same order) with suggested names:

#eeeeee - white
#efef00 - yellow
#00e1da - cyan
#bfbf00 - olive
#12c055 - light green
#e21e80 - pink
#777777 - gray
#c10008 - red
#8900ae - light purple
#7c3900 - light brown
#0029b9 - blue
#400086 - dark purple
#4b1c00 - dark brown
#003004 - dark green
#07004b - dark blue
#111111 - black

Note: I did not use pure black and white, thinking that perhaps they are used as background or outlines.

Metodology: picked 12 colors on the saturated face of the color cube (thinking I would be happy with 12), eyeballing their separation, and then - using a tool to simulate color blindness - started tweeking. Afterwards, I added a near white, a near black, and sneaked a gray, because I could. That gave me 15 colors. I wanted 16 colors because it is a power of 2, and I though it could make things easier for developers. Eventually I found a way to add a 16th color, I had to move the others around for that. Then... check again with the color blindness simulation tool, fix and repeat.

Here are the different color blindness cases:

Normal: 16 colors

Protanopia: Protanopia

Deuteranopia: Deuteranopia

Tritanopia: Tritanopia

Protanomaly: Protanomaly

Deuteranomaly: Deuteranomaly

Tritanomaly: Tritanomaly

Achromatopsia: Achromatopsia

Achromatomaly: Achromatomaly


After playing with the color blindness simulation tool for a while, I have to say, contrast is paramount.

Consider for example, consider the 5th (light green), 7th (gray), and 9th (light purple) colors. They look similar on some cases, in particular in small size and separated by another color. However, put them side by side and you can tell them apart. Increase the area covered in the color and you can tell them apart much more easily. So... designing for color blindness is not only picking colors.

On that note... if you pick a combination of two colors instead of one to represent a faction, this goes a long way.

These color were picked by a very empirical method. I notice that a very important point is to make sure they are all of different brightness. I also notice that most "colors" appear twice (there are two greens, two purples, two browns, etc...). In fact, the 4th color (olive) is the last I added, and I decide it would be a yellow-like color, because there was nothing like yellow. I suppose that can be the basis for a more systemic way to pick colors.

In retrospective, I probably should make the second yellow-like color (olive) darker, and use that brightness spot for a pink (see 7th color). ¿Why? Because it would give you more shades to play with. Ern... this is good enough, and getting all the pictures is a hassle.

Addendum: Something I didn't consider is how LCD screen distord colors if you look out of the prefered angle range.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .