Have images return only the dominant colour/color

[andrew.ravenwood]

When calling the media object you can access the colours as an array e.g.

# GraphQL CDA query

colors {
  hex
}

which returns an array (e.g.)

// JSON response

[
  {
    "hex": "#C29C66"
  },
  {
    "hex": "#CCBCDC"
  },
  {
    "hex": "#757688"
  },
  {
    "hex": "#5F4726"
  },
  {
    "hex": "#F6E9CE"
  },
  {
    "hex": "#242E3A"
  }
]

I would like this to be ordered by whichever colour is dominant in the image.

I have an example where a tiny part of the image is an orange graphic. When I call this particular image the orange colour is the first in the array.

In this image the actual dominant colour should be a light grey as that colour takes up most of the image, but there’s no way to sort the colours returned so that the grey hex colour is first - unless there is and I’m oblivious to it!

---

Moderator note: Applied code formatting

[roger]

Very late response to this, but another customer just asked about this and we now have an answer (or at least a workaround), thanks to Imgix’s palette extraction parameter: https://docs.imgix.com/en-US/apis/rendering/color-palette/color-palette-extraction#json (?palette=json).

If you have a GraphQL query for your image like this:

query MyQuery {
  upload(filter: {id: {eq: "brz6j3VuQWSdaQBU9xm8UQ"}}) {
    url
  }
}

(which is just the Dato logo)

You get back a response like:

{
  "data": {
    "upload": {
      "url": "https://www.datocms-assets.com/205/1728919490-datocms-logo.png"
    }
  }
}

Then you can then take that URL and append palette=json to it to make it https://www.datocms-assets.com/205/1728919490-datocms-logo.png?palette=json

That returns a JSON of extracted colors, including dominant ones:

The full response looks like:

{
  "colors": [
    {
      "red": 1,
      "hex": "#ffffff",
      "blue": 1,
      "green": 1
    },
    {
      "red": 1,
      "hex": "#ff6243",
      "blue": 0.262745,
      "green": 0.384314
    },
    {
      "red": 1,
      "hex": "#ff6340",
      "blue": 0.25098,
      "green": 0.388235
    },
    {
      "red": 1,
      "hex": "#ff5d37",
      "blue": 0.215686,
      "green": 0.364706
    },
    {
      "red": 1,
      "hex": "#ff6a3d",
      "blue": 0.239216,
      "green": 0.415686
    },
    {
      "red": 1,
      "hex": "#ff7d5c",
      "blue": 0.360784,
      "green": 0.490196
    }
  ],
  "average_luminance": 0.906994,
  "dominant_colors": {
    "vibrant": {
      "red": 1,
      "hex": "#ff4218",
      "blue": 0.0941176,
      "green": 0.258824
    },
    "muted_light": {
      "red": 1,
      "hex": "#ffffff",
      "blue": 1,
      "green": 1
    },
    "vibrant_light": {
      "red": 1,
      "hex": "#ff957c",
      "blue": 0.486275,
      "green": 0.584314
    },
    "vibrant_dark": {
      "red": 0.52,
      "hex": "#851800",
      "blue": 0,
      "green": 0.0945455
    }
  }
}