Sponsored By

Where Colour meets Design - Colour Palettes and Game Design

What is colour to us? It�s a feeling. A mood. Something that makes you connect with someone, or triggers an emotion. Colour is a tool. More than just for the artist's discretion. Its an aspect that goes beyond art and bridges into design

Brianne Stephenson, Blogger

April 6, 2017

10 Min Read
Game Developer logo in a gray background | Game Developer

What is colour to us? It’s a feeling. A mood. Something that makes you connect with someone, or triggers an emotion. Colour is a tool. It is used in video games for more than just for aesthetic rational. Colour can be a guide, it can be a director, and it can be a courier. Colour in games allows the players to interact and involve themselves further into the game world.

With media such as film, colour tends to be analysed. We look at the use of shadow and coloured light when analysing a scene. In a painting, we see the use of specific hues or shades that set the tone of the piece. In film, we see how coloured lighting can foreshadow an event. These aspects of artistic design continue past the world of film and visual art. Video games follow these rules as well and even used colour as a tool in design. With the use of colour comes the creation of a colour palette. This acts like a set of artistic guidelines for the creation of your games aesthetic. For this article, I’ll be focusing on 5 types of palettes. This narrows down to:  Analogous, Monochromatic, Triad, Complementary, and Compound.

       Creating your game through colour

A palette should be suited to your game. Know how you want the player to interact, or even what you want them to interact with. What is it you want the player to feel or see? Colour can do this. From directing your player through puzzles, to making a scene feel tense, colour is part of your tool belt. Some games, such as Mirrors edge even direct the player, using red to implicitly direct the player along the path they need to travel. As Mirrors edge is a fast paced game, the implicit direction provided by this element helps players make decisions quickly, with some players not realising that this is a directional queue.

  A more artistic look into your palettes

Looking into the palettes of your game, and looking specifically at Aesthetic's, this example will be starting with Analogous. These palettes have one dominant colour, which tends to be a primary or secondary colour and usually two tertiary colours. Simply stated, this is a set of colours that are beside each other, or a gradient in a colour wheel. Analogous palettes can be used for an environment or to create a harmonious feeling in scenery. One colour dominates while the other accent. Black, grey or white can also be used as an accent in this palette.  

Source - X

Ori and the Blind forest shows how an Analogous palette can display nature in a scene, but also provide definition between safety and danger. In this example, the greens and blues are the analogous palette, but the addition of pink outside of the main palette creates a contrast between safety and danger,a nd helps players make quick decisions based on the colour. This can also help to direct the player and create a connection between colour and Ori being damaged by something of a specific hue.

Monochromatic colour palettes are one of the easiest to understand but generally restricted to shades of grey when used. Monochromatic colour palettes contain only one colour, but uses shades of this colour. This can be shades of red, going from vibrant and bright, to bloody, to dark. Monochromatic colour palettes are useful for making the world shown in game bleak, or unsafe or even showing depth in the world.

Source - X

Limbo does this well, creating a feeling of unease with the contrast between the bright whites and overwhelming blacks. The dark backgrounds help facilitate the feeling of the main character being lost and in danger. The bright light that is occasionally seen is startling and creates a depth in the game world and often helps the player understand what is int he foreground and often interactable.

Source - X

Another example of a game that uses a monochromatic palette is Outlast. Outlast uses multiple colour palettes in different sight modes (camera vs regular vision) but the monochromatic colour palette is the one associated with the game the most. The shades of green as seen by the main character through his camera is a creative and believable use of this palette. This also helps to increase the unease the player feels, making the environment seem almost supernatural. Blood is no longer red but an uneasy shade of green. The contrast is higher, making the dangerous darks, darker and the bright lights blinding. This adds to the feeling of anxiety during play and makes the asylum feel more involving.

A Triad Colour palette is harder to find in games, but often used as a supplement to the main palette. With the triad colours, one is the dominant colour. This dominant colour changes the entire feel of the scene. A scene with overwhelming red and supporting blue and yellow feels completely different from the same set of colours with blue being the dominant colour. On triad palettes, the three colours are equally spaced from each other on the colour wheel. This is also not limited to just three colours either. As triad colour palettes can use six tertiary colours, it can use the same baseline as an analogous palette.

As a triad palette can be so versatile, it can be missed when in use and is always arguable due to its overlap with other palette types. A beautiful example of the use of a six-colour triad palette is Bastion.

Source - X

