Dynamic Colors from Images

You can use the .getColors() method to extract colors from an imgix image. Colors are sorted by luminance, darker values first. This feature allows you to easily generate and control layout colors or dynamic gradients from an image.

1
2
3
4
5
/* Extract 16 colors from an image to use */
var ix = new imgix.URL('https://assets.imgix.net/examples/butterfly.jpg');
ix.getColors(function(colors) {
  document.body.style.backgroundColor = colors[0];
});

Title

This is some text

Title

This is some text

Title

This is some text

Title

This is some text

Below, you can launch and view the source of standalone examples. Full documentation of imgix.js can be found on Github.

Full page example : color palettes imgix API: Palette

Resources

More examples and documentation of implementation can be found below. For those using jQuery, we also have an imgix.js plugin.

imgix.js on Github imgix.js for jQuery