Spotify’s lyrics color selection work

Color logic for lyrics in Spotify

Spotify rolled out the real-time lyrics feature to all of its global features in Nov 2021. It’s been almost a year since the feature got released, and it is scaling across various languages quite gracefully. I usually listen to a few of the regional languages spoken in India and English of course. In this post, I wanted to talk about how the UI for the lyrics feature functions dynamically within the Spotify mobile app.

Basics

If you have not already seen then Spotify’s lyrics function looks like the one I have shown in this post’s cover image. It’s colorful and works with a variety of songs. The lyrics are most probably requested by Spotify for a long queue of its older songs and top hits. After the release of the feature, the artist must be having the option to upload their song lyrics at the time of uploading each of their song files.

Color Selection

When we play a song on Spotify, the song controls screen along with the album art also shows a colorful frame with lyrics getting highlighted based on the song vocals being played in the background. After the song lyrics are uploaded, Spotify must be using a text and speech recognition system like what YouTube uses to generate its subtitles automatically based on the audio recognized by the software.

For the color selection in the lyrics frame, Spotify is recognizing a dominant color in the album art uploaded. It can be an automated script that can run on the image to extract its dominant and supporting color palette. There are a host of open-source scripts like those available online, and to demonstrate an example here, I will use Color Thief by Lokesh Dhakar.

Color palette extracted after running the script on three album arts

As you can see from the examples above, the logic for dominant color extraction from an image can be variable and it is based on what the script considers a dominant color. Clearly, for Justin Bieber’s Justice album art, the dominant color could have been a lighter aqua-teal shade. I will use Happier by Marshmello for the example going further because there is no argument about whether the dominant color is #DBA93A or not.

Text Overlaying & Tinting

Now for text to work on top of #DBA93A, the yellow color needs to be dark enough to read both the dark and light text. As you can see below for white text, the color contrast check fails on all aspects and hence, there is tinting required.

Before tinting and after tinting of background color with color contrast check

• For tinting the background, the software logic uses a darker shade of #DBA93A, preferably from the same family of shades. I have used #772B00 at 50% alpha. To find this color, the software can continue to extract a darker color from the album art. As I said before, there is hard concrete logic for this selection. It can be quite a random selection for each song.
• Next, to increase personalization, the black text (upcoming lyrics) is moved to a color that is at a lower opacity of 70% to 80%. This allows the text color to match the background color and is not harsh on the eyes.

Color Contrast Failure

Unfortunately for this experiment, even though the final output matches closely with that of Spotify‘s, it is not a complete success because the color contrast check for both light and dark text fails for the normal and large text. I tried to play around with color toggling a bit, but I couldn’t find a shade that would create color contrast success for both light and dark text.

Color contrast spectrum analysis to make color contrast check success for light and dark shades

It is essential to note here that for the lighter text, I had to increase the background tinting to 80% while for the darker text, I had to decrease the tinting to 0%. Although the toggling here produced success on the color contrast checker, it was a failure for the text color on the other spectrum.

It is safe to say that Spotify might have come across similar issues when tweaking its color selection algorithm and hence, 50% tinting of the bright base color is the safest best in this scenario.

That’s the end of this short yet hopefully insightful read. Thanks for making it to the end. I hope you gained something from it. If you want to read more about the design theories based on practical examples for Spotify then here are some links you can read further —

👨🏻‍💻 Join my content verse or slide into my DMs on LinkedIn, Twitter,Figma, Dribbble, and Substack. 💭 Comment your thoughts and feedback, or start a conversation!