Filter by color on OpenSearch

Discover visually relevant content that matches a particular color scheme.

Detect dominant color

You can use Sharp Node.js Library to detect dominant color of an image.

const { dominant } = await sharp(img).stats();

After detecting dominant color, we need a color representation at OpenSearch index .

Update index for saving color in HSL representation

We’ll use HSL representation to store dominant colors. This allows us to manipulate hue, saturation, and lightness values individually, giving us more flexibility in adjusting colors. Plus, writing a color search query becomes simpler with the hue range from 0 to 360.

Add nested index to your opensearch index mapping. For example:

{
  "properties": {
    "color":  {
        "properties" : {
            "h" : { "type" : "integer" },
            "s" : { "type" : "integer" },
            "l" : { "type" : "integer" }
        }
    }
  }
}

Write a color search query

Let’s search for blue items in OpenSearch.
Knowing that according to hue wheel, 0 is red, 120 is green, and 240 is blue.

We can query items having hue within 240 ± 10 degree.

{
    "query": {
        "bool": {
            "must": [
                {
                    "range": {
                        "color.h": {
                            "gte": 230,
                            "lte": 250
                        }
                    }
                },
                {
                    "range": {
                        "color.s": {
                            "gte": 50,
                            "lte": 90
                        }
                    }
                },
                {
                    "range": {
                        "color.l": {
                            "gte": 50,
                            "lte": 90
                        }
                    }
                }
            ]
        }
    }
}

Utilities

Javascript color conversions such as RGB to HSL, Color conversions in JS.
Color wheel for visual representation, CSS at Codepen.

.hue-wheel {
    width: 240px;
    height: 240px;
    background-size: 100% 100%;
    border-radius:100%;
    background-image: conic-gradient(red,#ff0,#0f0,#0ff,#00f,#ff00ff,red);
    -webkit-mask-image: radial-gradient(circle at 50% 50%,transparent 50%,black 50%);
    mask-image: radial-gradient(circle at 50% 50%,transparent 50%,black 50%);
}

Conclusion

Using HSL color representation in Opensearch is practical for searching different shades of hue in your index. This approach is storage independent and can also be applied to relational databases with SQL.