Veerle's blog

One of the ways to create nice color combinations is to extract colors from a photo. It’s one of the methods I described in my article Choosing color combinations from a while ago. Adobe® added this feature in the new version of Kuler, an online Flash application from Adobe Labs®. Kuler let’s you create your own color combinations from an interactive color wheel. In this article I will share some of my experience on how I compose color themes in Kuler together with some tips on how to compose your own color combinations.

Extract color swatches from an image

First of all let me say that I think this is an awesome feature. I tested this with a few of my favorite photos and the result is really amazing. See for yourself:

The feature is very self-explanatory really. Once you sign in you choose 'Create' and then you click on 'From and Image'. Click the 'Upload New Image' and choose an image (in PNG, GIF or JPEG format). By default Kuler will select a 'colorful' palette as default 'mood' which is my preferred setting. Once the color are extracted you can change the mood setting or you can change each swatch separately to your liking. When you select a swatch marker on the photo, the corresponding color swatch will become active.

Save and import your color swatches in Illustrator and Photoshop

Once you have created a set of colors you can save it as an Adobe Swatch Exchange file. This file can be imported in all Adobe applications. Here is how you import the swatches in Photoshop and in Illustrator:

in Adobe® Photoshop

• Go to the Swatches panel (Window > Swatches)
• Select 'Load Swatches' from the panel menu
• Browse to the .ase file you've saved and select it and click the 'Open' button
• The swatches will be added to the other swatches the Swatches panel

You can also choose 'Replace Swatches' if you can to replace the currently loaded swatches with the ones you want to load.

in Adobe® Illustrator

• Go to the Swatches panel (Window > Swatches)
• Select 'Open Swatch Library' and then 'Other Libraries...' from the panel menu
• Browse to the .ase file you've saved and select it and click the 'Open' button
• A separate Swatches panel appears on your canvas

You can also choose to place the .ase file in the Swatches folder (or Color Swatches folder) located within the Presets folder of your application. This way it'll appear in the panel's menu next time you launch the application. Everyone has his or her own method of course, but I prefer to save the swatch files in the folder of the project itself together with the Graphic Styles or Action Files (if any) etc.

How I use Kuler

I tend to go for the custom setting each time I create a theme. When I see some nice colors I go to Kuler and I try to recreate them. That's how it goes most of the time. It's just in my nature to see the colors first before I see the shape or the content of something. That's just how I perceive things. I'm very much influenced by colors. Creating new color combinations is something I do like a lot. When I start a design I sometimes create the color palette first before starting the actual design. Though it doesn't always guarantee that the result will give the same outcome. The small color swatches don't give you the whole picture of your design in terms of colors and so sometimes it happens that I'm tweaking the colors in the middle of my process. Sometimes it means choosing another different color palette. The order of things during my design process isn't always exactly the same and strictly structured. I guess the mind of creatives isn't really made to work in such way as in 'this is the way I do it and these are my steps'. Good ideas come when you step out of this and think freely. When it comes down to designing websites however I tend to start by creating basic wireframes of the pages before I actually start on the design. They are in grayscale and show the placement of the different elements of the page. While doing that I try to work out a basic grid (column width and gutter etc.) to keep the layout balanced and make sure content and whitespace are in harmony. In a later phase, when I'm in the design phase I fine-tune the grid in terms of text font size, headings, leading etc.

Still, I believe choosing a color palette before you start on your design is a very good exercise and good starting point. You can decide on which colors could be your primary colors and which would your secondary and tertiary etc. Which colors would serve as subtle accents (e.g. text links and hover effect for a webpage) etc. That's why you'll notice a lot of contrast and the use of complimentary colors in my Kuler color themes. I find myself almost never using the other settings like Analogous, Compound or Complimentary when I compose a theme and that's just because I like 100% full control over each and every swatch I pick. That's just mainly because I know which direction I want to go when I'm composing my palette. Still, I believe these settings are very useful in case you have no idea at all. You could start from 1 color and then experiment which colors could go with that color by dragging the sliders. Of course with the new feature I think it'll be more fun to create really nice color themes. I for one will sure use this a lot.

Tips on choosing color combinations

• Use 1 or 2 contrasting or highlighted colors and use these to give accents to your design. In case you are designing a webpage use the most contrasting accent color as your text links. This way they will be very visible. The other accent color could serve as secondary accent for your pages. Accents that serve another purpose in terms of functionality.
• Make sure you don't use too many different colors or you could end up with an unattractive chaotic design. Start with 2 different rather vibrant hues and derive, 2 lighter or darker colors (depending on the initial choice) from these ones and 1 softer color. You should end up with 2 vibrant colors that contrast with each other and then 3 colors derived from these 2.
• If you need to expand the color palette a bit further, then you could derive darker and lighter variations from the 2 primary colors and stick within the same range of hues of those 2 colors.

These are rules of thumbs I often use, but they are definitely not written in stone. They do not apply if you're after an analogous or monochromatic color combination. Also, I sometimes start with 3 different colors (instead of just 2 like I suggest above) and derive 2 or 3 other colors from that. In a lot of cases (depending on what you are designing) a palette of 5 colors is not enough for an entire design, but at least it should be a starting point and the colors that are added in the palette later on should be within the same hue. At least that would be my advice :)

Some Kuler info

• Learn more about Kuler by following this tutorial.
• With Kuler desktop you can copy swatch values and then paste the value in your CSS application or in the hexadecimal color value field of the Color Picker window in Photoshop or Illustrator.
• Apple Dashboard widget for Mac OS
• Kuler and color links

Update:

There is something I completely forgot to mention: If you go to Window > Adobe Labs > kuler a Kuler panel will appear on your canvas. From here you can browse color themes and add them directly into your color Swatches panel by clicking the Add to Swatches icon at the bottom of the panel.