Choosing Color Themes with Adobe's Kuler and Live Color

Scott Onstott
Book & Video Author

Color is a very powerful yet often overlooked design tool. Each color combination carries a distinct emotional message that your eyes and visual cortex can't help but perceive. Careful color selection can help imbue your web design, illustration, advertising, architecture, and landscape with optimism, depth, mystery, melancholy, joy, or even soul.

Adobe has two outstanding tools that help immensely when choosing the right colors for your project—kuler and Live Color. The first of these got its name as a play on the words killer, cool and color, and is 100% free to use. Kuler is a rich web application, Mac/Windows/Linux desktop application, Mac OS widget, community, forum, source of color lore, and world unto itself.

Live Color has even more color-selecting power than kuler and is a feature of Adobe Illustrator CS3. Illustrator is hooked in with kuler so it's easy to harness the community's color savvy without leaving the application, and to upload your own themes for sharing. Kuler's desktop application can also drive CS3 applications including Illustrator, Photoshop and InDesign through an Adobe Labs technology called Switchboard (more on that later).

Just a warning about color—kuler can help you choose a relative theme but the colors you select are not absolutes. Color profiles are ignored in kuler so it's important to be aware that what you see on the screen will not be exactly the same color others see on the web, in print, or in your architectural finishes.

Color by Kuler

Perhaps the best way to understand kuler is to try it. You'll need the latest free Flash player to use kuler. While you're reading this article, open kuler in a adjacent window by clicking here.

Kuler's main limitation is that its color themes may only consist of between 3 and 5 colors. I really wish the maximum number was not fixed but there is something strangely empowering about limiting your palette—the color theme equivalent of a haiku. However, Live Color doesn't have this limitation and does allow you to experiment with as many colors as you want in a color group.

Color from the Community

The menu on the left of the kuler window controls the interface. Choose Themes > Highest Rated or Most Popular to see some quality color combinations. You can read and even comment on themes if you are starting to become a color aficionado.

Sign up with a free Adobe ID and sign in to kuler. After you sign in, you can leave comments and save your own themes.

Searching for Themes

There are over 11 thousand color themes as of this writing, so Search is a key feature. Each theme has a name and a series of tags that are searchable. Try searching for Spain or modern or chartreuse. Maybe there's a theme that will pop out at you and can set the tone for your entire project.

If you do find a theme you like, there is a button (circled in red in the above image) that allows you to download an Adobe Swatch Exchange (ASE) file which can be imported into most Adobe applications. If you're not working with Adobe applications, you can make a note of each color's numbers and manually enter them in just about any application.

Color from an Image

If you like the colors in a particular image, kuler has some algorithms that can automatically capture its mood or let you manually select 5 colors from the image. My current project has me selecting milk paints and after looking at a sample chart I realize that I like the colors and want to develop an overall color theme based on these natural pigments.

Within kuler, choose Create > From an Image, click the Upload button, and select the image file on your computer. You can alternatively click the flickr button to extract colors from others' photos.

After the image appears, you can try different moods (using the Colorful, Bright, Muted, Deep, or Dark menu items), which are more appropriate for photos of things, people, or places. In the case of this chart, choose Custom and then drag the rings around to target specific colors.

Give the color theme a name and a few tags, choose whether you want the theme to be public or private, and click Save.

Color from Harmony Rules

The real genius of kuler lies in its harmony rules. Click Create > From a Color and the rules appear as a sub-menu. When I'm making digital art, I often want the colors in my palette to have a precise relationship to one another. Harmony rules in kuler and Live Color govern these relationships, and they include Analogous, Monochromatic, Triad, Complementary, Compound, and Shades (Live Color has many more harmony rules). Select a rule and one base color, and all the other colors will be chosen for you based on that rule's logic. Select Custom if you want complete color-choosing freedom (and break all the rules).

