Submit A Resource
Contact Us
About Functionn

Subscription Options

Subscribe By Email (265+)



Dec 14, 2012

Author: Hirvesh Posted At: 12/14/2012 Tags: , , , ,

AlbumColors.js - A JavaScript Library To Create A Three Color Palette From An Image


AlbumColors.js is a JavaScript library to pick 3 colors from an image to create a palette for background and text colors, inspired by iTunes 11.

The Algorithm

The algorithm is simple:

  • 1. Load image from URL into canvas and get the color array by pixels (AlbumImage)
  • 2 Find n (default 10) major colors from the pixel array (AlbumColors)
  • 2.1. Diide color spectrum into 64 buckets
  • 2.2. Add each color into one of the bucket with a simple approximation
  • 2.3. Take the 10 buckets with the largest number of colors in them
  • 2.4. Averaging the colors in the dominating buckets to get the presenting color for the buckets
  • 3. Among the 10 major colors, pick out 3 (colorChooser)
  • 3.1. Color distance is simply defined as the Euclidean distance
  • 3.2. The most dominating color (ColorA) will be the background
  • 3.3. The color that is most distanced from ColorA, ColorB, will be text color 1
  • 3.4. The color that is second distanced form ColorA, ColorC, will be text color 2

Requirements: None
Demo: http://albumcolors…lastfm/?lastfm=willowm
License: NCSA License

Daily Posts, Be Updated, Subscribe:

Want Free Web Resources? Enter Your Email And We'll Send It To You - Daily! (265+ Subscribers)

Yup, it's that straight forward! Enter your email address below and we'll send you the latest web resources to your inbox, everyday. We don't do spam. Ever.

Trending Posts On Functionn This Week


Other Interesting Resources:


Post a Comment


Recent Posts

Popular Categories

Popular Components

Popular Licenses