Adrian Wahrer's profile

The Color Theory of Validate (2021)


During production I was responsible for producing a general-use color palette for Validate which was mostly based on the teal and magenta colors present in the logo. The icon (pictured above) doubles as a palette/reference for some of the colors that would be used heavily throughout the game itself as well as in marketing.

Most notable of the general colors are the off-black and off-white: Validate's use of hard #000000 black and #FFFFFF white is fairly rare, and almost nonexistent in its UI. This provides some extra "head room" in the game's visual contrast, where graphics that do use hard black and white (most commonly the character sprites) will pop without the risk of blending in with backgrounds or menus.

General palette - examples of usage

Character Hues
Characters are listed with their corresponding hue in HSB.

There are a total of 12 playable characters plus 3 supplemental or unused colors; dividing 360 degrees of hues by 15 steps gives an average increment of 24 degrees. However, the increments are closer together in the reds and blues, and farther apart in the greens. People can perceive more greens than reds or blues, which would make closer green hues too similar.

Beyond hue, a major factor was apparent brightness: colors can inherently appear lighter or darker than others even if the saturation and value parameters are the same. For example, yellow and aqua often have to be darkened, while deep blues and purples have to be lightened (see below).

Accessibility was a major goal of the game's UX/UI, so Alexis and I both used a few resources extensively in testing values and contrast, mainly Colorizer and the WebAIM Contrast Checker.

Character hues - examples of usage
Some game assets are hue-shifted programmatically in situations where it would be beneficial to do so instead of rendering 12-15 separate versions of them, such as speech bubbles (bottom-right).
I consulted with character artists to assign and personalize hues; some are mostly thematic, i.e. Ashlie wears pink. However, several were chosen for character icon synergy: Bigs' box icon resembles cardboard, Yolanda's icon can represent an actual goldfish or her bandana, and Keaton's icon becomes a literal bouquet of red flags.

The unassigned hues of 110, 230, and 350 are the closest in the palette to "pure" green, blue, and red, respectively. These are not bound to a specific playable character and are instead used when introducing "side characters" (named non-playable characters) which allows the team to quickly select a more neutral hue for minor characters. A 13th "bonus character" (the Keaton mentioned above) also uses the neutral red.

Some side characters may break from the red-green-blue format: for example the Alex character appears enough that they have a distinct color, and sometimes relatives will use a playable character's color (ex. Isabelle's siblings, Keaton's mom).
Credits
Game character art by Yu Yamamoto
Character promo graphics by Alexis DeJesus
Additional UI implementation by Dreba Borges
Vector backgrounds by Cindy Thai
The Color Theory of Validate (2021)
Published:

The Color Theory of Validate (2021)

Published: