Diving into Color. Tips & Tricks I use for using color

Using color can be hard and confusing so I wrote a blog post where I share my practical tips & tricks for using color while I am creating the visual effects (these tips & tricks can be applied to any visual arts though :wink:) Not color theory!

Topics that I go through:

  • Tapping into the lizard brain with colors;
  • Using color palettes;
  • Choosing the right values for colors;
  • Choosing the right background;
  • Tips for colorblindness;
  • Resources.

Read about it HERE.

I hope you find something useful there!

21 Likes

Great stuff, still reading through it but so far it reads really well :slight_smile:

1 Like

Thank you for this! I’ll try to make good use of all of those tips, it will be really helpful :slight_smile:

1 Like

Paulina this is awesome! I’ve been sharing it around Riot :heart_eyes: Thank you so much for taking the time to put this together. It’s a great resource!

1 Like

Besides the article itself I want to underline that I love that you also focused on accessiblity/inclusion. Very important topic which I didn’t have on my agenda until just recently. <3

2 Likes

@ShannonBerke @simonschreibt
Ah you guys, you sure know how to make a girl hyperventilate!!

Thanks, everyone for such positive comments, really made my day!

2 Likes

Some of my thoughts while reading:

The topic is be already complex enough but no, let’s add another ingredient! :smiley: Color perception does also change over time. Some years ago red and pink was the “color of men” (kings wore red, young sons of kings wore rose (as it’s a lighter version of red) because red meant: strength) while the “color of women” was blue as it’s perceived as calm (sorry, for being a bit sexist here, it just serves the explanation :frowning: ). Today we associate rose with girls and blue with boys - so it switched 180°.

Sometimes I lose myself in trying to follow the rules too much (and it’s especially hard when they are conflicting). For example: The health-bar is usually red while stamina is green. So, in theory a healing-spell could totally be red as it would be logically connected with our health-bar as the spell regenerates life (and it’s also the color of blood and a warm color - and warm is good, isn’t it?). But I totally agree, that a green spell fits better for a healing-vfx even thought it would in theory fit better to regenerating the stamina :smiley:
I think the hard thing is, to find the spots where it’s good to follow the rules/logic and then again find the places where it’s good to break the rules and follow for example the established knowledge (red=health but healing spell=green) because we’ve just learned theses rules over time.

Another thing I’m often struggling with: I want my VFX be readable over dark AND bright background. So it can help to use a darker base particle and on top have bright stuff (or outlining the bright particle texture with darker areas). But mixing e.g. dark and bright smoke looks quickly “unclean” and “mysterious” which might not fit to my “pure white paladin holy healing”-spell. But without using the darker tones, my spell isn’t visible when cast over the bright sand of a desert for example.

I wonder if you guys have tips regarding those issues I have. :slight_smile:

4 Likes

Great point, color perception does change over time! I think even the color switch between pink for girls and blue for boys happened not a long time ago too, in the 20th century, so it really makes me think about what will happen in the future.

Oh yes, the health bar really gets me conflicted, not only conflicted, but I even get a bit more philosophical about it. Why is it even red? Is it associated with the heart icons that represented how many lives a player has? Is it just because red is great at grabbing attention? Is it just somebody’s favorite color? Hmm, some red healing spell that now I can think of is health leeching from other enemies, they are usually blood red with some black accents. Yeah, it is harder to find the right spot, I tend to stick to the classics and observe what others do, as I think I am not there yet to break the rules. If all the VFX artists united we could start a revolution and change the so-called rules, hehe!!

The VFX readability over the backgrounds is one of the most common things that I struggle with, so you are not alone here. I mean ideally, you could have two types of effects: one for the bright background and one for the dark one (or just have some of the elements of the effect changed, for e.g. have different smoke) and switch them with scripting. Sometimes this is just way quicker and helps to keep you sane! If there is a constant day & night cycle… Well… That’s on you buddy :smiley: :smiley: A lot depends on the lighting in the scene, sometimes you can solve problems with lit particles, something I tend to use on steam/smokes in the daylight scenes. But yet, this is still a mystery to be solved (a very painful one too).

2 Likes

I was struggling with the visibility as well! But from what I have seen from many video games and from experimenting, I would say a solution for this issue would be using an ‘alpha composite/premultiply’ shader to outline your spell, with the ‘inner’ part being brighter and the outer part having darker, saturated color (preferably using gradient map/lerp)

For example

lighter darker

I use premultiply alpha for the rune (but not a proper gradient map, I just put a darker, more blurry ‘outline’ at the bottom lol). Premultiply is great since it retains its color, while additive shader would eventually lose its color as the background goes brighter (which I honestly still struggle to do so because I love additive shader and I try not to work with bloom.)

In my opinion, whatever would be the focal point of your VFX, you should try using premultiply alpha for if to retain the visual message/clarity, while using additive to ‘light up’ the VFX occasinally.

(Now that I see it, I should convert some part to premultiply alpha as well, but you get the idea.)

Also there is a matter of color and value, which I think we should consult with concept/environment team as well.

3 Likes

thanks for sharing this informative blog.

1 Like