H / S / V for Good Games

Hue, Saturation, and Value tell us precisely what each color is, but the differences between that color and others around it tell us how create gameplay that’s clear to see.

If players can’t pick up the changing details of the world, “feel” what they’re controlling, and get directed toward the next steps, the game will feel slow and frustrating.

[ blanched image – where UI and items aren’t clear enough to stand out ]

Like a meal made out of all sorts of heavy seasoning, if each of these elements stand out, the game will feel busy and frustrating.

[ busy image – Where’s Waldo style illustration, or isometric city ]

Great Art! What a bad game.

Choosing colors for a game starts with deciding what is in the foreground and background. Setting similar colors in the foreground in front of an opposing set in the background helps your player see what they’re controlling and interacting with.

foreground: assets on the same depth as the player (enemies, obstacles, ground planes, snacks to pick up, etc)

[ highlighted / isolated foreground ]

background: environment beyond the player (an abstract rainbow cloud pattern, a mountain landscape, a set of distant planets, etc)

[ highlighted / isolated background ]

contrast: amount of difference (black and white are high contrast, whereas light grey and baby blue are low contrast)

[ high contrast and low contrast asset pairs or mock-ups / screens]

This background is mostly dark colors (values < 100). All colors in the foreground are somewhat brighter (values > 150).

[ image described, with many foreground elements of a similar size and saturation as the background ]

There’s a lot going on. It’s hard to say what is bad or good, or where the player supposed to go. To draw a player’s attention, organize what is most important for them by making those elements differ the most from the background. Let’s change the player first.

[ image with player char adjusted to stand out, values > 180]

The rest depends on your game. Enemies in a side-scrolling platformer – like Hollow Knight (* or Hollow Knight-like) – need to stand out immediately, but if they’re blinding and take up a lot of screen space, it becomes taxing to focus on moving quickly and spotting other screen elements without attention being pulled constantly toward the bright enemies.

[ images with different color adjustments of the enemies and background ]

It’s helpful to note that color is not the change to draw attention. Making any asset different from others in view will lure in attention, too. A few factors to try beyond color are:

– size

– animation quality / speed

– asset detail

– shape

[ images with different asset qualities of the enemies and background ]

The foreground and background colors are still highly contrasting, but the action is easier to see than the first example when other aspects of the foreground are balanced.

Deciding what is the most important comes from figuring out what the “fun” part of your game is. Is it dodging lasers, or solving puzzles by scooting around rocks with runes? Before the art is finished, try making whatever you decide players should zone in on the most contrasting – and then send it to others to see what stands out! Don’t be afraid to watch them mess up without instructions, or prototype a color scheme with incomplete art.

[ image of lofi prototyped scene ]

The next lessons go on to discuss the feeling, meaning, and lifelike qualities of color. Heading to [ link for color scheme designer ] or using a [ link to color picker ] are easy ways to brainstorm color combinations.