Extract Prominent Colors From Images And Generate Android Palettes – palette-js

Preview:

Description:

palette-js is a canvas based JavaScript library that extracts prominent colors from a BMP image and generates a palette just like the Android Palette API.

How to use it:

1. Download and import the palette.min.js from the dist folder.

<script src="dist/palette.min.js"></script>

2. Define an array of images (bmp format).

const image_paths = ['1.bmp', '2.bmp', '3.bmp'];

3. Generate Android palettes from the images.

image_paths.forEach(function (path) {
  let image = new Image();
  image.src = path;
  image.onload = function () {
      let palette = new Palette(image);
      let html = `<div class="item"><img src="${path}" class="image"><ul class="colors">`;
      html += `<li class="color" style="background: ${palette.getVibrantColor()}"><span>VIBRANT</span></li>`;
      html += `<li class="color" style="background: ${palette.getLightVibrantColor()}"><span>LIGHT_VIBRANT</span></li>`;
      html += `<li class="color" style="background: ${palette.getDarkVibrantColor()}"><span>DARK_VIBRANT</span></li>`;
      html += `<li class="color" style="background: ${palette.getMutedColor()}"><span>MUTED</span></li>`;
      html += `<li class="color" style="background: ${palette.getLightMutedColor()}"><span>LIGHT_MUTED</span></li>`;
      html += `<li class="color" style="background: ${palette.getDarkMutedColor()}"><span>DARK_MUTED</span></li>`;
      html += '</ul></div>';
      document.getElementById('container').innerHTML += html
  };
});