Currently working on a website with a large amount of artworks. Each of these artworks contains a number of labels that links to a color (hex and RGB).

I want to try to generate a list that retrieves similar artworks based on those colors as within range of the color(s) the artwork has.

How could I do this in an efficient way

For now each label has the name as the hexcode of the color and has 3 values as fields that represent the RGB values. This might not be the best way but open to suggestions since nothing is final just yet.

  • Needs more information on your setup. What kind of field(s) are your colors stored in? Are they all stored in the same format? Do you want to find artworks with the exact same color or a similar color?
    – MoritzLost
    Commented Jun 27, 2022 at 14:17
  • I still don't really understand your data model, Maybe post a screenshot of your field settings and the entry form for an artwork entry. What do you mean by 'within the range of the color(s)'?
    – MoritzLost
    Commented Jun 27, 2022 at 15:18
  • If you mean something like, for example, show similar images with the same green tone for an image with a green tone, then it makes sense to look for a suitable neural network for this. Further, you can simply parse/export the response of the neural service and import it into your entries.
    – RomanAvr
    Commented Jun 27, 2022 at 20:27

1 Answer 1


The most efficient way to do this is to use indexed values, basically a lookup table.

If you try to compare every red value on artwork A with every other red value on artwork B, C D, etc. on the fly, that's going to be one slow SQL query (and it'll get worse over time, an n+1 problem).

As any graphic designer will tell you, color matching is also not a perfect art and can be highly subjective.

A better approach is to limit the search and do the comparison up front to some known values. In other words, how close is the specified color in each piece to each already existing indexed color?

This stack exchange question has some good ideas and code to start with to determine the "distance". You could loop through your hex colors and determine what an appropriate distance would be and then tailor the colorDiff function accordingly.

As for the indexed colors themselves, the W3C CSS colors (or grouped by color) might be a good start and you can easily import all of those easily into Craft as Categories.

This would make the comparison on each artwork piece as simple as:

{# entry.colorsInPiece are the category colors #}
{% set relatedWorksByColor = craft.entries.section('artwork').relatedTo(entry.colorsInPiece).all %}

Using categories also allows you to place as many as you want on each piece. As you add new pieces over time also allows you to also let humans do some of that work if necessary.

IF those starting shades aren't enough granularity, you can always add more over time. And theoretically when you add a new color, you could kick off a Craft queue job to "check" and see what pieces this color would "fit" and then add the color to the existing categories in each entry if it does.

  • 1
    Thank you, quite a few interesting sources, I think the grouped by color idea might indeed be a good way to start since then it can also later be used as a way to filter artworks based on a certain color the user is looking for.
    – Jay V
    Commented Jun 28, 2022 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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