How to choose colors in game VFX

1. Choose colors with lightness and energy in mind

　It might be a bit counterintuitive, but one of the best ways to make your colors pop in the long run is actually to start with what is commonly called “no color” (i.e. grayscale).

Think about what the effect you want to design is trying to convey to the viewer

　When we break down what color is, we end up with “brightness,” “hue,” and “saturation.” Lightness is one of the principles you should definitely know in VFX. When working in grayscale, you can see how the different elements of the effect work before you start working on them.

　By cutting Hue and Saturation first, you can focus on creating focal points and establishing contrast between design elements. By setting the lightness, it becomes easier to determine the hue and saturation.

　You can also check the values ​​as you work by using Photoshop’s Tonal Correction option. If you are using Windows, you can also turn on grayscale for the entire screen in the color filter setting of “easy operation”.

　Also, since strong lightness contrast is universally pronounced, making the differences between elements more pronounced improves accessibility for all colorblind people.

　So how should we choose the brightness of the design? When it comes to static art, you might think of light and shadow, but game effects often bring their own dynamic light to a scene rather than just receiving light as an inert object. Think about what the effect you want to design is trying to convey to the viewer, whether it’s a tranquil healing AoE ability or a magical explosion like fire.

Game effects are not static images, and the attributes that appear, move, and disappear
should change until the life of the effect expires, not the same all the time.

　In general, use the brightest, near-white values ​​for areas with the most energy and damage. Low energy, slow energy effects should use dark values ​​close to black.

　For example, in the case of an explosion, the burning high-temperature center is bright, the flying sparks have a medium value because they still have energy but are fading, and the smoke that fills there is a dark value because it has little energy. Each element of the effect will continue to be recognizable as something else by giving it some contrast with the next element.

　Then volume and lighting become important. For example, the glowing center emits light and is full of energy, so the interior elements of the design also need to be high valued. The outer elements have dark values ​​because they are not hit by light or energy.

　It’s important to remember that game effects aren’t static, they appear, move, and disappear. Attributes should change over the lifetime of the effect, not the same from beginning to end. This applies to almost all attributes of particles, not just values ​​(such as alpha and RGB). Breaking down the effect’s design concept into phases helps define these things. In other words, you can choose the value when the energy explodes and the value when it disappears.

　For example, values ​​close to white are often used as a flash for a few frames, then fade away once the damage is done. Sustaining a high value for too long can create unnecessary noise or make the ability appear dangerous to the player longer than it actually is. Lightness levels should generally be translated into equal importance.

2. Determine the main color and auxiliary color

　You may have already started as part of your grayscale work, but it’s helpful to decide on your main and secondary colors early on. The same is true for the various elements that make up the effect. Which parts of the explosion and smoke effects are most important and which are secondary?

　The main color should be the brightest color (highest brightness) and highest saturation. Auxiliary colors are more subdued and often translucent to blend in with the background.

　It can be desaturated or darkened to make it less vivid than the main color. In fact, as many new VFX artists do, it’s very easy to oversaturate and drown out your effects. Be careful not to oversaturate even the primary colors.

　Hue is what non-artists think of when they think of color, and the relationship between hues has a big impact on readability for players. Hues can get out of control if not planned in advance. For example, should the fireball be orange or blue based? Accidentally mixing two such contrasting colors can result in visual noise and dissonance.

　Complementary, analogous, monochromatic, and trichromatic relationships are generally pleasing to the eye. Complementary colors are highly contrasting and eye-catching, but they can also be distracting. Analogous colors tend to be more natural and mild. Three primary colors are effective when one color is the main character and the other two colors are supporting characters.

　Highly saturated colors and less saturated colors, or vice versa, end up having the same effect as lightness. High chroma draws the eye just like high brightness, and low chroma creates a calm atmosphere.

　However, with regard to saturation, if there are multiple colors with the same value and high saturation, they will clash with each other, so be careful.

　When choosing a palette, it’s generally a good idea to look at colors in terms of their meanings and identities, and then narrow down what relationship you should choose from there.

3. Color change throughout the effect

　As a general rule, a little variation is always better than nothing. Whether it’s changing the hue from blue to purple, or changing the opacity, saturation, or lightness, having a certain amount of variety will attract attention without being overlooked.

　Even in a monochromatic palette that tends to be thought of as the same color because the hues are the same, there are variations in saturation and brightness.

　However, variations are limited. We want color depth to affect the overall composition of the effect. In other words, it’s better to have a gradient over the whole effect than a lot of small gradients. Contrasting elements of color and effects should also be used purposefully to capture the viewer’s attention.

4. Explore and experiment with themes

　Color can say a lot, and a color palette can say even more. It’s well known that colors evoke emotions, blue being sad and red aggressive, but that’s not all.

　Combining colors makes it possible to express more complex emotions. For example, green is a calm and natural color, so it is used especially with sunshine yellow and river blue. Combining purple with that green and increasing the saturation, this time it becomes morbid and poisonous.

　As such, there are many color combinations for which different games and genres of wizarding schools end up with similar palettes. Fire magic is often a combination of red, orange, and yellow.

　This is because there is a common understanding of how the general audience perceives the color palette, and it is certainly beneficial in enhancing the design effect. However, you don’t have to be bound by preconceived notions.

　Exploring and experimenting with colors is never a bad thing, and trying different combinations can generate all sorts of new ideas. Swapping the colors of an existing effect can give it a completely different feel, and it might inspire something different from what you originally thought.