Color Library

Michael Van Milligan
Michael Van Milligan Developer April 26, 2015

When we started work on the FRICKbits project with Laurie, it became obvious to us that we were going to have to slay some serious dragons to find ways to computationally generate Laurie’s aesthetic from within a mobile app. One of the “dragons” that we ran up against was a way for users to choose an adaptable color palette from a particular “seed” color.

An inline image

Generally speaking, when you’re attempting to group things together, you usually do so by using some model of measurement. We first started by asking the question: “How can one measure the distance between colors?”. In the most simplistic case, perhaps we could use existing methods of describing colors, give them a number, and then use that number to derive distances.

An inline image

As color neophytes, we started simple using RGB values and calculated distances using various methods (e.g., euclidian distance). However, just as we were about to get excited, we realized two things: (1) Some of the distances between colors didn’t give us accurate representations of perceptive distance; (2) Given the geometric space of RGB, how the heck were we going to reliably and feasibly generate “good” neighbor colors?

Back to the drawing board.

Well, all was not lost. It turns out that the color experts, International Commission on Illumination (CIE), have already gone down this path and have created models of color based on human perceptibility. Once more, the geometric space is (mostly) uniform, making it ideal for measuring color distances and, by extension, neighbor generation based on color distances. Not only that, there also appeared to be several standards on computing distance within these spaces.

Illustrates it all

Armed with this new knowledge, it made sense to try the previous methods of distance we used on RGB. However, since we have a geometrically uniform space, we can be a little bit more creative on how we can find neighbors. While looking at a 3D model of the entire surface, it appeared to us as a deformed ellipsoid. So we thought we could encapsulate a miniature ellipsoid around a point in the space and then generate points within that space as an algorithm for color palette generation.

Eureka!

Turns out that while it wasn’t perfect (there are so many knobs to turn within the heuristic, not to mention some back-checking, i.e., some Lab colors cannot be represented accurately back into RGB space), it provided a central jumping-off point for the palettes needed in the app. After this exercise, we decided we should open source this work by creating a cocoapod: T23Kit-Colour. Give it a try and let us know what you think!