Kirby 3 – Color extractor
This plugins extracts a dominant / average color of any image and stores it in the file's metadata as a HEX value.
This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, please consider making a donation of your choice or purchasing your license(s) through my affiliate link.
- 1. Installation
- 2. Usage
- 3. Configuration
- 4. Displaying and using the color
- 5. License
- 6. Credits
Download and copy this repository to
Alternatively, you can install it with composer:
composer require sylvainjule/colorextractor
It can be used in two ways :
Once installed within the
plugins folder, it will automatically start extracting colors for any image uploaded or replaced in the panel.
2.2. Panel button
If you happen to upload files manually, from frontend or any other way while not trigerring the hooks, custom janitor jobs are also available to catch up with all the images of a website without an associated color.
You'll first need to install the janitor plugin.
Then register the jobs provided by this plugin in your
'bnomei.janitor.jobs-extends' => [ 'sylvainjule.colorextractor.jobs', ],
You can now use it in your blueprints:
colorextractor: type: janitor label: Extract missing colors progress: 'Processing…' job: extractColors
extractColors job will only extract the missing colors. If you want to force a re-extraction of existing colors, use the
forceExtractColors job instead.
3.1. Extraction mode
By default, the plugin tends to extract the most dominant / vibrant color of the image. Sometimes though, it can be handy to extract an average one based on an approximation of the whole color palette. When set to
average, this options shrinks the image to a 1x1 pixel thumb, then grab the color the image processor chose as the average one. You'll find some examples here.
You can also set it to
both, if you want both colors to be extracted and pick from them later from your templates (see the
Available options are
dominant | average | both. Default is
// config/config.php return array( 'sylvainjule.colorextractor.mode' => 'dominant', );
3.2. Transparency handling
The plugin needs to know how to handle colors with alpha value greater than zero, and what color to fallback to when transparency is detected.
// config/config.php return array( 'sylvainjule.colorextractor.fallbackColor' => '#000000', );
4. Displaying and using the color
4.1. If a single color is extracted
In case you have chosen either
dominant (default) or
average extraction mode, you can access it directly from your template under the
The plugin works well combined with @hananils's color picker, which might come handy to preview and adjust the detected color.
# Place this inside your file blueprint fields: color: type: colors
4.2. If both colors are extracted
If you have chosen to extract and store both colors, the color field will store both HEX values delimited by a comma. The plugin provides a file method to get a specific color from there: