Color Extractor

Addon by Aryeh Raber

Color Extractor Main Screenshot

Extract colors from images.

Extract colors from images.

This addon provides a new Modifier which takes an image asset and returns its dominant (or average) color as a HEX value.

Color Extractor


Install the addon via composer:

composer require aryehraber/statamic-color-extractor

Publish the config file:

php artisan vendor:publish --tag=color_extractor-config


Simply add the color modifier to an image asset to output the HEX color value:

{{ image | color }}


image: my-colorful-image.jpg

<div style="border-color: {{ image | color }};">
  <img src="{{ image }}" />

// OR

{{ image }}
<div style="border-color: {{ url | color }};">
  <img src="{{ glide:id }}" />
{{ /image }}

By default, the underlying color extractor tries to find the most dominant color in the image, however, results can vary (see example screenshot below). Therefore, an average param can be passed in to instead find the average color found in the image:

{{ image | color:average }}

The default type can be changed to average instead via the config file, which opens up a dominant param:

{{ image | color:dominant }}

The contrast parameter will try to find a color from the image palette with the most contrast to the dominant color:

{{ image | color:contrast }}

Dominant vs. Average vs. Contrast

Example screenshot to demonstrate the difference between the color extraction strategies:

Color Extractor Diff

Manually Editing Colors

Whenever a color is extracted from an image, it's added to the asset's meta data. This means you can manually override it by adding the following fields to your assets.yaml blueprint:

title: Asset
  # existing fields
    handle: color_dominant
      display: Dominant Color
      type: color
    handle: color_average
      display: Average Color
      type: color
    handle: color_contrast
      display: Contrast Color
      type: color



Color Extractor: