I'm working on a program to use randomly-selected images as a desktop background. Now, not all images are the same shape as a computer monitor. One idea I had for dealing with this is to set a background color that is perceptually similar to the image. How would I go about finding this color?

Simple RGB averaging doesn't take into account nonlinearities such as monitor gamma, and doesn't deal with the human vision system.

  • $\begingroup$ It's not your question, but you see commonly on TV that 4:3 images are extended to widescreen by using a blurred and stretched copy in the background. That may work for you. $\endgroup$ – Jorge Rodriguez Aug 11 '15 at 15:50

You could try some form of color quantization algorithm, which generally extract the most dominant N colors. The one I've seen referenced most is modified median cut quantization [.pdf], which is based on median cut quantization [.doc]. The benefit to this kind of algorithm is that instead of simply averaging every color in the image, it extracts and discards other highly prominent colors instead of allowing them to pollute the average.

The concept is that color space (RGB space) is partitioned into 3D axis-aligned rectangular regions (the paper calls them vboxes) and iteratively subdivided by splitting vboxes, attempting to leave half of the pixels on each side of the split. The result is color clusters that should correspond to color clusters in the image. The largest color has a strong likelihood of being "perceptually similar" to the image.

There's a JavaScript implementation and demo of this algorithm called Color Thief.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.