Build Spotify’s Colorizer Effect in iOS
Recreating the ever-popular duotone look from Spotify’s branding
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
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.
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.
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.
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:
- Example app written in Objective-C
- Apple developer docs for CoreImage filters
- objc.io article with in-depth discussion on CoreImage
- Original Medium article inspiration about making this in Photoshop