This is a multipart article on color design for games. It is aimed at game designers and game artists alike and focusses on how to use color when crafting player experiences.
This is part 2 Let’s talk color identifiers, glyphs and neutrals:
Item 001 – Colors as identifiers:
Sometimes color can have figurative or symbolic meaning or be an index for something else. Sometimes the guy with the red shirt was bleeding heavily, sometimes he is the first to die on a mission in Star Trek, sometimes he is Santa Claus. Aaaannnd sometimes a red shirt is just a red shirt. Sometimes colors are icons for themselves and a red thing just “means” red thing.
This treatment of colors as icons for themselves is quite common in games, sports or interaction design. There is no additional meaning behind the color, it’s just a marking that allows us to recognize an object by its color.
On a Rubik’s cube the colors have no meaning. There is no difference between blue and red squares except that they are blue and red. The tokens on this pacheesi have no different properties for differently colored groups, no different roles in a story, no ranking or special abilities. Just color.
Even though the colors have no inherent meaning – beyond identifiable color – they serve a purpose. They connect objects to rules and mechanics. The cube has six groups of squares, each with nine squares in it and the goal of the game is to bring all nine squares of each group together on one side of the cube. Which square belongs to which group is indicated by color.
In pacheesi the goal is to move your four tokens from your own start fields to your own finish fields. Which tokens belong to you, which start fields and finish fields are yours… all is indicated by color.
These function of the color coded object needs to be established through rule sheets, tutorials and other explanations, so that the player can learn which color connects to which mechanic or rule. But the colors themselves do not inherently contain those meanings. Sure, colors like red can have a lot of symbolic or emotional connotations, but this aspect of colors is saved for part 3.
Color identifiers can group and separate game elements clearly, which is super helpful to make them readable and discernible even in complex and cluttered screen layouts and moments. Note below how many GUI objects in the character select screen and in the battle screen are colored red, blue, yellow or green to identify them as belonging to player 1, 2, 3 or 4.
Color identifiers however have their limits when it comes to designing for color vision impaired players. More on that and few suggestions for solutions in part 4.
Item 002 – Glyphs versus neutrals:
So how do I get color identifiers to work for me? Below there are three tiny challenges. Each challenge demands that you connect the remaining two colors to their respective label. Only one label per color. Without the help of digital color picking tools and without guessing – try to solve them.
This should have happened now:
1 – Any regular human being should not be able to read hex code and to also be able to distinguish between the subtle nuances of the boxes enough to confidently connect the remaining two colors. If you are some sort of super color trained cyborg, good for you.
2 – You should not have been able to connect the red colors with confidence, since the labels say “red” two times, which is accurate but too ambiguous to give a clear answer. Remember, no guessing.
3 – You should have been able to solve this.
Challenge 1 has colors that are intrinsically hard to label. Sure, you could come up with your own labels easily, but if I ask somebody else to name those colors, I will get different answers. Challenge 2 has a confusing ambiguity, by having two colors which are too similar and two labels asking for the same thing. Challenge 3 works fine because I made sure that all colors are easy to label – using common names for colors we have already learned as toddlers – and I made each color-label-combination mutually exclusive.
This leaves us with two rules to use color glyphs in a clear and readable fashion:
How easy to label a color is for an observer is dependent on how much training/education the observer has in regards to color. A painter or graphic designer can probably distinguish more colors verbally than an average player could. However we cant ask our audiences to be color experts, if our goal is to communicate to a lot of people. We need a base that works for most people.
Using visual elements that your audience can verbally name is in general a good rule of thumb, if you want to ensure your visual language is consciously read and understood. Here, using only primary and secondary colors is the way to go:
These types of colors are taught to us from very early on – often even as part of how we learn to speak. There are few more colors we have learned to label, such as black, white, rainbow color, gold. A big exception is pink. Pink is often used as prominently as any primary or secondary color in cases of female genderization.
In the Turtles example below, green is an easy to label color, alright. But it is use on all four turtles, so asking a viewer to point to the green turtle is too ambiguous to yield predictable results (see exercise 2 from earlier).
The fact that the green color is not mutually exclusive makes it a somewhat useless color for asking who is who amongst the turtles. The color does no longer function as an identifier, only the exclusively colored accessories do. We are distinguishing here between the glyphs red, blue, orange and purple, while green became a neutral color.
To wrap this up:
– color glyphs are colors that are used to make an object identifiable by color. In order to function like that, they need to be easy to label (best: primary and secondary colors) AND need to be used in a mutually exclusive fashion.
– All other colors in any given color layout are further referred to as neutral.
Item 003 – Glyphs and neutrals in color layouts:
The perfect fusion of well done color layout and good use of glyphs and neutrals happens when neutrals are used for the color canvas and glyphs are used to make the color objects stand out.
As discussed in the previous part, canvases provide the context for color objects and objects are what the gameplay moment is about. So it makes sense to make objects as significant and readable as possible, while canvases become more neutral.
Team Fortress 2’s character models provide a canvas made of neutrals like shades of brown, flesh tones and greys. But relevant for gameplay are the glyphs that make up the color objects on each model. They are most significantly either blue or red to signify team affiliation by being mutually exclusive. There are also yellow objects – limited to ammo assets. This color pattern applies to the map design as well.
Or Portal. All environments deliver a neutral grey tone canvas for the glyph colored orange and blue portals. Same goes for the gun, again grey tones as canvas and a clearly readable orange glow to signify the color of the next portal projectile.
The Gears of War series – often decried for its greyishness – is just very heavy on neutrals and uses a strict color coding systems to mark gameplay relevant objects. Soldiers and enemy units, vehicles and ammo crates are all greyish canvases decorated with tiny blue lights for COG and red lights for Locust. Gears 1 and 2 both dealt with two factions and therefore established two color identifiers – red versus blue. Gears 3 added a third faction for which yellow was chosen.
But I’m going ahead of myself…
Here is the thing:
Color identifiers work best when they are represented by objects that are glyph colored on a canvas that is composed of neutral colors. Try to spot the pattern in the examples below.
Item 004 – Establishing 2 color identifiers:
Depending on your set of rules or mechanics you want to have two or more color identifiers. Let’s focus on two for a moment.
Many classic competitive set ups are based on two factions duking it out. Wars, sports, duels, classic games like chess, fighting tournaments. 2-player game sessions or team based combat are benefitting greatly from the use of two mutually exclusive color identifiers to mark factions.
Note below how the glyphs red and blue are used in a mutually exclusive way and how the neutral colors of the canvases allow for the red and blue objects to stand out:
Same goes for marking environments for two factions, when the mechanics support territorial conflict.
Of course there are plenty more use cases for a color dichotomy. Some even with additional symbolic or emotional meaning. Such as good-versus-evil moral systems, binary on-off states of devices, different powers and resources and many more. This dichotomy however demands clear color communication and designers prefer to make the two color identifiers of choice as opposite from each other as possible.
They do this by creating a vibrant warm-versus-cold contrast. Blue and red are frequently preferred colors to be contrasted with a cold or warm primary or secondary counterpart. This either gives us red-versus-blue, red-versus-green or blue-versus-orange contrasts. This is easy to map on a classic color circle, as you can see below.
Item 005 – Establishing 3 or more color identifiers:
When game designers create more than two color identifiers for their game, it’s observable that the selection of color follows a certain pattern of priorities. Three usually means red, blue and yellow. It makes sense: all are primary colors and as far away from each other colorwise as possible. Then the secondary color green is added for four, and further we go with orange and finally purple. When the first six colors are used up, designers resort to additional glyphs, such as grey, turquoise, white, black.
For Gears of War 3 all three factions have their unique mutually exclusive and easy to label color objects. Red for Locusts and blue for COG and – with a twist – yellow liquid to mark the Lambent as its own faction.
New Super Mario Bros for Wii is a four player multiplayer title in need of four color identifiers to represent character, GUI elements and other objects in relation to each player. Note how Mario’s and Luigi’s blue pants are not mutually exclusive – damning them to be neutral between the two and making the red and green stand out as glyphs.
Even when playing with custom characters note how the mutually exclusive coloring of their shirts follows the red-blue-yellow-green glyph pattern below.
Let’s quickly check out more examples, including some exceptions and special cases regarding the priorities I mentioned before. Most of the cases below show four color identifiers with red, blue, yellow and green. But a few don’t. Why?
We already talked about how the green skin and yellow chest plates eliminate those two colors from the pool of glyphs in the Turtles designs. Yellow and green are downgrade to neutrals, they are the canvas now. This forced the designers to skip yellow and green and directly jump to orange and purple. Princess Peach as an iconic (and heavily gendered) character is already known to be mainly pink, changing that for the four player game above would remove her recognizable color scheme. And finally – similar to the Turtles design – the four Links needed to skip yellow as a tunica color because their hair is already yellow and glyphs need to be exclusive to the objects they represent.
Item 006 – Wrap up:
When planning how your characters, environments and props should be colored, a lot of consideration needs to go into materials, moods, symbolism and emotional impact. But gameplay has it’s own requirements and it’s imperative to think about the use of glyphs and neutrals for your color layouts as well. These devices are super effective to mark objects – not only becasue of how readable they but also because of how common the use of those glyphs is and how trained the average player is in spotting them.
I hope this helps you get a small inside into how to use glyphs and neutral to your benefit and if you got suggestions and questions, don’t hesitate to use the comment section. Also if you found this article helpful consider sharing it and tipping the blog monkey below. Thanks.