Colorify.js

github.com ↗

Derive page backgrounds and gradients from the images they surround.

SI Score
80/100
Pricing
Open Source AI reading, not confirmed
Free plan
Not confirmed
Sign-up required
Not confirmed

Ask SI about Colorify.js

Answers use saved listing facts and recorded sources.
Homepage screenshot
Screenshot of the Colorify.js homepage

What it does

Colorify.js is a JavaScript library for extracting image colours and applying them within a page. It can create image-based gradients, load image lists and control reveal animations. The code is available under the ISC licence.

A photo gallery can use Colorify to colour an image wrapper, border or selected page element from each picture. Load the script and its stylesheet, mark the images and container, then configure colorify({}). The images option can also supply an array of image paths.

For a gradient, enable gradient and set gradientDirection. Reveal settings control the delay, transition duration and whether images appear in sequence; an event can trigger the reveal. These images have already loaded before Colorify hides, processes and reveals them, so this feature does not defer their download.

The browser must be allowed to read image pixels. Hosting images on the same server avoids the cross-origin restriction highlighted by the project. ISC allows commercial use and changes, provided the copyright and permission notices remain in copies.

Strengths

  • Extracted colours can target backgrounds, outlines, borders, fills or shadows.
  • PNG, JPEG and GIF images are supported.

Watch out for

  • Images from other origins can be blocked from pixel access.
  • Reveal animations happen after image loading.

Best for

  • Developers making image-responsive gallery or cover-page treatments.

Sources