Trying to mimic the iTunes cover colors algorithm
PHP JavaScript
Latest commit 53a7fc6 Apr 28, 2013 @apfelbox Readme
Further explanations about low contrast
Permalink
Failed to load latest commit information.
assets
inc
.gitignore
README.md
analyze.php
index.php

README.md

Cover Colors

This is an example app, trying to mimic the iTunes cover colors algorithm. A live example is visible online.

How it works

It is a more or less direct port from Mathematica of the example code, provided by Seth Thompson.

Preparation of the image

  • At first, the image is scaled down to max-width of 36px and max-height of 36 (to reduce the computation cost)
  • A border of 1px around the image is removed, so that the new max. dimensions are 34x34.

The removal of the border is important, because some of the images have a fringy border (or just a normal border, too):

Amy MacDonald

Found colors: #897e61, #0a0705, #d7b67b

Background Color

  • A histogram of the 1px wide edge of the image is created and the most dominant color is selected

"Title" & "Song" Colors

  • A histogram of the complete image is created, which groups all (in the YUV color space) similar colors into buckets
  • These buckets are sorted downwars.
  • Now, from the top down two colors are searched, which are different enough from the background color
  • If no two colors are found, then the background color is analyzed, whether it is a dark color (luminance < 0.5) and white is used (black otherwise).

Possible further optimizations

This algorithm (and implementation!) is not optimal in many cases:

Simple AI additions to filter out highlights

Example: the bow tie of Aloe Blacc is not recognized:

Aloe Blacc - Good Things

Found colors: #e7c985, #643d2a, #906e4e

Looking for a better contrast between background color and text colors

Currently, the text colors are chosen, so that there is a large enough (to be defined) color difference between the colors. This can lead to potentialy low contrast, especially if you use the colors without any separation.

Example: Adele - 21

Adele - 21 in example app

Found colors: #4f504a, #babbbd, #97989a

This specific implementation

This implementation was created in just 3 hours, so there might be bugs or places for optimizations included. :-)

Sources & additional variations

The rights of all used cover images lie with the appropriate copyright owners.