Blend Modes 101 — How do they work?

Mauricio Uehara
Jun 15, 2016 · 3 min read

When it comes to Blend Modes in Sketch or Figma, my bulletproof method has always been: try one, if it didn't work, try another one. Recently, I've decided to learn more about how do they work. I'd love to share my findings with you.

There are many types of blend modes, but I'll cover only those I use more often: Multiply, Screen, Lighten and Overlay.

Hope you enjoy!

Multiply

Spotify made it famous through the duotone photo effect. As the name suggests, it works by multiplying the color values of each layer. A pixel's color is defined by the value set on the red, green and blue channels — which ranges from 0 to 255. To do the math, those values are converted to a scale between 0 to 1, so in that way, the multiplication will never result in a value higher than 255.

So, what does that mean visually? Some things:

  • The result will always be darker,
  • Black color has a zero set in all the channels, in other words, every color multiplied by black will result in black,
  • White color has a one set in all the channels, in other words, every color remains the same when multiplied by white.

One consequence of that is, if you want to quickly apply an asset with a white background to your comp without bothering to manually remove it, you can with multiply!

Also, the first step to achieve a dutone effect is to apply a color layer on top of a photo using multiply.

Applying a layer filled with #FF465D using multipy

Screen

It's the functional opposite of multiply, which means:

  • Black pixels becomes transparent and,
  • White pixels are completely opaque.

In the following example, I wanted to apply an asset with black background on top of the image:

Lighten

Now, we saw that we can achieve a cool look by applying a layer color on top of an image using multiply. But, it's not 100% Spotify-ish. A second color is missing. Please meet lighten.

Basically, lighten compares the color information between two pixels and registers the brightest one. I can now apply another color in some dark areas, without interfering too much in the overall color. In the following example, a blue layer is applied on top of our previous image. Notice that only the spots which are darker than the blue get to become bluish.

Applying a layer filled with #103661 using lighten.

Overlay

And the last one, overlay, is a combination between Multiply and Screen. It involves a more complicated math, but what we need to know is that it applies multiply for darker pixels and screen for the brighter ones. Visually, it increases the contrast of an image:

Applying overlay will increase the contrast

There are 15 blending modes in Sketch, we have covered just a small part of it. I hope this post encourages you guys to go and learn more about the other ones. Here are some helpful links:

PS: This was my first post ever! If you enjoy it please hit the 👏 and make my mom even more proud of me! :) It also helps people to find this content.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store