This month, we're going to talk about one of my favorite topics in design. Color! I've been diving deeper into color and color theory lately and I'd like to take a look at a few games and break down their color palettes to see what works, what doesn't work, and tinker with them a little to see if I can find something way different than what the developers intended.
Ruiner uses a very distinct all red color palette for their UI. The monochrome palette here gives a sense of power and anger with the red. When I first played through Ruiner I thought the red was the brightest read I've ever seen. But now that I'm looking at it, it kind of has a little purple in it. The blue in the background of these screenshots is the particularly blue environment I happen to be standing in. What I find interesting is the developers managed to find a black that isn't difficult to read on the red background. Usually white text goes good with a red background but by using both black and white they are able to create a dynamic visual hierarchy without adding any more colors.
I think Remember Me's color palette is super clean and simple. It looks like they are stark believers in the 60/30/10 rule. The 60/30/10 rule says that your primary color (in this case white) would be used 60% of the time, your secondary color (black here) would be used 30% of the time, and the accent color would be used 10% of the time. This doesn't seem too hard to achieve in Remember Me's case since their background is white and they just have to use black with hints of orange to get the 60/30/10 rule but it's there none-the-less. Remember Me's color palette is very corporate (which is probably what they were going for with the Sensen). The white gives me a sense of purity and cleanliness while the orange shoots a little energy into the otherwise black and white corporation.
Transistor uses a lot of cyan, teal, blue, and green. Occasionally you'll see splashes of yellow or gold like in the Details tab on the left image. This color palette reminds me of the ocean but the art-deco style and outer glow give make it look more like Neon lights. Since green is often used as a relaxing color and blue is often seen as trustworthy, I think the color choice has a calming effect on the game. Like you're going through all this stuff but it's okay. You can trust your sword boyfriend and he will calm you down.
We've all played a game where the Menus used a color palette like this. Browns, greys, and blacks galore. There's nothing wrong with a brown color palette. It usually tries to root itself in the real-world by texturing visuals to make them look like steel, wood, paper, dirt, leather, and other 'natural' materials. This was the first time I've played Grim Dawn and I picked it because I wanted to see what would happen if we started changing the colors of the menus while the gameplay color palette stayed the same. In the previous explorations we've been looking at full-screen menus but now it's time to look at a modal with the game still running in the background.
Here are some lessons learned from my color explorations: