Color Math and Layer Blend Modes

Consider this: You’re a certain kind of artist or comic colorist who uses Photoshop or Clip Studio Paint or Krita or whatever. And you’re used to coloring using multiple layers. You separate the base color from the shadows and highlights, and you use a Multiply layer for the shadows.

Then you decide you like certain colors that you’ve seen. You have a reference— you could’ve found it online or you made it yourself by hand-picking the colors. You still to use a multiply layer for shadows, but you don’t know what color to use so you get the right color. How do you find out?

How do I find out the color I need to use with a Multiply layer to get a resulting shadow color?

First thing: Using a multiply layer is doing actual multiplication on the color values of the pixels.

Second thing: As long as the resulting colors weren’t smushed out of the range of possible colors in your program, reversing it is as simple as using the reverse layer mode and ordering the layers correctly. Just like algebra.

If you eventually want to use a color for a Multiply layer, you can use a Divide layer to find out what color to use.

Divide the darker color with the lighter color. Lighter layer on top. Darker layer below. Overlap the layers, then you’ll get the color you want!

If you’re like me, you’ll tend to forget and have to think about it every time until you think of a mnemonic. So just remember this: The sun is in the sky; the lighter layer is on top.

Use this new color for your eventual Multiply layer.

It works! I promise!

This also works for Add and Subtract layers. (in Photoshop, “Add” is called “Linear Dodge (Add)”.)

That’s really all you need to know to solve that problem in most cases. Everything below this is trivia.


Trivia Time

Wait a sec.

The multiply-divide thing doesn’t make immediate sense though. If you use a Multiply layer, colors get darker (color values are lower). But if you multiply two numbers, they should get bigger!

Here’s the thing. While the colors are usually presented as RGB values ranging from 0 to 255. The layer blending operations are actually done with RGB values ranging from 0.0 to 1.0.

If you multiply a middle gray with a middle gray, 0.5 x 0.5, you get 0.25, a darker gray.

But after blending, it always gets flattened back to 0-255.

Other blend modes have more complicated formulas so it’s trickier (and sometimes impossible) to reverse them and get colors that way. Other factors can also get in the way of letting you recover colors.

Smushed out of range

Remember when I said “as long as the colors aren’t smushed out of range”?

This is an unfortunate effect of how most image editing programs work. If you use certain colors, it’s pretty easy to blend colors using brightening or darkening layers, that resulting colors (or individual components of colors) can go beyond 0 or 255, or 0.0 and 1.0. Unless your program supports high-bit-depth documents (eg, 32 bits per channel), the program usually just discards this information and just gives you 255 or 0. Whichever direction you went too far in.

This is a bit of a contrived example but it demonstrates something that can happen often.

A violet color multiplied over and over.

Notice how the red and green components quickly move towards zero. And the largest component sticks around.

One takeaway here is that dividing or multiplying using the zeroes from these resulting colors gives you information that’s unusable.

The other takeaway is that if the color components get dark enough, you already start to appreciably lose information . The 0-255 pixels use whole numbers; the results of multiplication and division are rounded off. The closer the values are to zero, the proportionately larger the rounding errors become.

You can sorta make do most of the time though. This loss of information usually just happens with colors that are very saturated, very bright or very dark. For example, it’s easy to max out color components when you use an Add blend mode. Colors turn white, or a really pure yellow, red, blue, green, cyan or magenta.

This can mean more than just a loss of information. It can unintentionally saturate colors that you didn’t mean to.

Piotrek Chwała (via Wikimedia, CC BY-SA 3.0)

Color-saturating like this does happen in real life. When light passes through an object or medium, but not completely, it absorbs certain wavelengths and reflects the rest. This commonly causes the color to be visibly more saturated. You’ll find this in phenomena like Subsurface Scattering.

Related reading:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s