T23 Color Library

Mixing colors like an artist

When thirteen23 started work on the FRICKbits project with Laurie Frick, it was obvious 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.

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

Using one block of Laurie’s pattern portrait pieces as a source, we wanted to be able to generate the palette of corresponding colors.

Starting with RGB

As color neophytes, we started simple using RGB values and then calculated distances using a number of methods (e.g., euclidian distance). However, 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, it wasn’t clear how we were going to reliably generate “good” neighbor colors.

Normal RGB color space // 3D RGB color space // Unforunately, 3D RGB can create some ugly neighbors

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.

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.

LAB color space // The ellipse inside the LAB color space // Resulting color palette

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 starting point for the palettes in the app.

Be sure to grab the sample project on GitHub. It leverages thirteen23'sT23Kit-Colour cocoapod to generate our unique color palettes.

For more on this library:

Playing with color

Find us on Facebook and Twitter or get in touch at thirteen23.com.