Colour for environments

Colour in an environment does three jobs: it sets the mood, it separates spaces, factions and characters, and it guides the player. It does all three on top of value. If the value structure is weak, colour cannot rescue it; if the value structure is strong, a small amount of colour goes a long way.

This page is about colour as an art-direction tool. The technical side (sRGB, linear and colour management) is in colour space: sRGB and linear; grading is in colour grading and LUTs.

#The three properties

• Hue: the colour family: red, orange, blue and so on.
• Saturation: how intense or grey the colour is.
• Value: how light or dark it is. See value.

Most readability problems come from value. Most mood problems come from hue and saturation. Keep the two questions separate when you critique a scene: check it in greyscale first, then in colour.

#Colour and mood

Jane Ng, an artist at Campo Santo who worked on Firewatch, says: "The colours are not just there to look beautiful. They really do drive the mood of the scene" (Thumbsticks: GDC 2015: The Art of Firewatch). Her GDC 2015 talk covers translating "a bold 2D graphic style into the game's vibrant 3D environments" (Game Developer: Video: Inside the art design of Firewatch).

Three details from her talk are useful for other projects (Thumbsticks: GDC 2015: The Art of Firewatch):

• The sky decides most of the palette outdoors. "Since Firewatch takes place in the outdoors the biggest chunk of colour is actually determined by the sky."
• Colour sits in layers. "There are beautiful and bold colours here and they are in very distinct layers", with fog supporting "depth and distance". See fog and atmosphere.
• The style started from key art. Ng credits Olly Moss's poster designs as the starting point for the 3D look.

#Colour as an image system

Art directors often attach colours to meanings across a whole game. On The Last of Us Part II, red was an image system chosen early by director Neil Druckmann, used for "an almost surreal feeling in certain parts of the game", while "Blue was an image system used to incite memories of the trauma Ellie undergoes in Jackson" (Cook & Becker: Art directing The Last of Us Part II). Art director John Sweeney researched how red was used in films such as The Shining and Natural Born Killers, and started "color scripting the game" (Cook & Becker: Art directing The Last of Us Part II).

A colour script is a sequence of small colour keys for each part of a game or film, so the palette develops on purpose rather than by accident. It is a good habit for a portfolio piece too: one colour key per area, pinned beside your viewport. See art bibles and style guides.

#Colour for separation

#Characters from the world

Valve designed Team Fortress 2 so players could identify each other quickly. Its world uses colours that "border on realism, but with increased saturation and value contrast", with "muted colors dominating and small areas of saturation" (Mitchell et al. 2007). Characters carry the strongest colours; the environment steps back.

#Teams and factions

The same paper describes the two teams' bases: the red base "tends to use warm colors, natural materials and angular geometry", the blue base "cool colors, industrial materials and orthogonal forms" (Mitchell et al. 2007). Colour, material and shape language all say the same thing, which makes the read robust.

#Areas from each other

Riot's VALORANT team uses colour to tell areas apart, for example a yellow shipping container on Icebox's B-site, alongside simple callout names such as "kitchen" (playvalorant.com: The Art of VALORANT Map Environments). In a competitive game, a colour landmark is also a communication tool. See landmarks.

#Colour for guidance

A saturated accent in a muted scene pulls the eye. Piaskiewicz notes that "Picking an intense color or making heavy contrasts can make a big impact on your composition", citing intense orange catwalk stairs in Mirror's Edge and a barn in Alan Wake whose colour differs from the scene yet still fits (Game Developer: Composition in Level Design). The Level Design Book lists colour contrast among wayfinding tools, for example a "bright blue door in a dark orange landscape" (The Level Design Book: Wayfinding).

#Warm and cool

Colour temperature describes whether light leans orange (warm) or blue (cool). It is relative: a light reads warm or cool only in comparison with the other light in the scene.

Warm–cool contrast is a staple in game scenes. Andrew Lund III's winter street pairs a cold, bluish skylight with warm street lamps and windows, and pushes post-processing "towards blues in the mid-range and shadows" (80 Level: Winter Street Scene: Environment Production…). The Level Design Book's gallery study uses "Cooler grays wash a gallery wall, warmer lamps highlight counters" (The Level Design Book: Lighting).

#Realistic and stylised colour

Realistic projects start from measured surfaces and real light, then grade for mood. Stylised projects start from key art and push saturation, hue shifts and simplified palettes. Both need a limited palette and a value plan. The difference is how far each colour may drift from what a camera would record. See physically based rendering, base colour (albedo) map and hand-painted and stylised texturing.

Whichever you choose, keep these habits:

• Limit the palette. A few hues per area, one accent.
• Keep saturation for meaning. If everything is saturated, saturation no longer signals importance.
• Grade last, lightly. Sobotta mentions using LUTs to finalise "lighting and color correction in an outside program" and calibrating your monitor (CGSociety: How to Create a Stunning Portfolio with Jared…). Grading cannot fix a broken base palette.

#Colour and accessibility

Colour alone should never carry critical information. Microsoft's Xbox Accessibility Guidelines state: "Color alone should never be used to represent information", and anything critical "also needs to be expressed by using at least one additional signifier such as shape, pattern, iconography, or text labels" (Microsoft Learn: Xbox Accessibility Guideline 103). The guidelines warn that red and green outlines for enemies and allies fail for players who cannot tell the two apart, and that simulation filters "shouldn't be used as a replacement for testing with actual players with colorblindness" (Microsoft Learn: Xbox Accessibility Guideline 103).

For environment artists, that means pairing colour cues with value, silhouette, shape or lighting. A climbable ledge marked by colour should also read by shape; a team base marked by red should also read by its architecture, as Team Fortress 2 does (Mitchell et al. 2007).

#Related pages

value · light and shadow · colour space: sRGB and linear · colour grading and LUTs · fog and atmosphere · landmarks · wayfinding · art bibles and style guides · hand-painted and stylised texturing

#Further reading and watching