In the Image Optimize plugin, we have access to the color palette, however it's not clear in the documentation how to access specific colors (https://nystudio107.com/docs/image-optimize/AdvancedUsage.html#color-palette). This works:

{% set optimizedImages = entry.myAssetField.one().optimizedImagesField %}
{% for color in optimizedImages.colorPalette %}
    <div style="background-color: {{ color }}">
{% endfor %}

But it returns this which is obviously not a valid CSS background-color:


Which I assume is an array, but I'm not quite sure access each color individually?

Also, it would be nice to know how the order is determined? Light to dark, dark to light? I'm interested in building a background gradient from two colors that match the image.

EDIT: I just noticed that the documentation says, "These colors are sorted by color dominance, and can be used to style other HTML elements with complimentary colors." So, is there a way to choose the 1st and 2nd most dominant colors?


Yep, using your above example, optimizedImages.colorPalette is an array, so you could do:

// Output the most dominant color
{{ optimizedImages.colorPalette[0] }}

// Output the second-most dominant color
{{ optimizedImages.colorPalette[1] }}
  • I did figure this out after putting a little more time into it. Thanks for your response. Jun 1 '20 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.