# 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.