GROQ query to for image palette information

By Bryan Robinson

A query to pull the rich color data associated with an image from the Sanity Asset Pipeline

documentWithImage.js

*[_id =="documentWithImage"]{
  ...,
  image{
    ..., // Get all information
    "palette": asset->metadata.palette // Pull palette from metadata on the asset
  }
}

response.json

{
  "_id": "documentWithImage",
  "title": "A document with an image",
  // ... other data
  "image": {
    "_key": "5f34eed722c8",
    "_type": "image",
    "asset": {
      "_ref": "image-df9f14aaebefb17704af30c01d6fcd7eca624afe-3000x4542-jpg",
      "_type": "reference"
    },
    "caption": "Plants",
    "palette": {
      "_type": "sanity.imagePalette",
      "darkMuted": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#294a41",
        "foreground": "#fff",
        "population": 7.7,
        "title": "#fff"
      },
      "darkVibrant": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#094836",
        "foreground": "#fff",
        "population": 0.32,
        "title": "#fff"
      },
      "dominant": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#294a41",
        "foreground": "#fff",
        "population": 7.7,
        "title": "#fff"
      },
      "lightMuted": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#94b7a8",
        "foreground": "#000",
        "population": 3.2,
        "title": "#fff"
      },
      "lightVibrant": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#9adfd2",
        "foreground": "#000",
        "population": 0,
        "title": "#000"
      },
      "muted": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#649c7e",
        "foreground": "#fff",
        "population": 0.36,
        "title": "#fff"
      },
      "vibrant": {
        "_type": "sanity.imagePaletteSwatch",
        "background": "#287e6e",
        "foreground": "#fff",
        "population": 0.06,
        "title": "#fff"
      }
    }
  }
}  

This query takes a document or document type that contains an image and then dereferences the palette information from the referenced asset's metadata.

Contributor

Other schemas by author