Under the Hood: Image Manager and Color Search

imgix logo
Nick Pagsanjan
December 17, 2020
3 minute read
header image

Image Manager provides a way for users to search by many different attributes of an image, including file name, file type, category, content, and more. In addition, sometimes users will want to search by color to match a specific aesthetic or because the color may be the only thing they remember about the image.

Searching for an image by its colors is not as well defined compared to searching by a tag or category. If we wanted to find all of the images in a Source with the dominant color blue, we would expect results to include images containing various shades of blue, not just #0000ff. To achieve this we will need to: break down an image into its dominant colors, choose a color palette, and convert those dominant colors into the most similar in our palette which will be indexed for later searches. To quantitatively measure the similarity of two colors, we need to think about the CIELAB (Lab) color space and the color difference function ∆E.

The Lab color space models the euclidean distance between two given colors as a way to mimic how the human eye would perceive two different colors. This distance is called ∆E. All colors will need to be converted from RGB, since the ∆E function operates only in Lab. In general, the lower the result, the more similar two colors are.

index colors

Calculating the ∆E can be an expensive operation. We define a color palette, also known as our indexed colors, which we quantize an image’s dominant colors against. This effectively reduces our search space from millions of colors down to how many we defined previously.

dominant colors of an image
indexed colors of same image

When we quantize the image, we calculate the nearest indexed color for each dominant color. The nearest color is a color in our palette that has the smallest ∆E compared to the original. Images are indexed using these colors. Search queries by color will be converted to the nearest indexed color before further processing.

See our Image Manager documentation to learn more about color searching. If you have any questions or feedback about using this feature, please let us know.