Click Analogous and then drag the base color (the larger circle) around in the color wheel. Watch as the other 4 colors twirl around in sync with the changes to the base color. Drag one of the outer colors away from the group and observe the grouping widen symmetrically. The slider just below the color wheel controls color value, that is, how much black is in the colors.

Each color has detailed controls underneath that are adjustable. Clicking on HSV, RGB, CMYK, or Lab changes the color-coded sliders appropriately. The sliders are helpful when you want to make specific tweaks. You can even enter values if you're trying to color match by the numbers. Each color's hex value is also given as this is often the quickest way to copy and paste color information between non-Adobe applications.

Any color can be specified as the base color (see the button at the top of the active swatch), so you can choose which color governs the harmony. You can also remove colors from your theme or rearrange them by dragging in kuler. A lot of complexity is hidden in this dynamic and intuitive interface.

Everything Kuler

If you like Kuler the web app, you will want to meet its cousins Kuler the desktop app, and the lesser known Kuler—the Mac widget. Kuler's product page has links to everything kuler. Kuler desktop is built on Adobe AIR so you'll need to install AIR before Kuler desktop. After you get into Kuler desktop, you'll probably want to install Switchboard so Kuler desktop can drive CS3 apps. So install Flash, AIR, Kuler desktop, Switchboard, whew—now we really are on the bleeding edge, but at least it's all free!

Install all of the above if you dare and launch kuler desktop. (There are Windows, Mac and Linux versions.) Type in a search and you can immediately harness the community's collective color wisdom. Access any themes you have saved in Kuler the web app, by selecting Mykuler from Kuler desktop's drop down list.

Kuler the Mac widget can be downloaded from the information panel within the Mac version of Kuler desktop. The Kuler widget lives in the dashboard (usually accessed by the F12 key). This widget doesn't support an easy color transfer workflow as hex values must be copied to the clipboard, and it doesn't show Mykuler either. I don't recommend it unless you're a kuler fanatic.

My preferred color workflow allows you to design themes in kuler and skirts around exporting and importing ASE files or copying and pasting color numbers as a transfer mechanism altogether. If you save a theme on kuler (remember to log in) then it's stored in Mykuler. This is the key to seamless color exchange.

So let's do just that. Go to kuler in your browser and design and save a few color themes—these will automatically appear on Mykuler. Then switch to Kuler desktop and choose Mykuler from the list and you will see your saved color themes.

If you've installed Switchboard as described earlier, then you can feed these colors right into Adobe InDesign, Illustrator, or Photoshop (all CS3). Click the downward facing arrow under a color theme and then choose your application of choice from the tiny column of icons. When I choose Illustrator, it launches automatically and a new window appears called Milkpaint (my theme name). By the way, Illustrator has a kuler window but it lets you search community themes only.

Colors transferred from Kuler desktop appear on the Swatches panels of Photoshop and InDesign.

Live Color in Adobe Illustrator

In Illustrator, double-click the imported color group (Milkpaint in this example) and it will load into the project. Switch to the Color Guide window and click the Edit Colors button to open the Live Color dialog box. Welcome to the holy grail of Adobe color selection.

The drop down menu at the top contains many more color harmony rules than are available in kuler. You can also go beyond 5 colors in a theme as promised. Click the Add or Remove Color tools (circled above) to design an extended color group. The Assign tab allows you to recolor existing artwork within Illustrator using your color theme, but I'll stop this article here and let you play with all these colorful tools.

About the Author

Scott Onstott is a book and video author of AEC software tutorials. He has a degree in architecture from UC Berkeley and has served as an instructor there, in addition to working in several prominent engineering, architecture, and interiors firms in San Francisco. He has also worked as a technical editor and technology consultant.

Scott has contributed to over two dozen books and videos on AutoCAD, Architectural Desktop, VIZ Render, Revit, 3ds Max, VIZ, Photoshop, Illustrator, Painter, Fireworks, and Dreamweaver. He can be reached via: www.ScottOnstott.com.

Tips & Tricks > Choosing Color Themes with Kuler and Live Color > Printer-friendly format