COLORS IN GAME UI

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.

​What are colors?

Colors are light. In scientific terms, a color is what the cones of your eye deciphers when an object reflects a wave of light back at you. Every object reflects certain waves of light and absorbs the rest. This is what tells our brains that something is red or something is green.

​Why are colors important?

Colors are an important part of design because they give meaning to an object. A red thing could signal danger or a blue thing could be cold. Colors can also give context in a slightly ambiguous situation. If you see a green cone on top of a brown cylinder we can assume that's a tree. The colors give context and meaning to each part of the tree.

​How do you pick good colors?

Picking good colors is hard and some people dedicate their life to picking good colors. Generally people like to pick colors within a certain color harmony. Complementary, Triadic, Compound, and even Rectangular. But often, those are used when picking multiple colors. A good single color is usually something that gives meaning or context while a bad color hurts your eyes.

---

ruiner

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.

Color Explorations

Electric Blue

The electric blue color reminds me of the police. Maybe if you played as a Police man in the Ruiner world instead of Puppy then this would be a good color palette. The blue gives me a sense of calmness and professionalism. Like I'm meandering through the talents menu at my leisure, not in any hurry to crack skulls or beat people up.

​Fun Times Pink

I thought this pink was funny because of the stark contrast to the theme of the game. To me, this pink looks very soft and fun. Like the color of pepto bismol or something (although pepto bismol is usually not fun). It makes me think about what this menu would look like if it was in Saint's Row.

Energy ​Yellow

I actually really like this yellow. It's energetic and motivating. Although it did have a bit of an unintentional side-effect. The visual hierarchy is thrown off because the white icons on yellow background end up pushing it back too far and your eyes move towards the left and right sides of the screen first and not the thing you're selecting.

---

Remember me

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.

Color Explorations

Natural Green

I tried changing the orange to green to give it a more natural look. Like the menu was designed by someone from a futuristic corporation. That corporation's goal might be to save the planet from deforestation or maybe destroy all civilization so they can return to nature. The orange definitely pops forward more compared to the green color. The green gives the menu a soft look and lets your eyes gently flit around the screen as they will.

Inverted​ with Red

I wanted to see what would happen if the screen looked the opposite of clean and corporate so I inverted the colors and gave the orange a small injection of red. I think your eyes travel across the screen in the same way but, to me, this seems much more 'glitchy' than the clean white. Maybe this color palette would be good for an edgy hacker who does a lot more with 'the underground' side of the world with their hooded cloak up all the time.

​Ruiner

After looking at the Ruiner color palette I was wondering what it would look like on other games. Although I don't like how the selection looks, I think this look is very aggressive and powerful. Makes me angry and anxious just looking at it! Maybe this would be a good palette if the game were more about combat instead of about hacking memories and taking down big corps.

---

​transistor

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.

​Color Explorations

​Blurple

I started tweaking the colors of the Transistor screen and came across this blue/purple color. It's definitely darker than the teal normally used so it doesn't give me as much of a "neon lights" feeling. But it still makes me feel trusting. Some of the contrast is lost with this blurple color like in the text right above the back button and some of the letters that overlap Red's Portrait. We also lost some of the color separation between the headers and the body text (like "Career" and "Background")

Radioactive Green

I wanted to know what it might be like if we made the screen look evil. Not like red powerful but more like an elegant evil. I came up with this toxic/radioactive green. It reminds me very much of a sewer or radioactive rocks. It's very bright and in-your-face with a huge amount of contrast to the black background. I think it could use a little more yellow in it to make it even more evil but overall I like it!

​White Background

Transistor's menus all have a black background. I wondered whether a white background could make it look elegant and sophisticated like a marble column or something. While I think I could've darkened the teal colors to give a bit more contrast, I think the white does look more elegant. Maybe this would've been what Red's UI looked like before she got attacked and the events unfolded. To me it looks much more sterile and soft.

---

grim dawn

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.

​Color Explorations

Poison Green

I wanted to keep my color explorations keeping the theme of evil, dark, or death. So I went for a sickly green meant to look poisonous. While the original UI keeps the same color palette to the gameplay, this color palette is close enough to the original that it looks off to me. Maybe if the gameplay colors were more grey with splashes of green then it would look better. I do notice that in this particular picture, the green menu completes a triadic color scheme with the orange of the leaves, purple of the arches, and the green of the menu.

​Void Purple

I wanted to try a deep dark purple I'm calling "void purple". It keeps the image complementary with the orange leaves and purple arches and menu. I feel like I lost some of the readability with the text in the center so I might have needed to try to make that lighter. More contrast with text is always a good idea. I do like how dark the value is though. Definitely makes it look 'Grim'.

​Marble

Lastly, I wanted to invert the colors a little to see how a super light grey would look in contrast to the background. The white marble look reminds me of some old-school RPG. I'm not sure if that's because my cropping gave it sharp corners or if its because of the white. While Remember Me and my Transistor test look elegant, soft, and clean, this white somehow still looks evil and dirty. 

---

Lessons learned

Here are some lessons learned from my color explorations:

• Textures on UI can make a color feel differently than intended.
• There's nothing wrong with a natural color palette.
• Make sure contrast with text is high enough to be readable.
• White backgrounds usually make the UI feel clean while black backgrounds give a sense of danger.
• Monochromatic UI can work if done correctly.
• The color you choose can influence how the player plays the game.