Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time

Grav Image Color Plugin

Release Issues Downloads License

This plugin introduces grabbing the color palette from an image and Calculating Color Contrast.

Table of Contents:

Grav Image Color Plugin

The Grav Image Color Plugin for Grav adds the ability to get the dominant color from an image. You can generate a color palette from an image.

Installation and Updates

The Grav Image Color Plugin is easy to install with GPM.

$ bin/gpm install image-color

Or clone from GitHub and put in the user/plugins/image-color folder.

For more informations, please check the Installation and update guide.

Twig Functions

Twig functions Parameters Docs Return
{{ GetImageColor() }} num_results, reduce_brightness, reduce_gradients,delta Return palette array
{{ GetContrastYIQ() }} hexcolor Calculating Color Contrast string


Inside templates files.

Examples :

Getting the first dominant color of a given image

Using {{ GetImageColor() }} without parameters:

{% set color = GetImageColor(['my-image.jpg'].path())[0] %}

Example Output for {{ color }}


Using {{ GetImageColor() }} with parameters:

{% set num_results = 10 %}
{% set reduce_brightness = true %}
{% set reduce_gradients = true %}
{% set delta = 10 %}
{% set color = GetImageColor(['my-image.jpg'].path(),num_results, reduce_brightness, reduce_gradients, delta)[0] %}


num_results (int)

Number of colors

Default value : 10

reduce_brightness (bool)

Added a filter to reduce brightness variants of the same color.

Default value : true

reduce_gradients (bool)

Added a filter to reduce gradient variants ( useful for logos ).

Default value : true

delta (int) 1-255

Allow you to select the quantization delta. The smaller the delta the more accurate the color. This also increases the number of similar colors though.

Default value : 10

Getting color palette of a given image

Grav Image Color Plugin

{% set num_results = 10 %}
{% set reduce_brightness = true %}
{% set reduce_gradients = true %}
{% set delta = 10 %}
{% set colors = GetImageColor(['my-image.jpg'].path(),num_results, reduce_brightness, reduce_gradients, delta) %}
{% for color in colors %}
  <div class="uk-tile uk-tile-default" style="background-color: #{{color}};">
      <p class="uk-h4">#{{color}}</p>
{% endfor %}

Using {{ GetContrastYIQ(hexcolor) }} with parameters:

{% set hexcolor = '281e3c' %}
{% set contrast = GetContrastYIQ(hexcolor) %}

Example Output for {{ GetContrastYIQ }}


More info :

Calculating Color Contrast




six-character hex color


If you find a bug, please open a new issue


I've 'written' this plugin for my own use. It comes without any guarantee, so your mileage may vary in using it. If you find bugs or have great additions you'd like to share, use github to fork the project and share your improvements by initiating pull request

Tested on Grav

Latest Stable Version


You can contribute at any time! Before opening any issue, please search for existing issues and review the guidelines for contributing.

After that please note:

  • If you find a bug, would like to make a feature request or suggest an improvement, please open a new issue. If you have any interesting ideas for additions to the syntax please do suggest them as well!
  • Feature requests are more likely to get attention if you include a clearly described use case.
  • If you wish to submit a pull request, please make again sure that your request match the guidelines for contributing and that you keep track of adding unit tests for any new or changed functionality.

See also the list of contributors who participated in this project.


See Licence


Kepler Gelotte

Csongor Zalatnai