Extracting The Average Color From Images Or Videos – Fast Average Color

Category: Color , Javascript , Recommended | August 7, 2018
Author: fast-average-color
Views Total: 1,966 views
Official Page: Go to website
Last Update: August 7, 2018
License: MIT


Extracting The Average Color From Images Or Videos – Fast Average Color


Fast Average Color is a modern (ES6) JavaScript library which lets you extract the Average Color from images, videos or canvas elements.

See also:

How to use it:


$ npm install fast-average-color --save

Import module:

import FastAverageColor from 'fast-average-color/dist/index.es6';

Or Include the compiled version of the Fast Average Color from a CDN.

<script src="//unpkg.com/fast-average-color/dist/index.min.js"></script>

Initialize the Fast Average Color.

const demo = new FastAverageColor(),

Get the average color from an image you specify.

const myColor = demo.getColor(container.querySelector('img'));

This will return an object containing the average color in different color modes.

  hex: "#ffffff",
  hexa: "#ffffffff",
  isDark: false,
  isLight: true,
  rgb: "rgb(255,255,255)",
  rgba: "rgba(255,255,255,1)",
  // ...

Possible options.

const myColor = demo.getColor(container.querySelector('img'),{

      defaultColor: [255, 255, 255, 255]],
      mode: "speed", // "precision" or "speed"
      algorithm: "sqrt", // "simple" or "sqrt"
      step: 1,
      left: 0,
      top: 0,
      width: 400, // width of resource
      height: 300 // height of resource

Get the average color asynchronously.

demo.getColorAsync(resource, callback, [options])

Get the average color from an array.

demo.getColorFromArray4(array, {

  defaultColor: [255, 255, 255, 255]],
  algorithm: "sqrt", // "simple" or "sqrt"
  step: 1,


Destroy the library.


You Might Be Interested In:

Leave a Reply