In this example, the scene has a balance between the orange and green, almost seeming analogous. However, the use of darker orange-reds and the blue to purple backdrop shows the use of a tertiary triad palette.

A more obvious use of a Triad palette is DeadCore. 

Source - X

DeadCore uses a (nearly) primary triad palette with the support of black and white to add to the definition of the scene. Triad colour palettes are more common in the visual arts as it is easier to use the triad palette to make other colours from it. A pure triad palette can be basic, and is therefore not used as often in games, but with the above example, creates a vivid style when combined with the dominantly black environment of DeadCore.

Finally, Compound colour palettes and complementary colour palettes use one colour or hue and two other colours equally spaced by the contrasting colour of first. It can also use two complementary hues and their contrasts (for example, fuchsia with its green contrast and red with its contrast cyan). These palettes are harder to use but can give a unique and contrasting visual to your game. This palette type also includes split complementary palettes. Split complementary are similar to that of triad palettes but use two colours spaced one shade away from the dominant complement. An example being Green and Red. Green’s complement is red, however with a split complementary palette, you would use fuchsia and orange-red; the tertiary colours either side of red.  Complementary colour palettes provide a vivid contrast in colour and easily seen with games that use Red and Green to signify health and damage.

Source - X

An example would be Portal. Portal uses Compound colour palettes in their game environment. The contrast between the orange and blue portals with the support of blacks, greys and whites creates a unique aesthetic. This also aids with the visibility of the portals, leading players to be able to quickly identify elements in the game such as the portals themselves or the blue and orange goo in Portal 2. Portal also uses high contrast colours that can be easily visible by players with colour blindess. 

 

       Can palettes be used in conjunction with each other?

Palettes are in no way restricted to one in a game. You can even do more than one in a scene. As seen above with Ori and the Blind forest, the main scene shown uses an analogous palette of greens and blues. However, it is not restricted to just the analogous palette. The addition of fuchsia or pink is not just striking but also the contrast to the green in an analogous palette. This scene uses a compound palette addition to their main palette. Outlast does the same thing. Not only does it use multiple palettes throughout the game, its monochromatic palette uses a complement of red for the UI through the camera. Both of these striking differences also helps to direct and passively explain to the player that bright pink in Ori is dangerous, and red in Outlast is important. Through the use of colour, design elements can be further explained to the player without directly telling them a rule in the world.

When creating your main palette, including secondary palettes or additions can work, but need to be executed with caution. Palettes can clash. They can seem out of place or even pull the player from flow. Use your palettes on test scenes or in concept art to see how it looks. Some variations may look inferior where others look fantastic. Don’t be afraid to try something odd. Just like with all other artistic rules, when you know them, know how to break them.

 

       What about colour blind players?

Colour-blindness is something that isn't always thought about due to the limited player base that is colour blind players. However, there are tools for you to use when developing the palette of your game (Such as Color Oracle) which cna help you find out if your game is accessible to colour blind players.

There are 3 main types of colour blindness: Deuteranopia, Protanopia and Tritanopia (As well as Greyscale colour vision) Due to these differences, some palettes and colour combinations are more suited to specific types of colour blindness than other palettes.

Monochromatic(Greyscale) palettes work for all types of colour blindness but isn't necessarily the best choice. Games like Limbo or Inside work well in a monochromatic colour palette as they are (or nearly are) grey scale. Unless your game is using this palette, to begin with, you may want to see if monochromatic palettes are the right choice as a colour-blind option. Monochromatic palettes creates a specific atmosphere, so tonal shifting your game for colour-blind players might not be the best course of action for the entire aesthetic.

Games like Splatoon use colour sets known as high contrast colours. These sets of colours (such as purple and green, blue and orange, or cyan and fuchsia) are setup to avoid the issues of colour blindness. By avoiding red-green, yellow-green-red, and blue-red, their game is accessible to colour-blind players while still looking good to normal sighted players. As mentioned above, this is also found in portal, where the minimal use of colour and high contrasting colours makes portal more accessible to colour blind players.

Conclusion

Whether colour is your focus or your backdrop, it is a tool that should not be ignored nor underestimated. A colour palette is not just a set of colours. It is a bridge from art to design to accesibility. Considering colour when designing your game can help not only your aesthetics but even the dynamic of your game and further cement your mechanics in the game world. Colour can help define your game. It can help pull players farther into the game world and further into flow. 

Read more about:

Blogs
Daily news, dev blogs, and stories from Game Developer straight to your inbox

You May Also Like