Color information and analysis

Imager X comes with a bunch of methods for working with colors. For starters you can use craft.imagerx.getDominantColor and craft.imagerx.getColorPalette to get color information from an image.

{% set dominantColor = craft.imagerx.getDominantColor(image) %}
{% set palette = craft.imagerx.getColorPalette(image) %}

<p>
    Look at that dominant color: 
    <span style="background: {{ dominantColor }}; width: 20px; height: 20px; display: inline-block;"></span>
</p>

<p>
    And look at this color palette:
    {% for color in palette %}
        <span style="background: {{ color }}; width: 20px; height: 20px; display: inline-block;"></span>
    {% endfor %}
</p>    

If you need to convert between RGB and HEX color values, there's craft.imagerx.hex2rgb and craft.imagerx.rgb2hex.

{% set rgb = craft.imagerx.hex2rgb('#f9c344') %}
Color in RGB is: {{ 'rgb(' ~ rgb[0] ~ ',' ~ rgb[1] ~ ',' ~ rgb[2] ~ ')' }}

{% set hex = craft.imagerx.rgb2hex([249, 195, 68]) %}
Color in hex is: {{ hex }}

Imager also comes with a ton of different helper methods for analyzing colors. There's nifty stuff like craft.imagerx.getBrightness, craft.imagerx.getPercievedBrightness, craft.imagerx.getContrastRatio, and many more. Together with craft.imagerx.getDominantColor these can be used to analyze the color of your image, and adapt your design based on it (think, light text on dark images and vice versa).

When in Imgix...

Imgix also provides functionality to extract color palettes (opens new window), which is exposed through the ImgixTransformedImageModel (opens new window).

Here's an example that gets the eigth most dominant colors from a transformed image in json format, and makes a pretty palette:

{% set transformedImage = craft.imagerx.transformImage(image, { width: 300, height: 400 }) %}
{% set palette = transformedImage.getPalette('json', 8) %}

<div>
    {% for paletteColor in palette.colors %}
        <span style="display: inline-block; width: 30px; height: 30px; background: {{ paletteColor.hex }};"></span>
    {% endfor %}
</div>

Refer to the documentation on ImgixTransformedImageModel (opens new window) for more details.