Skip to content
Dec 14th - Learn how Tecovas roped in success with Sanity and Shopify 🤠
Share your own snippet

GROQ query to pull data 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.

See this in action in this code sandbox. Or see the video walkthrough on Twitter.

Contributor

Other schemas by author