<p>Yep, using your above example, <code>optimizedImages.colorPalette</code> is an array, so you could do:</p>

<pre class="lang-php prettyprint-override"><code>// Output the most dominant color
{{ optimizedImages.colorPalette[0] }}

// Output the second-most dominant color
{{ optimizedImages.colorPalette[1] }}
</code></pre>

CC BY-SA 4.0
2020-06-01T14:32:14.390Z
I did figure this out after putting a little more time into it. Thanks for your response.
Vaughn D. Taylor
CC BY-SA 4.0
2020-05-30T23:49:42.827Z
2020-05-30T23:49:42.827Z
andrew.welch
<p>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 (<a href="https://nystudio107.com/docs/image-optimize/AdvancedUsage.html#color-palette" rel="nofollow noreferrer">https://nystudio107.com/docs/image-optimize/AdvancedUsage.html#color-palette</a>). This works:</p>

<pre><code>{% set optimizedImages = entry.myAssetField.one().optimizedImagesField %}
{% for color in optimizedImages.colorPalette %}
    &lt;div style="background-color: {{ color }}"&gt;
    &lt;/div&gt;
{% endfor %}
</code></pre>

<p>But it returns this which is obviously not a valid CSS background-color:</p>

<pre><code>#06070d
#e0e5e8
#2d539d
#5e92b9
#848484
</code></pre>

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

<p>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.</p>

<p>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?</p>

<plugin-imageoptimize>
Image Optimize: How do I access specific colors?
# Image Optimize: How do I access specific colors?

(Asked by: username_0 on 2020-05-29)

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 %}
    
    
{% endfor %}

But it returns this which is obviously not a valid CSS background-color:
#06070d
#e0e5e8
#2d539d
#5e92b9
#848484

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?

**Tags:** plugin-imageoptimize


---

## 1 answers

### Answer by username_1 on 2020-05-30. Score: 1 | Accepted answer

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] }}

> **Comments:**
> **username_0**: I did figure this out after putting a little more time into it. Thanks for your response.  

---

