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.
If you are interested how my color theory work looked a few years ago in 2011, here are the relevant documents from the archive:
You can find more old writing in the pdf repository. Enjoy.
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.
Definitions are mostly custom made by me, since most color design literature is specialized for other creative fields – such as painting, print, screen design – and not suited for what we are going to talk about here. However, the following definitions have proven to be quite effective in the field.
Okay, we dig into part 1 now. Let’s talk colors, contrasts, layout, canvas, objects:
Item 001 – Color design as it relates to other art forms:
In non-interactive media, color palettes serve the purpose of creating images. It’s about creating visual interest, sometimes symbolic messages, triggering emotional responses, to make images readable and recognizable. Many of these design goals apply to games as well.
We get even more overlap to games with fields like interior design, industrial design or fashion. Real life spaces and objects need to be aesthetically pleasing and functional, but also need to be used by people.
All of these disciplines provide valuable practices and methods for game designers to create captivating and functional color design. And there is plenty of literature on those subjects. Especially in regards to color in images – painting, cinematography and photography – you should have had access to some basic education in school already.
However when it comes to game design as a discipline we have still a lot to explore as to what language tools we actually have at our disposal and how to use them in games effectively. So this is what this article is mainly trying to focussing on.
Item 002 – Color design as it relates to game design:
Okay, here is what we do. We wont ignore traditional or non-interactive color design for this article, but we will focus on very game design specific goals. For example…
– generating spatial awareness and enabling navigation in virtual environments
– generating physical awareness for objects
Rules and mechanics:
– articulating group affiliations and other relationships between game entities
– enabling operation of machines and devices as well as other interfaces
– labelling game entities in relation to their function in the game rules and mechanics
– facilitating the player’s emotional state in relation to different gameplay simulations
– instant emotional feedback, such as the symbolizing of pain
– creation of an emotional framework for player activities
Item 003 – A helpful definition of color:
There are many definitions of color out there. Depending on the context in which the color is used it may or may not contain black and white as colors, may or may not consider saturation and luminosity. Some systems catalogue colors based on how they are mixed as paint, some use complex numbers and codes, some use terminology like “strawberry red” and “egg white”…
In accordance with the stated game design goals above I’d like to expand on those systems and blow the catalogue of colors open to all concepts of color if they can be colloquially read and named. The idea is to understand colors not as technical properties – such as the property of a pixel or a pen or a piece of cloth – but as concepts on their own.
It’s a semiotic approach to color. Color as language. So when asking a person “what color is this object” any answer you get is part of our color catalogue, even though it might not be found in any technical definition of color. An object can be red, bright red, dark red, blood red, dirty red, it’s colors can be described as muddy, can be golden, black, camouflage colored, or rainbow colored, can have a warm color… and more.
I have yet to find any technical catalogue/system/definition to include color as we humans use it when talking to each other. So I think it’s a bit pointless trying to fit in and let’s just roll with what humans do.
It’s important that we accept what works as language and not retreat into definitions from literature or technology. A GameBoy game is confined to black and white, an Xbox game can do much more. However, black and white cannot mean “no color” or we are blocking ourselves from using color effectively. The black and white Mushroom Kingdom here is just as much a color scheme as the vibrant environments of Enslaved are.
Item 004 – Control through contrast:
Once we open ourselves up to color as meaning – not a technical property – we can combine colors an make them relate to each other to control what we say with color. And we need to. The ways people read color is usually pretty subjective.
The first thing we need to pull off is that the player even gives our designated color cues the necessary attention. This means our key colors need to stand out from the rest of the screen content. Secondly we need to guide the player in attributing some sort of meaning or value to the colors in question, which is usually a matter of relations.
Colors are most meaningful in contrast with opposite meanings. A dark object is significantly dark in a bright environment. A dirty object is significantly dirty if the object was squeaky clean a moment ago. If color A is not contrasted with color B, color A is likely to be overlooked and to not convey the desired meaning to player.
Contrast lives on simplicity and extremes. The more colors and shades you use, the less present a contrast is. If you want to accomplish clarity with your contrasts, it’s important to make the contrasting colors differ strongly, to remove noise and avoid gradients if you want your colors to stand out.
Note above how clearly black, dark grey, light grey and white are readable in row 1 and how the readability of those colors decreases with added increments (2) and finally noise (3).
Item 005 – Color layout:
Layout is the process or result of arranging contrasting colors. Layout can happen spatially – meaning that the two or more contrasting colors are all visible at the same time and are distributed in the available space. It can also be done sequentially – meaning the contrasting colors occupy the same space but appear in sequence or alternate. You can of course do both together.
Effective layout demands another necessary design decision to make contrasts click: weight distribution. When we have two colors in contrast with each other, we still miss information about which color is providing the context for the other and that’s where weight comes in. Weight is achieved by allocating significantly more space/time to one color than to the other.
The two fighting game screenshots below show how weight and contrast affects readability and context of colored objects. Street Fighter 4 suffers from a lot of color noise and a lack of discernable contrasts. The characters and the background each have no distinctively dominating colors. And what makes for a really pretty and colorful image is – from a game design standpoint – really poor color layout. See how the reduced detail version below no longer contains any readable information about the geography of the scene.
Compare this to Nidhogg. While the game is arguably not as traditionally pretty, the color layout is much more gameplay focussed and supports helping the player understand what’s going on. Even in the pixelated edit of the screenshot we can still see the slim corridor and a yellow entity facing off with an orange one. We can also see that there is much more yellow related elements on screen than orange.
Weirdly enough the color with less allocated space/time is usually the one the audience is most interested in. One would think the more space a color has the more importance it suggests. But we are wired to identify objects in spaces. And that’s why the almost monochrome background in Nidhogg gets read as, well, background and the tiny strongly colored blips – yellow and orange – are read as objects.
Take an empty piece of paper and a marker and doodle a tiny thing in the middle of the paper. Even though there is massively more white on that piece of paper, the tiny doodle is what is demanding our attention.
For my work – when I plan my color layouts or when I examine other people’s work – I’d like to separate each possible image into two layers: the canvas layer and the object layer. The object layer includes all the relevant color objects – those we want the audience to recognize and think about, the doodle – the canvas layer provides the context from which the objects can stand out in contrast, the paper.
Objects on the object layer can be in contrast with each other as well, but both need to stand out from whatever color scheme fills the canvas.
This principle applies to individual game assets as well as full screen compositions. See this boss enemy from Vanquish for example. The canvas of this assets is all the grey metal plating and the object layer is all the glowing orange target spots. You can draw a doodle on a white t-shirt as well. It’s important that you don’t equate canvas with background, since even game assets are a canvas to “paint” your color layout onto.
Below are a few examples of sequential layout. The bosses in Super Contra flash white whenever you hit something that hurts them, allowing players to quickly identify weak spots. The crosshairs of Gears Of War switches from white to red, confirming successful aim – a very popular mechanic in most console shooters. And last but not least, wall mines in Splinter Cell have a bright red LED when armed which switches to green when the mine is disabled.
Item 006 – Summary:
Okay, let’s go through all definitions from bottom to top:
– Color layout means the distribution of colors in scenes, images and on individual game assets, such as 3D models, sprites and GUI elements.
– The distributed colors are separated in two groups: color objects are the colored elements that the players should give their attention to and attribute meaning to. Color canvases on the other hand are the contexts in which color objects stand out and can have meaning through contrast.
– Contrast is present when two colors have opposite values or meanings and are arranged together in a color layout.
– Colors in this case oes beyond any technical definition of color and must include colloquial definitions of color as use in verbal language as well.
As a final example for this lesson, let’s have a look at the early court house sequence in Arkham City. The game offers two visual modes to look at the environments and objects in it. Two color layouts for each scene basically. One is the default look which is more about aesthetic priorities than readability. Lighting and textures are delicate and noisy, color schemes are muted but atmospheric. This is super pleasing to the eye and supports narrative goals but it could use a bit more clarity and contrast for gameplay reasons.
This is why the developers installed detective vision. The vision creates a blackish blueish canvas with little to no textures and very reduced details. The canvas is really really dark so it contrasts well with the newly highlighted bright color objects – such as doors, enemies and NPCs. Even amongst the objects contrast is used to separate enemies with firearms from melee enemies with a strong blue versus orange contrast.
Okay, colors, contrasts, layout, canvas, objects… got it? If you got questions and suggestion, please hit the comments with all your might.
Part 2 is tackling using color as identifiers for game objects and connecting them to rules and mechanics.
Part 3 is about worldbuilding with color.
Part 4 is addressing design for people with color vision impairment.
…just so you know what to expect the next couple of days.