# Spotify's new brand identity using feColorMatrix SVG filters

> Using feColorMatrix SVG filters to apply a duotone effect to an image.

Published 2016-02-14 by José M. Pérez · https://jmperezperez.com/blog/duotone-using-fecolormatrix/

This is a short post where I show how to use SVG and a `feColorMatrix` filter to apply a duotone effect to an image.

Demo & Code: [https://codepen.io/jmperez/pen/LGqaxQ](https://codepen.io/jmperez/pen/LGqaxQ)

You may have seen that the [Spotify's new brand identity](https://www.fastcodesign.com/3043547/spotifys-new-look-signals-its-identity-shift) is full of duotone images. My colleague Thodoris described how to achieve this effect [in JS](https://blog.72lions.com/blog/2015/7/7/duotone-in-js) and [in iOS](https://blog.72lions.com/blog/2015/7/18/duotone-in-ios).

The JS version uses `<canvas>`, and after reading [A List Apart's Finessing feColorMatrix](https://alistapart.com/article/finessing-fecolormatrix), where they also mention the duotone images used in [Spotify's Year in Music](https://yearinmusic.spotify.com), I forked [Thodoris' pen](https://codepen.io/72lions/pen/jPzLJX) and used `feColorMatrix` instead:

<iframe className="w-full aspect-video" scrolling="no" title="Duotone effect (Spotify Duotone) - Using feColumnMatrix" src="https://codepen.io/jmperez/embed/LGqaxQ?default-tab=result" frameBorder="no" loading="lazy" allowtransparency allowFullScreen>
  See the Pen <a href="https://codepen.io/jmperez/pen/LGqaxQ">
  Duotone effect (Spotify Duotone) - Using feColumnMatrix</a> by José Manuel Pérez (<a href="https://codepen.io/jmperez">@jmperez</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

The code consists of a `<svg/>` that has an `<image/>` to which we apply a `<filter />`. The filter uses a `feColorMatrix`, and its values are calculated using JS, though if you already know the range of colours you want to apply there is no need to run JS, just set them in the markup. If you have any issues understanding how the matrix is calculated, check [this question on StackOverflow](http://stackoverflow.com/questions/21977929/match-colors-in-fecolormatrix-filter).

## Alternatives
You can also [CSS blend modes to achieve a duotone effect](https://jmperezperez.com/blog/duotone-using-css-blend-modes/), which doesn't require any JavaScript.