Tag: colour theory

Colour Theory for Game Design and Animation: Meaning, Harmony, Contrast and Colour-Blind Accessibility

Aven BrisailLeave a comment

Colour theory is the set of ideas that explains how colours are made, how they relate to each other and how they affect the way people feel and behave. It covers the colour wheel, colour harmony (combinations that look good together), contrast, and the meaning or psychology of colour. In animation and game design, colour theory is a tool for guiding attention, setting mood, telling story and giving players information.

The basics – primary, secondary and tertiary colours, warm and cool colours, hue, saturation and value – were introduced in Colour Theory, Texture, Composition and Layout. This post focuses on why colour theory matters in animated and interactive work, and on designing colour that every player can read.

Circular colour wheel divided into twelve segments from red through orange, yellow, green, blue and violet
Figure 1 – A simple red–yellow–blue (RYB) colour wheel. Colours opposite each other are complementary; neighbours are analogous. Image: Revulo.Studio, CC0, via Wikimedia Commons.

Quick review: colour harmonies

  • Complementary: colours opposite on the wheel (blue and orange). Maximum contrast – great for making a hero or a pickup stand out.
  • Analogous: neighbours on the wheel (yellow, yellow-orange, orange). Calm and unified – great for backgrounds and moods.
  • Triadic: three evenly spaced colours (red, yellow, blue). Lively and balanced, common in children’s games.
  • Monochromatic: one hue in different values and saturations. Stylish and moody, useful for flashbacks or menus.

Why colour theory is important in animation and game design

1. It guides the eye

Players must spot what matters in a fraction of a second. Designers give important objects higher saturation, brighter value or a complementary colour against a muted background. Many games paint climbable ledges or interactive objects in one consistent colour so players find the path without a tutorial.

2. It sets mood and tells story

Animators plan a colour script: a strip of small paintings that shows how the colour of a film changes scene by scene. Warm golden light can signal safety and happiness; cold blues can suggest loneliness or mystery; a sudden shift to red can announce danger. Games do the same between levels, or between day and night.

3. It communicates information

Colour is part of the game’s language: green health bars, red damage numbers, gold for rare rewards, team colours in multiplayer. Once these rules are set, they must stay consistent – or players will make mistakes.

4. It builds identity and brand

A strong palette makes a game or animated series recognisable from a single screenshot. Think of a series you know well: you can probably name its main colours.

5. It links to culture

Colours carry different meanings in different places. White is linked to weddings in many Western countries but to mourning in parts of Asia; red can mean luck and celebration in Chinese culture. Designers creating for a worldwide audience research these meanings (we look at culture more closely later in this module).

6. It affects accessibility

About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency (colour blindness), most often difficulty telling red from green. If a game uses only red versus green to show enemies versus friends, many players cannot play fairly.

Rows of coloured swatches showing how palettes change for different types of colour blindness
Figure 2 – The same colour schemes as seen with normal colour vision and with different types of colour blindness. Some pairs that look very different to one person become almost identical to another. Image: Krit-tonkla, CC BY-SA 4.0, via Wikimedia Commons.
Two photos of red and green apples, the second showing both apples in similar yellowish tones
Figure 3 – Red and green apples, and a simulation of how the same apples may look to someone with red–green colour blindness. Image: Limbicsystem at English Wikipedia, CC BY 2.5, via Wikimedia Commons.

Designing colour for everyone

  • Never use colour as the only signal: add shapes, icons, patterns or text (for example a skull icon on enemies, a tick for correct answers).
  • Check value contrast: turn your screenshot greyscale. If important things disappear, increase the difference in lightness.
  • Offer a colour-blind mode or custom colour settings where possible.
  • Test with free colour-blindness simulators before release.

This video from Tiny Shiny Things shows how an indie developer uses colour theory (and shape language) to make a game readable and appealing:

Example

A small team is making a cartoon game about a reef clean-up. Their colour plan looks like this:

Part of the gameColour choiceReason
Healthy reef levelsAnalogous blues, teals and soft greensCalm, natural and unified.
Player’s diverBright orange suitComplementary to the blue water, so the player is always visible.
Rubbish to collectSaturated yellow with a white outline and a sparkle iconHigh contrast plus a shape cue that works for colour-blind players.
Polluted areasDesaturated brown-greyShows the damage visually; colour returns as the player cleans up.
UI panelsDark navy with white textStrong value contrast for readability.

The colour itself becomes a reward: as the player cleans each area, the reef “re-colours”, turning a game mechanic into a visible story.

Exercise

  1. Define colour theory in one or two sentences, then list four reasons why it is important in animation and game design.
  2. Choose a game or animated film. Describe its palette and explain how the colours support the mood or story.
  3. Create a colour plan (like the table above) for a game idea of your own. Include at least one complementary pair.
  4. Take a screenshot of a game and convert it to greyscale. Is the important information still clear? Suggest two changes that would improve accessibility.

Next: Story Arcs, Game Scripts and Storyboards for Interactive Games

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 2: Interactive Design and Game Development, Module 1: Introduction to Interactive Design – Specific Objective 16 (“define Colour Theory”); Specific Objective 17 (“outline the importance of Colour Theory in animation and game design”).

Attributions to media used in this post:

Simple RYB Color Wheel without Title.png – Revulo.Studio – CC0 (via Wikimedia Commons)

Color schemes when viewed by color-blind people.jpg – Krit-tonkla – CC BY-SA 4.0 (via Wikimedia Commons)

Braeburn GrannySmith dichromat sim.jpg – Limbicsystem at English Wikipedia – CC BY 2.5 (via Wikimedia Commons)

