Email or username:

Password:

Forgot your password?
Eugen Rochko

How to pick the most interesting color from an image? The current iteration of audio player takes the average color from the avatar and then lightens/darkens it to ensure contrast over the background. But the average color turns out to be grey fairly often. Is there a better way?

#mastodev

No comments
AllSaints' Eve❎

@Gargron Which average are you using? Just spit-balling but maybe bucketing the colourspace and picking the modal colour could work?

josef

@Gargron here's something i've seen used before, although this demo website seems a bit broken now gauguin.lunarlogic.io/

Hugo Gameiro

@Gargron I have came across this recently and it looks pretty cool: github.com/lokesh/color-thief

Haven't tested it but something like that looks pretty accurate and it has an API.

Olie

@Gargron Might be worth looking around the source of something like wal. It's a bit duff at generating full colour schemes (they tend to just be a few shades of a single colour - 2 if you're lucky), but it's very good at picking out accent colours from images.

[DATA EXPUNGED]
j@mastodon

@Gargron I guess you would have to work with saturation...

Bluestarultor

@Gargron What you could do fairly efficiently is take the most prominent color:

1) Read bitmap into number array via hex
2) Sort
3) Split into 8 equal array chunks (enough for nearly any album cover)
4) Average each chunk
5) Compare in pairs
6) Discard least-like pairs
7) Choose the first index from the highest number chunk of last pair (they should be side by side)
8) This will be from the middle of the largest color block

You now have a representative color from the cover.

@Gargron What you could do fairly efficiently is take the most prominent color:

1) Read bitmap into number array via hex
2) Sort
3) Split into 8 equal array chunks (enough for nearly any album cover)
4) Average each chunk
5) Compare in pairs
6) Discard least-like pairs
7) Choose the first index from the highest number chunk of last pair (they should be side by side)
8) This will be from the middle of the largest color block

Bluestarultor

@Gargron What you could do fairly efficiently is take the most prominent color:

1) Read bitmap into number array via hex
2) Sort
3) Split into 8 equal array chunks (enough for nearly any album cover)
4) Average each chunk
5) Compare in pairs (1/2, 2/3, 3/4...)
6) Discard least-like pairs
7) Choose the first index from the highest number chunk of last pair (they should be side by side)
8) This will be from the middle of the largest color block

You now have a representative color from the cover.

@Gargron What you could do fairly efficiently is take the most prominent color:

1) Read bitmap into number array via hex
2) Sort
3) Split into 8 equal array chunks (enough for nearly any album cover)
4) Average each chunk
5) Compare in pairs (1/2, 2/3, 3/4...)
6) Discard least-like pairs
7) Choose the first index from the highest number chunk of last pair (they should be side by side)
8) This will be from the middle of the largest color block

Dag Ågren ↙︎↙︎↙︎

@Gargron You can increase the saturation of the average colour, that might give interesting results.

muesli

@Gargron

I wouldn't use the average color, but the most dominant colors in an image. Also pre-cropping and edge detection may help here to center on the focused part of the image.

gudenau

@Gargron Try the most prominent color and use alpha to weight it?

Robert

@Gargron no idea how to implement this as code, but maybe find the color with the highest difference in value between the lowest and highest of RGB? Like the most attractive would be something where one of the values is 255 and another is 0, and the least attractive would be any color where all three values are the same

Go Up