Kuler Than Thou

The new technology just keeps rolling off the assembly line at Adobe Labs. It seems like every time I return from traveling (was working in Mexico City last week) there’s something new to talk about — and this time it has to do with . . . (hold on to your hats, folks) . . . Color Theory!!!!!

For those of you that think I’ve geeked way too far out this time, stay with me. Color Theory is one of the fundamentals of graphic design (including motion graphic design), and since most people come into motion graphics on a “sideways” path (i.e. without having gone to design school) it’s something that not everybody understands. One of the many reasons you learn Color Theory in design school or art school is to help you understand how colors relate to one another, which is the first step to being able to create an appropriate color palette for a motion graphics project.

In a project for a corporate client, it’s often the case that the client will require that only their brand palette be used, so that their brand identity is reinforced. But even if you don’t work with these constraints it’s a good idea to create a working palette for your projects as it helps you to keep a cohesive look and feel. I like to use the analogy of a music ensemble — there are a set of instruments each with their own sonic characteristics (i.e. timbre) but it’s also how those instruments sound together that makes up the texture & feel of a piece. There’s a reason to use a string quartet, as opposed to, say, the Stanford University Marching Band to convey the mood of serenity. I think you get my drift.

So, being that having a color palette for a motion graphics project is important, and being that our goal here at Adobe is to create tools that make you more creative & productive, we rolled out a new web-based application called Kuler last week. It’s free to use and you can access it at kuler.adobe.com

kuler_splash.jpg

Kuler lets you create and share color palettes, as well as browse & download palettes created by other Kuler users. It’s designed to help you create palettes based on the rules of Color Theory, so even if you haven’t got a clue you can create tight, logical palettes with just a few clicks of the mouse.

When you first launch Kuler, you’ll see the screen above showing some of the highest rated palettes created by the growing community of Kuler users (you can see one I created based on the colors of the old “Good ‘n Plenty” candy box). To create your own palette, click on the Create button and you will be presented with Kuler’s easy-to-use palette creation interface:

kuler_ui.jpg

To start with, adjust the sliders under the first swatch to set your base color. In my example, I’m using red. Then, you can create several color palettes based on the rules of Color Theory by clicking on the names of the rules, which are (with examples):

Analogous: Matches colors with adjacent hues
kuler_sw_1.jpg

Monochromatic: Focuses on one color with varied intensity and lightness in a single hue
kuler_sw_2.jpg

Triad: Spaces your colors in a triangle around the wheel for a contrasting theme
kuler_sw_3.jpg

Complementary: Uses the opposite two colors on the color wheel for a simple theme based on two hues
kuler_sw_4.jpg

Compound: Combines interesting colors from multiple hues
kuler_sw_5.jpg

Shades: Creates subtle variations of the base color’s hue
kuler_sw_6.jpg

Custom: Lets you drag individual color circles around the wheel with complete freedom
kuler_sw_7.jpg

It’s easy to see, from the examples above, how many possibilities there are just staying within the rules of Color Theory. But it’s also easy to expand on this by dragging the color circles when you’re within a rule – thereby using the rule as a jumping off point to creating a palette that will look cohesive and pleasing.

Once you’ve created a palette you can save it, publish it for other Kuler users to use (if you wish) and then download it as an Adobe Swatch Exchange file that can be opened in Illustrator CS2. You can also use the swatches as they appear in Kuler to sample with the eyedropper tool in After Effects, Photoshop, or most other Adobe tools. Use this as the basis for the colors you use in your backgrounds, text, and other colored elements in your projects .

As someone who came into motion graphics “sideways” and didn’t learn Color Theory until I took a post-grad class at Pratt Institute after I’d already been working in the field a couple years, I can’t emphasize enough how much better a designer you’ll become by broadening your understanding of color. Whether this is a new concept to you, or you’ve had this down cold for years, give this great new (and free) Adobe tool a spin on your next project.