© 2026 Vedesh Kungebeharry. All rights reserved.

Colour Theory, Texture, Composition and Layout for Animation and Game Scenes

Aven Brisail3 Comments

A good environment is not only drawn in correct perspective. It also needs the right colours, believable textures and a clear composition so that the viewer knows where to look. Colour theory is the set of ideas that explains how colours mix, how they work together and how they make us feel. Layout is the planning of where everything – characters, props and the camera – goes in a scene.

Colour theory

The colour wheel

The colour wheel arranges colours in a circle so you can see how they relate. The traditional painter’s wheel uses red, yellow and blue:

  • Primary colours – red, yellow and blue. They cannot be mixed from other paint colours.
  • Secondary colours – orange, green and violet, made by mixing two primaries.
  • Tertiary colours – such as red-orange or blue-green, made by mixing a primary with a secondary next to it.

Screens work differently: they mix light, and their primary colours are red, green and blue (RGB). That is why digital art software lets you pick colours using RGB values or a hex code such as #FF8C1A.

Colour wheel with twelve labelled hues
Figure 1 – A red–yellow–blue (RYB) colour wheel showing primary, secondary and tertiary colours.

Hue, saturation and value

  • Hue – the colour family (red, blue, green…).
  • Saturation – how strong or dull the colour is.
  • Value – how light or dark the colour is. Adding white makes a tint; adding black makes a shade.

Colour harmonies

Colour harmonies (colour schemes) are combinations that usually look good together:

  • Complementary – two colours opposite each other on the wheel, such as blue and orange. They create strong contrast and are great for making a character stand out from the background.
  • Analogous – three or so colours next to each other, such as yellow, yellow-green and green. They feel calm and unified, which suits a peaceful forest.
  • Triadic – three colours evenly spaced around the wheel, such as red, yellow and blue. They feel bright and playful.
  • Monochromatic – different tints and shades of one hue.

Colours can also be warm (reds, oranges, yellows) or cool (blues, greens, violets). Warm colours tend to feel energetic and seem to come forward; cool colours tend to feel calm and seem to move back, which also helps with depth.

Squares showing complementary colour pairs
Figure 2 – Pairs of complementary colours from the traditional colour wheel. Each pair creates strong contrast.

Texture

Texture is how a surface feels or looks as if it would feel: rough bark, smooth glass, wet sand, rusty metal. Actual texture can be touched (for example on a clay model), while visual or implied texture is created with marks, patterns, highlights and shadows. In 3D games, images called texture maps are wrapped around models to give them surface detail. Using a variety of textures makes an environment feel real and helps the player tell surfaces apart, such as which floor is slippery ice.

Composition and layout

Scene design

Composition is how the parts of a picture are arranged. Some useful guidelines:

  • Focal point – decide on the most important thing and make it stand out using contrast, colour or light.
  • Rule of thirds – divide the frame into a 3 × 3 grid and place important things on the lines or where they cross.
  • Leading lines – roads, rivers or fences that lead the eye towards the focal point.
  • Balance and framing – spread visual weight around the frame and use foreground objects such as trees or doorways to frame the action.
Two photos compared, one cropped using the rule of thirds
Figure 3 – The rule of thirds: in the edited version on the left, the rock pillar sits on a third line instead of near the centre (original on the right).

Blocking

Blocking is planning where characters stand and move in a scene, and where the camera is. In animation, the layout artist blocks out each shot with rough shapes before any detailed drawing, so the director can check the staging. In game design, level designers make a blockout (sometimes called a greybox): a quick version of the level built from plain boxes to test the size, paths and gameplay before the final art is made.

Painted concept art of a hut in a misty forest
Figure 4 – Concept art of a hut from the open movie Sintel. Notice the textured wood and rock, the limited colour scheme and the framing trees.

Example

For a scary night level in a jungle, you could choose an analogous scheme of dark blues and greens, then light a doorway in warm orange as the focal point (a complementary contrast). Rough bark and wet leaves give texture, and the doorway sits on a rule-of-thirds line. A quick blockout checks that the path to the door is clear before you paint anything.

Follow along with the video below, which explains the colour wheel and colour harmonies:

Exercise

  1. Paint or digitally colour a 12-part colour wheel. Label the primary, secondary and tertiary colours.
  2. Colour the same simple landscape twice: once with a complementary scheme and once with an analogous scheme. Which feels calmer?
  3. Make a texture sheet of six squares: rough, smooth, wet, furry, metallic and wooden.
  4. Sketch a scene using the rule of thirds, then draw a top-down blocking plan showing where two characters and the camera are.

Next: What Is a Level in Game Design? Structuring Gameplay and Outlining Your First Three Levels

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 1: Fundamentals of Animation and Game Design, Module 2: Drawing and Layout – Specific Objective 4 (“apply knowledge of design principles for environmental design”); Specific Objective 2 (“apply drawing and design principles for layout /environment and character development”).

Attributions to media used in this post:

Simple RYB Color Wheel without Title.png – Revulo.Studio – CC0 (via Wikimedia Commons)

Constrast of Complementary Colors – Clearer Version.png – 0xva – CC BY-SA 4.0 (via Wikimedia Commons)

RuleOfThirds-SideBySide.gif – Teeks99 (derivative of a photo by Pir6mon) – CC BY-SA 3.0 (via Wikimedia Commons)

Environments-02-shaman-hut.png – David Revoy / Blender Foundation – CC BY 3.0 (via Wikimedia Commons)

© 2026 Vedesh Kungebeharry. All rights reserved.