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.
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 }}
Example
---
image: my-colorful-image.jpg
---
<div style="border-color: {{ image | color }};">
<img src="{{ image }}" />
</div>
// OR
{{ image }}
<div style="border-color: {{ url | color }};">
<img src="{{ glide:id }}" />
</div>
{{ /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 }}
Example screenshot to demonstrate the difference between the color extraction strategies:
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
fields:
# existing fields
-
handle: color_dominant
field:
display: Dominant Color
type: color
-
handle: color_average
field:
display: Average Color
type: color
-
handle: color_contrast
field:
display: Contrast Color
type: color
Inspiration: https://github.com/sylvainjule/kirby-colorextractor
Color Extractor: https://github.com/thephpleague/color-extractor