Choosing the Perfect Colors

Choosing the right colors is a key step in any design project. Everyone knows tried-and-true color combinations, but classic color schemes can be a trap. If you’re a designer, you need to find original options—not rehash old chestnuts or popular color combos.

And how do you experiment with digital color, keeping your creative options open, without losing sight of the principles of color harmony? This was the challenge facing the Sessions College Web design team in developing a new version of the Color Calculator, an interactive color scheme generator, which launched on March 22nd, 2013.

Sessions College launched the first version of its Color Calculator as a Flash-based tool back in 2002. In the early 2000s, the school’s Flash tool became a popular tool for exploring color combinations and exporting your results as HTML, RGB, or CMYK values.

Ten years on, multimedia whiz Ethan Herr and colleagues were tasked with revamping the aging app. The goal was not only to bring it up to date with modern Web languages such as HTML5 and JQuery, so that it could be used by iPhone and iPad users—but also to make it a more genuinely useful tool for creative color choices.

“At any level of expertise, choosing colors for a design can be a tricky process,” comments Herr. “Assuming you have a base color for a design, we sought to answer the common creative question: What color(s) can I add to an original color or set of colors to create a  harmonious color scheme?”

In re-imagining the calculator, Herr, working with Sessions Creative Director Patricio Sarzosa, harnessed the profound and time-tested logic of the color wheel.

In 1667, the color wheel was invented by scientist Isaac Newton, who arranged the colors of the spectrum around a circle on the theory that certain combinations of color were harmonious based on their geometric relationships on the color wheel, then called the color circle. As the color wheel and our understanding of color evolved in the 18th and 19th centuries (with later breakthroughs from Claude Boutet, Johann Wolfgang von Goethe, and Johannes Itten, among others) the color wheel became an essential tool for helping artists understand color and how to mix colors in painting.

Fast forward to the 21st century (zooming past Flash), Ethan Herr and the Sessions creative team were working on designing an interface that would make the many options—and the ability to change your options, to experiment—simple. Just start with a color, any color. Or start with two colors!

Then choose a color scheme based on the principles of color harmony, such as analogous, complementary, or monochromatic. Experiment with saturation, adjust. Then export your swatch.

Designing an interface that served the goal was an important objective. “The key was to strip out as much as possible in order to see the colors better, keeping the interactive elements simple, recognizable, and easy to use,” says Herr. “This simplified the development process as well. We didn’t need to create a whole self-contained application, just essentially a cool Web page that gives you quick results.”

“Our technology for the project was JavaScript all the way, more specifically jQuery, jQuery UI, and a nice little plugin called jQuery Minicolors that helped a lot with the trigonometry used for the circular wheel functionality.” The most challenging part, according to Herr, was “getting some of the symmetries just right—what you can draw and explain easily is not always easy to translate into pure math.”

The end result is a new tool that adds something that even the coolest tools on the Web, such as Adobe Kuler, does not offer. Could it actually be cooler than Kuler? According to Herr: “Many tools let you develop a scheme starting from one color. But what happens if you have two or three colors you want to develop more from? This tool lets you easily do that, in addition to allowing you to unlock the main wheel and expand your scheme using your own unconstrained harmonies.”

We’d love to see the Color Calculator used for design projects and as an educational resource by design students and design practitioners around the world. In fact, an art teacher in Canterbury, England wrote to us recently to say he was using the tool to explain color theory in his classes. If you’ve found a new creative use for this new/old technology, please write to let us know.

To use the color calculator to develop color combinations, visit the color calculator page. For more information on multimedia artist Ethan Herr’s work, visit Ethan Herr Media.