ColorThief wrapper for AngularJS
Switch branches/tags
Nothing to show
Clone or download
Latest commit beb09ea Sep 8, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Adds library. Sep 24, 2014
LICENSE Initial commit Sep 24, 2014 README provider example was wrong Sep 8, 2016
angular-colorthief.js Adds library. Sep 24, 2014
angular-colorthief.min.js Adds library. Sep 24, 2014
bower.json v0.2.0 Sep 8, 2016


ngColorThief is a wrapper for the ColorThief library to extract dominant colors and color palettes from images.

Note: cross-domain images will not work unless they're served with the correct CORS headers. Furthermore, you need to add the cross-origin attribute to image tags for this to work.


Install via bower

bower install angular-colorthief --save

Or just copy the angular-colorthief.min.js file to your project. Next, add the module as a dependency to your project:

angular.module('yourApp', ['ngColorThief'])

How To

ngColorThief provides a service and a directive. The simplest way to grab colors is to use the directive on an image tag:

<img ng-src="{{myImage}}" color-thief color-thief-dominant="colors.myDominantColor">

When the image loads, myDominantColor will contain an array with the dominant color (eg: [255, 250, 109]). You could apply this to the container:

<div class="container" ng-style="{'background-color': 'rgb('+colors.dominantColor[0]+', '+colors.dominantColor[1]+', '+colors.dominantColor[2]+')'}">
    <img ng-src="{{myImage}}" color-thief color-thief-dominant="colors.myDominantColor">

You can also grab a color palette:

<img ng-src="{{myImage}}" color-thief color-thief-palette="colors.myPalette">

And specify a color count

<img ng-src="{{myImage}}" color-thief color-thief-palette="colors.myPalette" color-thief-palette-count="4">

The service simply provides an almost direct interface to a colorThief instance:

app.controller('MyCtrl', function ($colorThief) {
  var image = /*...*/;

  var dominant = $colorThief.getColor(image);
  var palette = $colorThief.getPalette(image);

Refer to ColorThief's documentation to know more.

Global Settings

You can configure global settings via the provider

app.config(function ($colorThiefProvider) {
  // Set the default quality

  // Set the default palette color count

  // Set wether to return arrays (ColorThief's default) or
  // objects like {r: 242, g: 124, b: 91} (false by default).


The library is minimized using Closure Compiler with the following command

closure-compiler --js_output_file=angular-colorthief.min.js --compilation_level SIMPLE angular-colorthief.js


Pull requests are welcome! Please fork, create a branch and submit a pull request.


MIT License.