Build Spotify’s Colorizer Effect in iOS

Recreating the ever-popular duotone look from Spotify’s branding

Alex Persian
Feb 12 · 4 min read
Duotone with an extra gradient effect.

Back in 2015, Spotify went through a rebranding effort that involved a much flatter design along with bright, bold, and complementary colors. This new branding style extended throughout the service, including things like promo material and playlist cover art. To get the desired look, they used something called a duotone effect on their imagery.

In this piece, we’ll look at how we can recreate that effect using CoreImage in iOS. Thankfully, Apple was quite faithful to industry techniques for photo manipulation when they built the CoreImage library. We are going to leverage three different CIFilter objects that are provided to us. These map directly to the filters you would use through a program like Photoshop to achieve the same effect, so if you have experience there, this should look familiar.

Note: The next section assumes that you have a working knowledge of iOS development and have a project with access to a UIImage asset.

Start with a normal image of James Murphy.

Step 1: Grayscale Filter

To start with, we need to apply a grayscale filter to the image in order to remove all of the colors. This allows the image to be manipulated in the next steps without the original colors affecting anything. It also makes the highlights in the image stand out more for the effect to work better.

Original + grayscale.

Step 2: Multiply Filter

Now that we have a grayscale image, we need to apply a multiply filter with a bright color — in this case, green. This will bring out the highlights in the image and give it that “pop” we are after.

Note: You’ll notice we are feeding the previous filter’s outputImage into the next filter as its inputImage. This is referred to as a filter graph and allows us to avoid storing intermediate image assets in memory.

Grayscale + multiply.

Step 3: Lighten Filter

We’re close, but the image still needs that duotone color. To achieve that, we’ll apply one last filter: lighten blend. The naming here is a bit confusing because it’s called a lighten filter, but we will be using it to apply a darker color than in the previous step. That’s because lighten works by finding the max (closest to white) between two colors and applying that one. Since our multiply step has already added a very bright green, this lighten step will only affect the dark, near-black colors of the image by applying a slightly lighter navy color.

Multiply + lighten.

And that’s it!

This approach works with all different colors as well. Just make sure to choose ones that are relatively complementary and always use the brighter color in the multiply step. You can also manipulate the contrast of the source image after it’s gone through the grayscale step to get a more drastic difference between the light and dark colors. Play around with it. Here are three more color palettes:

Better Programming

Advice for programmers.

Alex Persian

Written by

iOS engineer @ Spotify

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade