<p>The most efficient way to do this is to use indexed values, basically a lookup table.</p>
<p>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).</p>
<p>As any graphic designer will tell you, color matching is also not a perfect art and can be highly subjective.</p>
<p>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?</p>
<p>This <a href="https://stackoverflow.com/questions/1633828/distance-between-colours-in-php">stack exchange question</a> has some good ideas and code to start with to determine the &quot;distance&quot;. You could loop through your hex colors and determine what an appropriate distance would be and then tailor the <code>colorDiff</code> function accordingly.</p>
<p>As for the indexed colors themselves, the <a href="https://www.w3.org/wiki/CSS/Properties/color/keywords" rel="nofollow noreferrer">W3C CSS colors</a> (or <a href="https://en.wikipedia.org/wiki/Web_colors#Extended_colors" rel="nofollow noreferrer">grouped by color</a>) might be a good start and you can easily import all of those easily into Craft as <a href="https://craftcms.com/docs/4.x/categories.html" rel="nofollow noreferrer">Categories</a>.</p>
<p>This would make the comparison on each artwork piece as simple as:</p>
<pre><code>{# entry.colorsInPiece are the category colors #}
{% set relatedWorksByColor = craft.entries.section('artwork').relatedTo(entry.colorsInPiece).all %}
</code></pre>
<p>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.</p>
<p>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 &quot;check&quot; and see what pieces this color would &quot;fit&quot; and then add the color to the existing categories in each entry if it does.</p>

CC BY-SA 4.0
2022-06-28T06:55:01.233Z
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
CC BY-SA 4.0
2022-06-27T23:35:59.177Z
2022-06-27T23:46:35.070Z
2022-06-27T23:46:35.070Z
RitterKnight
<p>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).</p>
<p>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.</p>
<p>How could I do this in an efficient way</p>
<p>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.</p>

CC BY-SA 4.0
2022-06-27T14:17:07.833Z
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
CC BY-SA 4.0
2022-06-27T15:18:35.013Z
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
CC BY-SA 4.0
2022-06-27T20:27:38.187Z
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
<entries><filter><comparisons>
How to compare entries based on color?
# How to compare entries based on color?

(Asked by: username_0 on 2022-06-27)

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.

**Tags:** entries, filter, comparisons
> **Comments:**
> **username_1**: 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?  
> **username_1**: 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)'?  
> **username_2**: 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.  

---

## 1 answers

### Answer by username_3 on 2022-06-27. Score: 2 | Accepted answer

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.

> **Comments:**
> **username_0**: 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.  

---

