How to implement search-by-color when all you have is a good coffee

Using the distance of the colors in a Euclidian space makes sense, but RGB isn&#x27;t the best space to use.<p>You probably want something like CIELAB which is (quoting from Wikipedia) &quot;designed so that the same amount of numerical change... corresponds to roughly the same amount of visually perceived change.&quot;<p><a href="https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;CIELAB_color_space" rel="nofollow">https:&#x2F;&#x2F;en.m.wikipedia.org&#x2F;wiki&#x2F;CIELAB_color_space</a>

This seems like a really fun problem and I think you found the solution with the best cost&#x2F;effort ratio. The first thing that sprung to mind on seeing the problem for me was to use the fact that products often come in several colour variations but use very similar images for each. If you mask out the parts of the image that are similar you can get the single &#x27;actual&#x27; colour as it might be labeled by a human. This would also allow you to search for neutral tones like grey and black.<p>And seeing as you&#x27;ve gone to all the trouble of figuring out how to grab dominant colours from images, why not allow users to upload an image of their logo and grab the dominant colour from that? This could help avoid the problem of having noticably different shades, without making the user do anything technical like searching with an RGB value and a threshold.

You&#x27;ll get better results using a perceptually uniform color space [1]<p>CIE76 is not ideal but would let you continue to use CUBE.<p>You could consider doing a first pass with CIE76 and then sort by something more accurate in a second pass.<p>[1] <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Color_difference" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Color_difference</a>

&gt; <i>I just took the euclidean distance between the given color and (0,255,0)</i><p>If you used HSL, you possibly could match on the hue while being more lax on the brightness and saturation—so a pastel-pink color could still match to a red image. Not sure if the database can use different weights for positions in a vector (though with pre-processing S and L could be collapsed to narrower ranges, so they match more freely afterwards). Just need to make sure that white and black aren&#x27;t matched to random hue values.<p>Though, I guess if you use only the distance to fixed chosen high-saturation values then it&#x27;s about the same thing.<p>Except it seems that with just RGB distance, a semi-saturated cyan or yellow color might be counted as closer to ‘pure green’ than dark-green. Something like (0,255,180) vs (0,70,0).<p>Also:<p>&gt; <i>values(&#x27;(${ color })&#x27;</i><p>2020 and still no placeholders.

I&#x27;m only marginally technical, but I would like to congratulate the author for a great example of how to explain the issues, the sequence of problem solving and the solutions so clearly and entertainly. Very good writing.

This might be a dumb question, but what does coffee have to do with this task?

the palette approach is a little reductive. we&#x27;ve built a solution in this space, a more robust approach would be to get the dominant colour, and from that colour brightness and tone extract the accent colour and the contrast colour by considering both distance from the dominant and extent on the image, that solves the problem of having a weighted palette ignoring, say, a red stitching because it&#x27;s too small

I wrote a tutorial a while back on how to do this in Postgres using the Google Cloud Vision API in case its useful for anyone..<p><a href="https:&#x2F;&#x2F;medium.com&#x2F;@adamgross_6978&#x2F;getting-started-with-json-and-postgres-782cba93c706" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;@adamgross_6978&#x2F;getting-started-with-json...</a>

I like the color pallet option you provided showing the primary colors. Adding the colors as facet options would be interesting since you can align each of the colors with the items, then maybe a numeric metric you can use to sort the results by the percent coverage of that color.<p>Another item to consider is also taking into account how the user might search - &quot;red shoes&quot;, then classify the query as &quot;color: red&quot; &amp; &quot;shoes&quot;.<p>The next fun challenge is determining which image to display if you have a variant product (color&#x2F;size combination for clothing for example). Figuring out which product image to show in the result set requires identifying the primary color in the search.

Always happy to learn about more good ways to use PostgreSQL!

Mike Bostock (the d3 creator) has a nice little demo illustrating the use of linear RGB to assign an average color to an image. [1]<p>[1] <a href="https:&#x2F;&#x2F;observablehq.com&#x2F;@mbostock&#x2F;image-average" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;@mbostock&#x2F;image-average</a>

Vibrant.js [1] also does this.<p>It is nice to look into the source code to see how it is done.<p>But in my experience it works around 80% of the time because there are so many exceptions.<p>[1] <a href="https:&#x2F;&#x2F;jariz.github.io&#x2F;vibrant.js&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jariz.github.io&#x2F;vibrant.js&#x2F;</a>

There&#x27;s a classic injection attack when interpolating in the SQL query<p>Also as others have mentioned RGB space and human perceptible color space is different enough that distance in RGB doesn&#x27;t equate to difference&#x2F;similarity between colors

Impressive. I wasn&#x27;t expecting that approach! The whole thing implemented as a stored procedure in PosgresSQL a data type (cube) I didn&#x27;t even know existed. That was a wild ride for me.

Great article. However in my experience, using the Euclidean distance in RGB space can bring about some really weird visual &#x27;matches&#x27;. The best color space I&#x27;ve found so far for this type of task is the L<i>A</i>B color space.<p>And there are also other tricks of the trade. But for starters this simple solution might be enough.<p>This solution also assumes the colors in the images are &#x27;calibrated&#x27; and are consistent. This is almost never the case, but may be overlooked in for the given use case.

I don&#x27;t believe coffee (good or bad) contributed to this article.

Good article, and I like the implementation.<p>I am sure it has some drawbacks, like distance on the rgb space may not be the best option, or that it does not ignore background color of it is not transparent, still, I like the way of thinking

What does the title refer to?

I really like this title: &quot;Can we implement something easier than a Convolutional Neural Network?&quot;<p>Nice to see people still remember problems can be solved with anything else than, ehm, &quot;AI&quot;.

I thought this was going to be about how coffee is a consistent color so you can white balance your customers uploads by asking them to photograph coffee in their ambient lighting.

xkcd did a perceptual color survey a few years ago: <a href="https:&#x2F;&#x2F;blog.xkcd.com&#x2F;2010&#x2F;05&#x2F;03&#x2F;color-survey-results&#x2F;" rel="nofollow">https:&#x2F;&#x2F;blog.xkcd.com&#x2F;2010&#x2F;05&#x2F;03&#x2F;color-survey-results&#x2F;</a><p>It&#x27;s population specific to the type of people who read xkcd but it&#x27;s an interesting starting point if you want higher resolution info on, eg: exactly where people draw the line between &quot;green&quot; and &quot;blue&quot;.<p>Raw data is here: <a href="http:&#x2F;&#x2F;xkcd.com&#x2F;color&#x2F;colorsurvey.tar.gz" rel="nofollow">http:&#x2F;&#x2F;xkcd.com&#x2F;color&#x2F;colorsurvey.tar.gz</a>

Nice write-up, thank you.<p>Nitpick. What&#x27;s the point of writing a good guide with rich text and images, but showing end result only in video? I have embedded YouTube videos disabled by default, so it&#x27;s a little embarrassing.