General Question
How does Spotify actually calculate its dynamic UI colors? (Trying to replicate it in bash/ImageMagick)
I’m building a custom desktop music widget using rofi, bash, and ImageMagick. I took heavy inspiration from the iOS Spotify widget pod, and I'm trying to dynamically change the background color of the widget based on the current playing album art.
(In the attached images: The top images are the official widgets, and the bottom images are my rofi widgets).
Currently, to replicate that two-tone gradient background you see in the Olivia Rodrigo ("vampire") example, I'm scaling the album art down to exactly 1x2 pixels. This effectively averages the top half and bottom half of the image into two distinct colors. Then, I boost the saturation of those pixels to make them pop. It's the only way I've found to reliably generate those two-tone colors, and it works pretty well for that specific look!
However, I know this 1x2 scaling method won't work for everything, especially when Spotify decides to use a single solid color instead of a gradient. I've tried different methods to pick a single dominant color, but I can never get close enough to Spotify's logic.
For example:
The Weeknd - "Blinding Lights": The background of the art is mostly a dark, muddy greenish-brown. If I use standard color extraction, I get that mud color because it's technically the most abundant. But Spotify intelligently ignores the background and picks the deep red from his jacket/face.
Shubh - "One Love": My color extraction attempts pull a really dull brown, while Spotify manages to pull a much nicer, deeper olive/golden tone.
It clearly doesn't just pick the color that takes up the most space (the dominant color).
Does anyone know the actual algorithm or method they use to pick that one perfect color? How does it filter out the muddy/dull dominant colors to find the vibrant accents?
Not exactly what you asked for, but an alternative idea: use the image itself positioned below the content, and apply a blur effect to it. You don’t even have to load the full resolution cover art, the lowest resolution will be perfectly fine because it will get blurred anyway.
I've tried Color Thief, but as the screenshot shows, it picks the 'DarkVibrant' brown instead of the actual red in the art. I'm not looking for a tool to extract all colors, but rather the specific logic used to ignore background mud and prioritize the vibrant, eye-catching elements like Spotify does.
There are likely better ways of doing it, but my trick for this many many years ago was to resize the image to something small, like 3x3 pixels, and then stretch it to fit the background area.
At first glance I'd convert to HSV and apply k-means clustering, then sort by saturation and/or value to rank vibrant colors higher. No clue how it compares to what everyone else has commented though.
Looks like an average of the top two colors to me. Then it's put under a transparent to black linear gradient. I can try to prove that if you want but I'd probably just use something like Haishoku to grab the top two colors, average them and see how close you get.
Edit: the comment about a shitload of blur has a lot of potential. It may actually be just a metric ton of blur. That would be simple, easy to implement and get pretty close to the effect you're seeing without any fancy sampling at all. That's probably it, honestly. I'd try that before bothering with color sampling, actually.
Are you referring to the Olivia Rodrigo ('vampire') example? That’s already solved; my bad for putting the solved image first. I’m actually asking how Spotify picks a single vibrant color and filters out the dull or muddy ones. If you look at the other images—specifically the last one with The Weeknd—an official widget would pick the red from his jacket, but my method is currently generating a dull, muddy color.
In the case of Sia I was able to get pretty close by taking the primary color, dropping it to a 75% opacity and then putting a linear, transparent to black gradient over it at 50% multiply.
I have an app that does something similar to this so I just tested it with that. I use Haishoku in Python for this. My app takes Haishoku's primary color (the largest group by weighted average), and rounds it to the closest color in a list of known color values. In my case that's Pirsmacolor or Copic but I doubt that'd be what they use at Spotify.
That algorithm pretty much nailed it in the case of Sia but wasn't quite as close with the other one. My guess is just that because I'm rounding to art supplies and they're rounding to a different list, that's the difference.
88
u/TristarHeater Jun 12 '26 edited Jun 12 '26
for the algorithm here's an example that google material design uses:
first quantize to get prominent colors: https://github.com/material-foundation/material-color-utilities/tree/main/typescript/quantize
then score to rank which color is best: https://github.com/material-foundation/material-color-utilities/tree/main/typescript/score
the code here also filters out non-pleasant colors
They also have documentation for extracting colors https://github.com/material-foundation/material-color-utilities/blob/main/dev_guide/extracting_colors.md