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.
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.
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.
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:
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.
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). These countries all have some very simple-looking, yet distinctive flags:
| Switzerland | Somalia | 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)
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 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.
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
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
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
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."
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.
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.
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!):
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
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);
I want to present an alternative color scheme:
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:
Protanopia:
Deuteranopia:
Tritanopia:
Protanomaly:
Deuteranomaly:
Tritanomaly:
Achromatopsia:
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.
