Build Spotify’s Colorizer Effect in iOS

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

Alex Persian
Feb 12 · 4 min read
Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Image for post
Image for post
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.

Image for post
Image for post
Image for post
Image for post
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.

Image for post
Image for post
Image for post
Image for post
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:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Better Programming

Advice for programmers.

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