Color Contexts
No color alone is good or bad, but the same color can shift if we change the colors around it.
[ two images, colored differently to show focus (ideally of the described image) ]
Our eyes and brains are wizards at making adjustments to switch for new lighting conditions, and see the mess of grays and blues and purples as a red apple at dusk.
Trusting palette generators (see: Lospec or CoMiGo) to choose colors all at once will help prevent total color chaos, but a few concepts can help figure out why your color choices aren’t looking the way you expected: contrast, value ranges, and context.
Visual Hierarchy through Contrast
Creating contrast (difference between color choices) will sort your game’s elements out to draw the player’s focus. Grouping sets of assets with similar hues, saturation levels or values will separate the scene, telling your player what to look at.
Parts of the scene that are the most different will get the more attention. The simplest method is to pair your environmental elements together and make the most important player pieces – characters, enemies, puzzle pieces, dialogue – brighter, darker, more detailed, or simply different overall.
This grouping will help make a visual hierarchy to order your scene in terms of what’s helpful for the player(s) to see.
In Katamari Damacy, for example, you control a prince rolling up larger and larger junk into a ball – but the prince is not the most colorful element. The player needs to see and collect all sorts of toys, pencils, furniture and knic-knacs in a rush in a shifting and messy environment, so those need to be obvious.
[ gameplay pic ]
After picking up an item, it becomes less saturated as it joins your hunky katamari, making it easy for you to keep looking and rolling.
…But Not Too Much Contrast
It’s not only about color, though. In fact, too much contrast can be difficult for users to look at – whether or not they have sensory sensitivities [ link ] if they’re too different from what would be possible in the real world.
[ image 140 ]
Contrast can mean backing up your color choice with an eye-drawing animation effect, more detail, or a size shift. Experiment when you prototype (see: [ lesson link ] ).
[ illustrated change ]
Not all similar colors will get along, either. Some color choices may be difficult to see on smaller, color sensitive, or colorblind displays when there’s contrast in only hue, saturation, or value. Adjusting a color difference in a few areas can quickly solve that problem, as discussed below.
Auditiorium, in all of its beauty, runs the risk of posing an obstruction to players who are experiencing the game without color, whether not using color on their displays or experiencing common colorblindness such as deuteranopia (red-green, right).
Context
[ images of color illusions ]
One of the challenges with colors is how easily they slip around when changing settings. Our power in being able to see a “skin-colored” face instead of a mixture of purples, oranges, greens and yellows makes going backward to choose them one by one a blindfolded trial and error.
It might help to think of more visceral color choices like sound, taste or touch. Imagine a library, cozied with soft, ugly carpets and lines of bookshelves absorbing the few whispers. In there, walking by with a pocket full of keys could cause scorn! The same sounds on a busy street are barely noticeable.
As you choose colors, think less about the color quality alone and more about the color in its the world – a brighter blue, instead of a bright blue.
Value Ranges
There is a troublemaker color.
Bright and sunny, as you dim the lights on yellow it morphs, becoming a muddled almost-maybe-brown.
It’ll brighten back up if you change colors around it, but it is still not as flexible as other colors. Each color has a different range of darkness to brightness within which it will still appear as its self.
This doesn’t mean that there are fewer yellows – there is data for a full range of every hue. A larger range of red and yellows, though, will be more likely to appear muddled or sloppy on its own. If one of the more limited range colors are looking like slop, try changing the colors around it to contrast more.
Note, too, that value options change with color format. The color mode for printing (CMYK) cannot not show as many blues since it is a different way of creating color – and limited by physical inks. Trying to create some darker blues might lead to purple, and lighter blues may appear more green than expected.