Analyzing Color with Code

If you’re a motion graphics artist then you’re familiar with the dogma that Buck.tv sets trends. Their playful yet polished work is always pushing the envelope. And their color palettes — Wow! How do they choose such great colors?

http://www.buck.tv/work/onward-internet/
http://www.buck.tv/work/onward-internet/

I wanted to investigate it mathematically. Using the Rune.js javascript library, I decided to plot these colors out on an HSV (hue, saturation, value) color wheel.

Then I looked for patterns:

Testing the analogous scheme in example #4 above, what would happen if I moved along the color wheel, shifting every color’s hue equally, leaving saturation and brightness the same?

Note: the code picks a width of rectangle at random, as well as an index from the color palette, so comparing these three images rectangle by rectangle will not work.

original (made with javascript)
shift #1
shift #2
shift #3 (added 190 to hue)

And what about those split complementary triangles in image #1 above?

Use the random function to see what good color schemes come up
These are four that I liked

And here’s how they look with a pretty design I made:

made with javascript
made with javascript
made with javascript
made with javascript

In the end, I’m not convinced that you can create a formula for a perfect color palette with an algorithm like the one I created. It of course depends on your design, as certain colors have different volumes and you would want to weight them more intelligently. And if you’re drooling over the OG designs, you can check out more of Chris Phillip’s work at http://www.phibs.tv/.


This article was based off of an assignment in graduate school at NYU’s ITP program. You can check out more of my graduate school blog posts here and my motion graphics work here. Thanks!