The Importance of Color and How to Use Color


#1

Time to release my inner UI designer… here goes…

Introduction
When creating a game, there are many factors to consider, whenever it be art style, user interface design, graphics, targeted audience and the like. One key component that I don’t see talked about too often in these forums is the importance of color. Color can influence the mood of your game, the targeted audience and how professional your game looks. When picking a color scheme, it’s important to keep many factors into consideration, in order to give your game that “wow” factor.

Some Background History (This isn’t important)
For as long as humans can recall history, color has been of great importance to the human species. It helped the earliest humans survive by helping distinguish poison from food, locate a food source, and the like.

As a result of those behaviors, humans often have heavy mental associations of what each color represents, such as for example, yellow with joyfulness, presumably because the bright sun was the opposite of the common fear of the dark in which predators lurked.

How to Apply Color
Well this is neat and all, but how can I use it to make my game better? Color can be applied in many ways, such as in the landscape itself, the user interface and in the graphics (thumbnails, advertisements, etc.) in the project. If you look at the pictures below, they’re all the same landscape, but there’s a different mood associated with each image.

Show Images


This is a vibrant island, could be perceived as a vacation resort.


The island above could be associated with mystical beings, such as those commonly found in fairy tales.


This island isn’t is vibrant. It looks like it could be a haunted island for the player to daringly explore.


Very dull colors in the island above. This could be used to draw the player’s attention elsewhere, or to make it seem aged, and uninteresting.


An exaggerated example of not so ideal use of colors. There is no clearly identifiable theme, the colors are way to vibrant, and can cause strain on the eyes if viewed for too long. There is also barely any consistency between the colors.

Colors more often than not, really help to illustrate an image in the player’s mind. Let’s cut to the juicy part: What the colors mean.

Red

Red is a warm color, and is commonly associated with action, and is the color of blood. It tends to attract the eye much more strongly than other colors, which can be useful if you want to lure the player’s eye to a specific button or menu. In my experience, it can serve as a nice complimentary to black (as seen in many mid-end gaming laptops), however due to its overuse, it may attract some criticism.

Orange

Orange is a warm color, and serves as a mid-ground between red and yellow. It can also be used to represent the season of fall.

Yellow

Yellow is a warm color and is commonly associated with joyfulness and food, hence why it’s used in many major restaurants (namely, one with 2 arches as a logo). The color of yellow, as well as red, can be used to make a player more hungry (though I don’t see a use for it). Using yellow can be useful for attracting younger audiences as it’s a very joyful color, though vibrant yellow may not so appropriate for targeting older audiences. I would see this color being used most appropriately in roleplay games.

Green

Green is a cool color, and is commonly associated with nature, well-being, money and luck. According to one of my professors, it’s also the shade that humans can see the most of. It can be used to calm the player, similar to how walks in nature can calm certain people in the real world. It can be used to subconsciously promote something as wealthy, or lucky.

Blue

Blue is a cool color, and is commonly associated with trust, calmness, technology and the sky/ocean. I would presume that blue calms because of its abundance in the real world. Blue is also, statistically proven, the most common favorite color. Blue can be used as a neutral color in user interfaces. In my experience, tinting a gray background slightly blue (RGB 11, 11, 30) is just a tiny bit more appealing, but that’s just my opinion :slight_smile:. Blue can also be used to indicate that something is high-tech, or sci-fi.

Violet

Violet is commonly associated with royalty, as a long time ago, it was one of the most expensive colors. It would be commonly found in crown jewels of nation leaders.

Pink

Pink is commonly associated with romance. I’m not going to go into much more detail.

Brown

Brown is commonly associated with dirt. It can work as a good neutral color for filling in large vertical space in outdoor scenery. Brown is also mainly the color of chocolate and coffee. Brown can also be used to signal old age.

White

White is a neutral color, and is commonly associated with order, pureness and cleanliness. White can be used to say that something is medical or clean. I haven’t personally used white much so I can’t provide much tips. However, when used in contrast to another very different color, it can create a sense of unease.

Black

Black is a neutral color and is commonly used to denote power, evil or fear. It can be used in terrain in order to create a moody feel. Again, I don’t have much experience with this color. I would also suggest against using a pure black most of the time and instead opting for a light grey (which would also be tinted blue :wink:)

Keep in mind, the shade of the color can also affect how it’s perceived. More comprehensive lists can be found with a quick google search.

Color Compatibility
When picking colors, try to keep this in mind:

  • Having a color that’s too vibrant take up a large portion of the screen can be stressful on the eyes.
  • If you use a color excessively, then use it somewhere else, it can draw the player’s attention elsewhere.
  • Colors on the opposite side of the color wheel stand out the most against each other.
  • Having a good mix of saturation is also important, you don’t want to make a place look washed out or stressful on the eyes. (Credit to Krunnie for bringing it up)

Also, Google provides a neat palette (material design) that looks good to the eyes. I highly suggest you check it out.

Extras

9 Grid Layout

I’m not sure if this is proper terminology, so if you know the correct term, please let me know!


This grid can be commonly found in camera settings.(upload://iuvLDsoRa9JII0ZOoljXdREGBp6.png)

They aren’t there for show. When making cutscenes, it’s often more visually appealing to have the center of focus be where those lines intersect.

Golden Ratio

The golden ratio can be used to make stuff look better, as it’s the ratio of nature. There’s many videos and tutorials on it, I don’t want to stray too off topic on this thread.

Lighting

I wish I could say I’m experienced with lighting, but I really ain’t, so my best advice is to adequately light up your interior scenes, at least enough so that the player can see. PointLights, SpotLights and SurfaceLights all have properties inside of them that let you control elements such as brightness and range. You can even tint the lights a specific color to add a mood. (Interior household lights are usually at 3000k “Warm White” brightness, if you’re looking for create realism) For new projects, I highly recommend using the Voxel technology (I think they set it as the default nowadays), as that has much more contrast and really makes your project “pop”.

Credit to Krunnie for bringing this up.

Even if this wasn’t top notch, I hope you got something out of reading this. And, of course, have a nice day :slight_smile:

All of the stuff here is off the top of my head, it may not be accurate; it’s best to take the lessons provided here with a grain of salt. Please provide feedback and correct me if I’m wrong, it’s greatly appreciated.


#2

Most of the stuff here is correct. Can confirm since I studied color in my theory of photography classes. It’s pretty nicely made tho I’d mention something about saturation, brightness (in lighting) and how to combine those two so you won’t have any burnt out places on your build.
Definitely gonna keep this bookmarked just cus of the color explanation.


#3

Thanks for the feedback! There is a slight reference to saturation and lighting within the example images, but I’ll add saturation and brightness on when I have the time and add on some parts I didn’t get around to (9 grid layout, line variation). Thanks again for the feedback!


#4

Our cones see in blue, green, and red. Green is near the center of the spectrum, making it the most comfortable to look at resulting in the most calm result. Your professor was right as he said that green can be seen the most of because it takes less strain to do so. My knowledge goes little beyond this that I’ve learned in the past, but there are plenty of articles online that are quite interesting.


#5

Wow, I didn’t know that! That’s a pretty neat fact. I can double for the fact that there are plenty of online articles that cover these fields, I’m personally quite intrigued by them, which was actually what inspired me to make this post!


#6

Very useful! Thanks for this, :+1:!


#7

Also, a good color palette can set the feeling of your world. Here’s a website with a lot that I check out from time to time.